iPhone 1st Generation Mockups
Last Updated on July 16, 2026 by Editorial Team
An amazing freebie containing a set of 20 iPhone 1st Generation mockups (5 scenes with 4 mockups each). The mockups are available in both .PSD and .Sketch formats.
Designed by Ruslan Latypov.
Free for personal and commercial use.
What makes this iPhone 1st generation mockup stand out is the amount of care put into the device itself.
The rounded aluminum bezel, the recessed home button, the tiny speaker grille above the screen, all of it reads as an accurate homage to the original 2007 handset rather than a generic phone shape with rounded corners.
The soft studio lighting, subtle shadow beneath the device, and gentle three-quarter angle give it a clean, premium product-photography feel rather than a flat, stock-looking render.
That retro shape is exactly the point. If you are designing anything that touches on the history of mobile technology, from a blog post about the evolution of smartphones to a slide deck on design nostalgia, this mockup gives you an instantly recognizable silhouette that no current iPhone template can replicate.
It also works well for app history showcases, portfolio pieces that want to show a UI concept “as it might have looked” on the original device, or editorial features where a bit of visual nostalgia adds personality.
Because the chrome edge and glossy screen are rendered with such attention to reflection and highlight, it also holds up nicely as a standalone hero image for a tech-themed article or social post, even without any screen content dropped in.
Working With the Changeable Color Option
One of the more useful features baked into this file is the changeable color of the device body.
That means you are not locked into the classic silver and black finish shown in the preview.
Depending on the palette of your project, you can shift the metal tone to match a brand color scheme or simply create a variant that feels a little different from the default look.
To do this, open the layer containing the body or bezel, and adjust its color through a fill, hue, or overlay adjustment layer positioned above it.
Keep the blend mode intact so the existing highlights and shadows still show through the new color, which is what keeps the metal looking believably reflective rather than flat.
Placing your own screen content is the other core task here, and it follows the same logic as most phone mockups.
Find the smart layer or screen placeholder, drop in your artwork, and let the perspective and lighting already baked into the file do the work of making it look seated on the glass.
Because the screen sits at a slight angle in this particular scene, pay attention to how your interior UI or artwork lines up with the visible screen edges before flattening anything.
A straight-on screenshot dropped in without adjustment can look slightly off against an angled device, so nudging the corners to match the perspective is worth the extra minute.
Since the set includes multiple scenes with several mockups apiece, you have room to build out a small gallery rather than relying on one static shot.
Mixing angles across a case study or landing page reads as more considered than repeating the same pose four times.
Pair the finished renders with period-appropriate UI styling, think skeuomorphic icons, glossy buttons, and heavier drop shadows, if you want the whole composition to feel authentically 2007 rather than a modern interface awkwardly sitting on a vintage frame.
For contrast, some designers do the opposite on purpose, placing a distinctly modern flat UI on the old hardware to make a visual point about how far interface design has traveled.
Either approach benefits from a simple background, since the device and its reflections already carry plenty of visual interest on their own.
