iOS7 Interface – Photoshop CS6 Tutorial

ios7-header-image

Video

 

1. Using An iPhone 5 Template

I am using an iPhone 5 template for this tutorial. You can run a Google search or grab the iPhone 5 that I am using by [[downloading it here]] http://www.pixeden.com/psd-mock-up-templates/iphone-5-psd-flat-design-mockup I’m working just above the “Screen” layer.

iOS7 Interface - Photoshop CS6 Tutorial

2. Adjust The Stroke

Double click the “Screen” layer to open the Layer Styles dialog box and choose the “Stroke”. We want to set the stroke to 6px, 75% Opacity, and solid black (#000000).

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

3. Adding a Background

We’re going to add our iOS7 background to this screen from a photograph. Find a photo with colors that you like. Essentially we’re going to blur and mask an image to force it into the screen area. Drag an image and drop it right into our iPhone 5 template document. (This will place it as a smart object.)

iOS7 Interface - Photoshop CS6 Tutorial

4. Blur & Transform

Go Filter>Blur>Gaussian Blur and choose a blur that will eliminate all the details in your photo and maintain good color. I’m going with 75px. Next, go Edit>Transform and scale the background image to roughly fit the screen area. TIP: Make it a bit larger than the screen area to ensure plenty of coverage with no see-through areas where the blurring may be making the background semi-transparent.

iOS7 Interface - Photoshop CS6 Tutorial

5. Mask It!

Cmd/Ctrl + Click the “Screen” layer to load it as a selection and go Layer>Layer Mask>Reveal Selection. You now have your iPhone 5 iOS7 background. Let’s continue on.

iOS7 Interface - Photoshop CS6 Tutorial

6. Faking Depth

Create a new layer above our background layer and grab your Brush tool (B). I’ve named this new layer “Depth”. Set your foreground color to white and then set your brush to 30% opacity. Go Window>Brushes and click on the words “Brush Tip Shape” at the upper left area of the dialog and set the brush size to 200px and the hardness to 100%.

iOS7 Interface - Photoshop CS6 Tutorial

7. Brush Dynamics

Click on “Shape Dynamics” and make sure it is checked on. When you click on the words “Shape Dynamics” it will bring up a series of sliders. Drag the “Size Jitter” slider to 100%. Don’t worry about the “Control” drop down. “Pen Pressure” or “Off” work great.

iOS7 Interface - Photoshop CS6 Tutorial

8. Add The Bokeh

By clicking a few times we can add some glassy circles of light over our background (make sure you’re on the “Depth” layer.)

iOS7 Interface - Photoshop CS6 Tutorial

9. Blend The Bokeh

Set the “Depth” layer to the blend mode “Soft Light” and then go Filter>Blur>Gaussian Blur and blur the bokeh circles 4px. If needed drop the opacity to 70% or so.

iOS7 Interface - Photoshop CS6 Tutorial

10. Building The Dock

Grab the Rectangular Marquee Tool (M) and look to the tool options bar running across the top of the Photoshop window and select the “Style” drop down menu and choose “Fixed Size”. Set the size to 100px wide by 200px tall. Place a selection exactly at the bottom of the screen as I have in the screenshot. (NOTE: Our selection is resting “on top of” the gray stroke at the bottom of the iPhone’s screen.)

iOS7 Interface - Photoshop CS6 Tutorial

11. Gradient For The Dock

Create a new layer and name it “Dock”. Fill our selection with any color you like (we’re going to brush a gradient across the dock so the color doesn’t make a difference, we just need some solid fill color in there.) Next, go Layer>Layer Style>Gradient Overlay.

iOS7 Interface - Photoshop CS6 Tutorial

12. Colorize Our Gradient

We want to match the dock colors to the colors of our background. We’re going to sample a couple colors and use them for our gradient. It’s pretty easy to do. Click on the gradient and double click each color stop in your gradient and use the eyedropper that appears to simply choose a color from your background image. I chose a lighter and a darker color.

iOS7 Interface - Photoshop CS6 Tutorial

13. Mask The Dock

Now Cmd/Ctrl + Click the “Screen” layer thumbnail to load the screen as a selection. Make sure you are still on the “Dock” layer and go Layer>Layer Mask>Reveal Selection.

iOS7 Interface - Photoshop CS6 Tutorial

14. Cell Strength Indicator

Up in the very top left of the screen is a series of five white dots to indicate the cell strength. We’ll grab our Brush tool (B) and right click and choose the 9px hard-edged brush. TIP: We’re choosing from the menu here because it will quickly get rid of our “Shape Dynamic” options we had set earlier for the bokeh. Create a new layer and name it “Cell”. Dot five little circles in the top left of the screen.

iOS7 Interface - Photoshop CS6 Tutorial

15. Wi-Fi Icon

Create a new layer and name it “WiFi”. Grab the Custom Shape Tool and set it to draw “Pixels” using the little drop down menu in the tool options bar at the top of your window. Hold down your Shift key to drag out a bullseye. This will be the base of our Wi-Fi icon.

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

16. Cut The Wi-Fi Shape

Grab the Rectangular Marquee tool (M) and create a selection to split the bullseye in half and hit your “Delete” key to get rid of those pixels. Then split the half bullseye again with the Marquee tool. Check out my screenshots for details. Go Edit>Transform>Rotate and rotate the shape to look just like a WiFi icon.

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

17. Battery Icon

Create a new layer and name it “Battery”. Grab the Rectangular Marquee tool (M) and drag out a small rectangle and use your Shift key to add a small battery conductor to the right side of our battery icon. Fill this with white.

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

18. Battery Juice

Go Layer>Layer Mask>Reveal All to drop a layer mask over this “Battery” layer. Grab a very small brush and set your foreground color to black and use the mask to “erase” a little outline on the battery icon as I have.

iOS7 Interface - Photoshop CS6 Tutorial

19. Time and Battery Percentage

Grab the Type tool (T) and use the font “Raleway”. I am setting the font to a size 16pt and setting the battery strength to a font weight of “Regular” and the time to “Bold”.

iOS7 Interface - Photoshop CS6 Tutorial

20. Base Icons

Grab the Rounded Rectangle tool and ensure that you’re creating a new Shape (or Shape Layer for older versions of Photoshop) and then click once to bring up the “Create Rounded Rectangle” dialog box. Set the sizes as I have. 135px by 135px with a 35px corner radius. Set the fill of this shape to white. I have placed my icon 20 pixels from the top and left of the dock. See my screenshot.

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

21. Copy Icon and 20 Pixel Gutters

Use Cmd/Ctrl + J to duplicate our icon. Duplicate the icon a couple more times so you have four icons. Use the Move tool (V) and your arrow keys to position your icons with a 20 pixel gutter between each icon. You will now have 4 beautiful spaced icons on your iPhone dock.

iOS7 Interface - Photoshop CS6 Tutorial

22. Gradients For Icons

Ahh the beauty of brightly colored, sharply graduated icons! We’re going to stay true to what we’re seeing with the iOS7 beta and place those colorful gradients on the icons. Select the first icon in the Layers panel and go Layer>Layer Style>Gradient Overlay. Check out my screenshots to see what gradients I am using for the four icons.

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

23. Icon Titles

Grab the Type tool (T) and add the words “Phone, Mail, Safari, and Music” beneath each respective icon. You can use the Arial or Helvetica typeface set to 18pt. I have reduced the opacity of my type layers to 65%.

iOS7 Interface - Photoshop CS6 Tutorial

24. Clock and Date

Grab the Type tool (T) again and type out the time. Commit that change and open the Character panel Window>Character and set the font to “Raleway” and set the weight to “Extra Light” and also set the size to 165pt. Add more type beneath the large time stamp and simply size it down to about 36pt. Reduce both layers to an opacity of 65%.

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

iOS7 Interface - Photoshop CS6 Tutorial

25. Pagination

We want to add the dots at the bottom of the screen to indicate that there is more than one page. Create a new layer and name it “Pages”. Grab your Brush tool (B) and set the tool’s opacity to 50% and place three dots near the bottom of the screen. I went ahead and clicked twice on one of the dots to indicate that we are on that page.

iOS7 Interface - Photoshop CS6 Tutorial

26. Boom

You’re finished! You can add whatever flat icons that you like to this quick little iOS7 interface setup! Enjoy! Check out Howard Pinsky’s tutorial on the iOS7 Photos Icon here »

 

Follow Me On Twitter!

Like Tutvid on Facebook!