Learn How To Create An Ipad Apps Themed Layout

Learn How To Create An Ipad Apps Themed Layout

What We’ll Be Creating

Learn How To Create A Stylish Apps Layout

Resources Used In This Tutorial

Creating The Header

Create a new (Ctrl + N) document 1200 x 1150 pixels with a white #ffffff background. Select the “Rectangular Marquee Tool” (M) then drag out a fairly big rectangle across the canvas. Once the selection has been made create a new layer, select the “Fill Tool” (G) with a radial gradient then set the foreground color to #9cd41c and background to #427403. Drag the gradient from the bottom right side of the rectangle until you have something like this.

Learn How To Create A Stylish Apps Layout

Now, select the “Custom Shapes Tool” (U). From the library of custom shapes select the “Registration Target” shape.

Learn How To Create A Stylish Apps Layout

Drag the shape out really big so that only the streaks from the center are shown on the canvas. You can resize the shape with the “Free Transform Tool” (Ctrl + T). Once the shape has been dragged out right click the layer and select “Rasterize Layer” from the menu. Load a selection around the header rectangle “Layer > Load Selection”, then go to “Select > Inverse” and hit the delete key (Make sure before you hit delete that the shape layer is highlighted in the layers window).

Learn How To Create A Stylish Apps Layout

Set the shapes blend mode to “Soft Light” and opacity to “25%”, finally add a layer make to the shape and a radial gradient from the middle of the shape outwards, if your foreground color is black the gradient will be reversed, make sure its set to white.

Learn How To Create A Stylish Apps Layout

Adding The Header Content

Inside the header area in the top left corner add your website title and slogan.

Learn How To Create A Stylish Apps Layout

Once you’ve added the title and slogan add the following layer styles to your title text layer.

Learn How To Create A Stylish Apps Layout

Learn How To Create A Stylish Apps Layout

Underneath the title and slogan add a small title with a paragraph of text. Use the “Rounded Rectangle” and the color black #000000 to create a call to action button on the right.

Learn How To Create A Stylish Apps Layout

Adding The Ipad

Download the ipad PSD from the resource list then add it to your canvas. Place the ipad on the right side of the header, then rotate it slightly with the “Free Transform Tool” (Ctrl + T).

Learn How To Create A Stylish Apps Layout

I deleted the shadow from underneath the original ipad and replaced it with a new one using the “Elliptical Marquee Tool” (M).

Adding The Custom Shapes

Download some custom shapes from the link below. I’ve left it up to you which shapes you wish to use.

Once you’ve decided which shapes to use, begin to add shapes behind the ipad, make all the shapes white #ffffff.

Learn How To Create A Stylish Apps Layout

Once your happy with the placement of the shapes , add a cloud shape underneath the ipad. The cloud shape should overlap into the white canvas background. There is a cloud shape already included in the custom shapes library.

Learn How To Create A Stylish Apps Layout

On a new layer underneath the cloud layer make a selection like the image below using the “Rectangular Marquee Tool” (M).

Learn How To Create A Stylish Apps Layout

Set your foreground color to #dbdbdb then select the “Gradient Tool” (G) in the options bar at the top change the gradient color type to “Foreground To Transparent”.

Learn How To Create A Stylish Apps Layout

Now drag the gradient into the selection, you should have something like this.

Learn How To Create A Stylish Apps Layout

Finally, directly underneath the bottom of the green rectangle create two 1 pixel lines, color one black #000000 and the other white #ffffff. Set the two lines opacity to 50%, you should have something like this.

Learn How To Create A Stylish Apps Layout

Learn How To Create A Stylish Apps Layout

Creating The Twitter Feed

Select the “Rounded Rectangle Tool” (U) then create a rectangle underneath the header.

Learn How To Create A Stylish Apps Layout

Once you’ve created the rectangle add a small triangle on the top left side, turning the rectangle into a long speech bubble type shape.

Learn How To Create A Stylish Apps Layout

Now add the following layer styles.

Learn How To Create A Stylish Apps Layout

Learn How To Create A Stylish Apps Layout

Inside of the speech bubble like shape add a simple twitter feed.

Learn How To Create A Stylish Apps Layout

Creating The Featured Content

Using the “Rounded Rectangle Tool” (U) create 3 small boxes the same width as the twitter feed box, to the 3 boxes add the following layer styles.

Learn How To Create A Stylish Apps Layout

Learn How To Create A Stylish Apps Layout

Learn How To Create A Stylish Apps Layout

You should have something like this.

Learn How To Create A Stylish Apps Layout

Make a selection around one of the boxes “Layer > Load Selection” then go to “Select > Modify > Contract” contract the selection by about 5px then copy and paste an image inside (app related), when pasting the image use “Edit > Paste Into” for CS5 users go to “Edit > Paste Special > Paste Into”.

Learn How To Create A Stylish Apps Layout

Repeat the steps above for the last 2 rectangles then add some example text underneath each box.

Learn How To Create A Stylish Apps Layout

Underneath the featured content boxes add a section about the website using the “Type Tool” (T).

Learn How To Create A Stylish Apps Layout

The Sidebar

Using the “Rounded Rectangle” (U) create a rectangle on the right hand side in the space which is left over. Inside of the box add a title and some small paragraph text. Once you’ve done this add the following layer styles to the rectangle.

Learn How To Create A Stylish Apps Layout

Learn How To Create A Stylish Apps Layout

Learn How To Create A Stylish Apps Layout

You should have something like this.

Learn How To Create A Stylish Apps Layout

Inside of the rest of the rectangle simulate two small blog posts in list format. Each list entry has a small green bullet point and are separated by a simple 1pixel line. At the very bottom of the rectangle add a black call to action button.

Learn How To Create A Stylish Apps Layout

Creating The Footer

Nothing to drastic for the footer… start with a simple 1px line which separates the content from the footer then add the copyright information on the left and some social icons on the right.

Learn How To Create A Stylish Apps Layout

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

SB Designs UK is a cannock website designer company which creates websites for people in the cannock, wolverhampton, walsall, staffordshire, birmingham and even internationally we are based in the cannock, walsall and staffordshire.

Learn How To Create A Stylish Apps Layout

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

8 comments
abdulhadi says

tnks very much good & nice tutorial

Reply
Sanjay says

Cool! I like the colors and the shapes, another superb layout.

Reply
Samuel says

Awesome tut as usual can’t wait to code it out. is there somewhere we can post the stuff we do for others to see??

Reply
Pav says

great tutorial, the banner creation bit helped me a lot. many thanks!

Reply
Paul Weston says

Another great tutorial. I really like the layout of this theme and the use of colour really gives it a fresh feel and makes the theme stand out. There are also some great little techniques, I especially like the textured background and the dividing line under the featured app part of the layout. I thought there was great detail in this tutorial and a great resource with the custom shape collection.

Reply
feona says

cool layouts… loving it.

Reply
hosein says

tnx a lot, like it

Reply
Pranjal Govekar says

Really superb tutorial !
Just I found silly mistake :D , you wrote “Layer > Load Selection” in 3rd step that should be “select > Load Selection” !

Reply
Add Your Reply

Popular posts

css.php