hello everybody welcome to another tutorial. In today’s tutorial i’ll
be showing you how to create an apple theme mobile app layout.
Drag the reflected gradient over your canvas starting from about 400 pixels down from the top of your canvas. Your looking to get something like this.
Drag out a rectangle on the right side of the canvas. The rectangle should be quite smaller than your average navigation.
Once you’ve created the rectangle add the following layer styles.
You should have something like this.
Inside the navigation bar add your textual links using the color #676767. Leave the first link set to the color white.
Now using the rounded rectangle with a radius of 5px create a rectangle around the first link. Fill the rectangle in the color #8f8f8f and make sure the layer is underneath your text layer.
Once you’ve created the rectangle add a drop shadow using the settings below.
You should have something like this.
You should have something like this.
Expand the “front” layer to reveal the rest of the layers inside the group. Once expanded find the reflection layer then hide it by clicking the little box next to the layer.
Now resize the all the layers in the “front” group by highlighting the group in the layers window and pressing “CTRL + T” on the keyboard. Resize the iphone so it fits underneath the title text.
Now resize and rotate the other iphone making it much smaller. Place the iphone behind the bigger one.
Next to each icon add some example text.
Now add the following layer styles to your rectangle.
You should have something like this.
Were now going to make a custom diagonal pattern, create a new document 25px x 25px with a transparent background, select the pencil tool with a 1pixel black brush and duplicate the image below.
Once you’ve created the custom pattern go to “Edit > Define Pattern”, give your pattern a name and save it.
Head back to your original canvas and load a selection around your rectangle, to make a selection highlight the layer and go to “Select > Load Selection”. Once you’ve loaded the selection select the paint bucket tool and change “Foreground” to “Pattern”.
Fill the selection with your pattern on a new layer then set the layers opacity to 1%.
Inside the rectangle add the iphone icon from the resources list then add the text “Available on the iphone AppStore” once you’ve added the text add the following layer styles.
You should have something like this.
On the right side of the content title text create two 1 px lines on top of each other, color the top line in black and the bottom line in white then set the layers blend mode to “Overlay”.
Underneath the title add some example text and a small image gallery using a small selection of images.
Finally add your footer text underneath the line.
What We’ll Be Creating
Click image for full view.
Resources Used In This Tutorial
Lets Get Started
Create a new document 1200 x 1200 pixels with any color background. Change your foreground color to #f3f3f2 and background color to #d2d2d2 then select the gradient tool with a reflected gradient.Drag the reflected gradient over your canvas starting from about 400 pixels down from the top of your canvas. Your looking to get something like this.
Creating The Navigation
Select the rounded rectangle tool from the menu then change the radius of the rectangle to 10px (should be 10px by default).Drag out a rectangle on the right side of the canvas. The rectangle should be quite smaller than your average navigation.
Once you’ve created the rectangle add the following layer styles.
You should have something like this.
Inside the navigation bar add your textual links using the color #676767. Leave the first link set to the color white.
Now using the rounded rectangle with a radius of 5px create a rectangle around the first link. Fill the rectangle in the color #8f8f8f and make sure the layer is underneath your text layer.
Once you’ve created the rectangle add a drop shadow using the settings below.
You should have something like this.
Creating The Website Title
On the left side of the canvas add your website title using the text tool. Once you’ve add the text add the following layer styles to the text layer.You should have something like this.
Adding The Iphone Information Area
Download the 3G/3GS iphone PSD file from the resources list then open up the PSD file in photoshop. In the layers window find the two layers “front” and “back black” once you’ve found the layers drag the two layers into your layers window.Expand the “front” layer to reveal the rest of the layers inside the group. Once expanded find the reflection layer then hide it by clicking the little box next to the layer.
Now resize the all the layers in the “front” group by highlighting the group in the layers window and pressing “CTRL + T” on the keyboard. Resize the iphone so it fits underneath the title text.
Now resize and rotate the other iphone making it much smaller. Place the iphone behind the bigger one.
Adding The Iphone App Icons
Download your desired iphone icons using the icons from the resources list. Place each icon in a list next to the big iphone underneath the navigation.Next to each icon add some example text.
Creating The AppStore Button
Using the rounded rectangle tool with a radius of 10px, create a small rectangle underneath your apps list.Now add the following layer styles to your rectangle.
You should have something like this.
Were now going to make a custom diagonal pattern, create a new document 25px x 25px with a transparent background, select the pencil tool with a 1pixel black brush and duplicate the image below.
Once you’ve created the custom pattern go to “Edit > Define Pattern”, give your pattern a name and save it.
Head back to your original canvas and load a selection around your rectangle, to make a selection highlight the layer and go to “Select > Load Selection”. Once you’ve loaded the selection select the paint bucket tool and change “Foreground” to “Pattern”.
Fill the selection with your pattern on a new layer then set the layers opacity to 1%.
Inside the rectangle add the iphone icon from the resources list then add the text “Available on the iphone AppStore” once you’ve added the text add the following layer styles.
You should have something like this.
Creating The Content Area
Using the text tool add a content title underneath the big iphone, once you’ve added the text apply the following layer styles to it.On the right side of the content title text create two 1 px lines on top of each other, color the top line in black and the bottom line in white then set the layers blend mode to “Overlay”.
Underneath the title add some example text and a small image gallery using a small selection of images.
Creating The Footer
Repeat the creation of the two 1px lines on top of each other only this time make the lines span the width of the canvas. Once you’ve created the lines add a layer mask to the layer and drag a reflected gradient from the middle of the line outwards. The line should blend in from each side.Finally add your footer text underneath the line.
0 comments:
Post a Comment