This tutorial will help you to create a website to promote an IPhone/IPad application. During this tutorial, you will learn to create a layout resulting of a mix between a modern design and an effect of illustration (not far away from cartoons). Perfect for all uses around web applications and IPhones, this template will be useful too for other themes like: portfolios, eco-websites, etc.

Want to download this PSD layout ? Register for a VIP account and download in unlimited access our collection (more 70.000 graphic items).

I used for this tutorial, the Vector pack Landscape from grafpedia.com, as well as some icons I found on this page, or some illustrations coming from the website http://culturedcode.com/things/iphone/. Then, you will not find these pictures in the psd file.

Before to start this Photoshop tutorial, have a look on the final result below.

We can now start the tutorial. For all of you publishing the link of this page on their Twitter, Facebook or StumbleUppon to help us to promote it, I thank you a lot

STEP 1 Create a document

Open Photoshop, then go to menu File> New and enter the values: Width 1 000 and Height 1 200px.

Press the OK key. Your new picture appears on screen. Be sure the layers windows is opened (to open it, go to menu Window>Layers).

Create a new layer and name it the bg_header. Set the foreground colour to this blue #3288c3. Use the Rectangular Marquee Toll (M) to create a selection with a size of 1000×450px, then use the Paint Bucket Tool (G) to fill it.

Add a gradient on this blue block, to do it, go to menu Layer>Layer style> Gradient Overlay.

STEP 2 Create the first menu

A menu including a logo and a set of links, will take place on the top of the template. A shadow will be added under it. To create the shadow, create first a new layer and name it shadow. Set the the foreground colour to the black, then select the Gradient Overlay tool (G) (and from the Selector, choice the Foreground Gradient -> Transparent). Now create on your picture, a black gradient overlay from the top to the bottom (see the picture below).

To finish it, add a layer mask on this layer to shadow the left and right sides. Go to menu Layer>Layer Mask>Reveal all. Create now a gradient overlay on the right and on the left.

Create a new layer and name it bg . Use the Rectangular Marquee Toll (M) to create a selection defined with values 1000 x 40px. Fill this selection with the white colour. To finish, reduce the opacity to 40%.

Add a layer Mask on the layer and shadow the top of the menu.

Regarding the logo, type the name of your website (I used the Androgyne Font). Then, add on this text three layer styles : Shadow, internal shadow, gradient overlay.,

To finish the menu, add some links on the right (Font used : Helvetica). For the active link, I just used a rounded rectangle with the blue colour #3d85c1.

See below the final result of the menu.

STEP 3 Create the Header

Create first a new group and name it the header. Use the Text Tool (T) to add the main slogan of the website. In my example, I used the Androgyne Font.

To give a style to the text, reduce the opacity of the second layer to 60%. For the title, add same layer styles as them added on the logo. Step to the button creation. To doo it, create a new group and name it button. Use now the Rounded Rectangle Tool (U) to create the shape of your button (use a radius of 6px).

I added at least 5 layer styles: shadow, internal shadow, internal glow, gradient overlay and outline.

Use now the Ellipse Tool (U) to create a round over the button (do not forget to keep the Uppercase key pressed to create a perfect round).

Add two layer styles on your round, a shadow and an internal shadow.

To finish, use the Custom Shape tool (U) to create a little arrow in the centre of the round. A a shadow on the arrow.

To finish the button, use the Text Tool (T) to add the title. Add now an outline and a shadow on the text (menu Layer>Layer style>Outline and Shadow).

STEP 4 The clouds

To create the clouds, start to download the vector pack available on this page :
Then import the clouds one by one to generate a complete line.

Join all layers into one group (and name this group clouds). Add a blending mode on the group. To finish this step, use the Rectangular Marquee Tool (M) and the Paint Bucket Tool (B) to cut the clouds (see picture below).

Download the UI iphone Retina kit available on this page http://www.teehanlax.com/downloads/iphone-4-guid-psd-retina-display/. Open now the psd file and slide and drop the document regarding the IPhone. Duplicate the group and reduce the Iphone size to a value of 5%. Use the Move Tool (V) to place it on the left of the first one.

Use the Text Tool (T) to add a description of your software, set the colour text of the end to this blue #2a638c and import an arrow (by my side, I often use this website resources: Websitebullets.

STEP 5 Some touches

Go back to the Landscape vector file (already downloaded on this page). Copy and paste the plane on the top right of your slogan.

Then, the birds.

To finish the carousel, create a links list using the Text Tool (T). Regarding the active link, just create a rounded rectangle (use the Rounded Rectangle Tool (U) with a radius of 6px).

STEP 6 The contents

The page is composed with two blocks: the first block with more information about the software ((screenshot and text) and the second with links for downloads.
Regarding the first block, create a new group and name it the details. Create anew layer and a selection of 880×220px. Fill this selection with white colour. Apply same method to the second block but with this colour #4f9aca. Move your selection of 2px to the bottom and press the Del key. It will keep only a thin blue border.

Create a new group and name it the box1. Create inside a rounded rectangle with a size of 150×80px with same blue colour used previously.

Add inside your picture.

Duplicate this group 5 times and place the blocks with a space of 20px between each of them. To simulate the hover effect, set the colour of the rectangle one of the blocks to this orange: #ff7f2a. Then, create a new layer, retrieve your picture selection. Fill it with the black colour and reduce opacity to 40%.

To finish the step regarding the blocks, import the zoom.psd icon file available from the pack of this tutorial (the blue link on the bottom page) and place it over your block .

Use the Text Tool (T) to add a title on the right of the 6 screenshots.

Apply same method to the two small texts under. Regarding the icons, they come form the here page:: http://www.iconfinder.com/search/?q=iconset%3Afatcow

STEP 7 The second block of contents

Regarding the second block, create a new group. Do same thing as what done for the first block, but a difference, placing the blue border on the bottom (and not on the top as done for the first block). Use the Text Tool (T) to add hypertext links (font helvetica 12px). Create a blue rectangle under the active link.

Create now a blue button on the left side of the block. To create this button, use same styles than the styles used to create the orange button from the header (switch colour from the orange to the blue).

Use again the Text Tool (T) to add a title, a chapter and an orange link.

STEP 8 Import the landscape

To create the landscape, nothing can be easier than the landscape vector ! Open the landscape file under Illustrator, then copy and paste the hill (from Illustrator to Photoshop). Enjoy making your own landscape, importing flowers, trees, clouds, etc…

Create a new layer and put it under the layer named Landscape. Set the foreground colour to the pale-blue #d1f3ff, select the Gradient Tool (G) (foreground -> transparent) and create a gradient from the bottom to the top.

Add now a button Available on appstore. To create this button, I used this free file: http://corrupteddevelopment.com/customizable-app-store-download-buttons/ and I only changed the gradient and outline colours.

To finish, create a new layer, and place it this time over the landscape layers. Use the Rectangular Marquee Tool (M) to create an active selection with a size of 1000×45px. Fill your selection with this green colour #137109 and go to menu Layer> Layer Style> Internal shadow. Use now the Text Tool (T) to add the Copyright.

Go now to the website iconfinder.com to retrieve some networks icons and import them into you Photoshop document. Place these icons on the right side of the footer and add a colour overlay into each icon (menu Layer>Layer Style>Colour overlay).

Here is the final result of your template :

And without the guides:

This Photoshop tutorial is now finished, I hope you like it. To help us, why not to publish this page link on your Twitter, Facebook or Stumble Upon account(s). I send big Thanks for all of you ready to do it.

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

This pack of vectors is very interesting for the webdesigners because it includes lot of vector elements to design their own landscapes: bird, tree, plane, lake, hill, flower etc. Open a new document on Illustrator and create with them a really cool cartoon landscape. This pack includes more than 20 vector elements and two complete landscapes (file in .ai and .eps format). So, what are you waiting for to join the VIP collection and download this outstanding pack!

And below two examples of landscape, designed with this vector pack:

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

This new vector pack will be useful for all webdesigners who want to improve their designs and especially their ads. The pack includes of 6 seals in various colours: blue, red, pink, grey, green & yellow. The shapes are provided in vector format, then it’s very easy to custom them (edit size, colour, look…).

So what are you waiting for to join the VIP collection and download this outstanding pack!

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

This pack is really the solution for the Webdesigners looking for an easy solution to include elements on their project regarding links to Social Networks. It includes 10 buttons in a reduce size to create advices and notices as well as votes for Social Networks (Facebook, Twitter, Dribbble, etc…).

So if you want to download this set, please suscribe to a VIP account. Sure you will not be disappointed!

Styles are also available in this pack to give you the possibility to change the aspect of the buttons.

But the description of the content of this pack is not finished. Do not miss the opportunity to use the Icon Factory. With this incredible tool, you will be able to create your own Icons, using all types of shapes or colours! You only need to click on the Photoshop Actions button to generate your wonderful Icons.

Are you ready to become active and competitive Webdesigner? If yes, do not wait any more, download this incredible set of Icons. Subscribe right now to a VIP account and you will get the rights to download the whole content of our Grafpedia VIP area for 1 year (including this pack + all updates starting from the day of your subscription).

How to use the Icons Factory?

Begin by the download of the .atn file into Photoshop.
When done, create your Icon shape in a new document. You must name this layer “Shape”, then put over the Icon of your choice (Twitter, Facebook) and pixel the layer and name it Icon.
Select the layer Shape and launch the script: Pixel Perfect Factory.
That’s all! You Icon is finished and ready!

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

There were several week I published on grafpedia.com the spary vector pack.

This pack is very popular and lot of our VIP members download it! It’s why I decide to publish another spray pack! This great grunge vector pack includes over 20 grunge brush style vectors that are perfect for any design project requiring decayed style design elements. They work great as background images behind text and other graphics and can be recolored and re-sized easily to give your project a great grunge feel.

Are you interested by this pack? Subscribe now to a VIP account and download the Spray vector pack 1 and pack2.

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

Download from this pack, 20 blue and glossy icons for your future webdesign. These icons look really actual and perfect to create a phone or a high tech website layout! And you must know this icon set is special because I provide in the package a script to custom and build your own icon: edit the colour just with two clicks, add your shape and custom it with the Photoshop action; and to finish, switch easy the look with the ring! This pack has been specially created for webdesigners, then don’t waste your time any more, subscribe now to a VIP account to download now this pack (and really more!).

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

The Lovers day is quickly arriving, because of Saint Valentine’s day ! Then, do not forget to enjoy your lovely friend. Grafpedia decided to make you happy with a wonderful icons pack special Saint Valentine’s day and a Photoshop tutorial teaching you to create a template regarding this subject. With this Photoshop tutorial, you will learn to create a template for a dating website. This template is dedicated to single people, it wears the colours of love and Saint Valentine: pink, red.

Each part of this website is efficient and can be used for all types of scripts dedicated to a dating website (newsletter, search engine, etc…..).

Want to download this PSD layout ? Register for a VIP account

Pictures: I bought on Fotolia.com a licence for the picture displayed in the carousel. It means that you do not get any right to use it (it explains why the download psd file does not include this picture). You can download it or another picture too, by your side, from Fotolia.com.

Before to start this tutorial, please see below the final result. You can also free download the icons pack on this page.

We can now start the creation of the template.

STEP 1 Create a document

Open your Photoshop software, then go to menu File>New and enter a name, width and height for your document. To validate, press the OK key.

Your document appears on screen. If you do not see the layers windows, display it going to menu Window>Layers.

Put a horizontal mark to 10px, and at 20px from the top of your picture. Use the Rectangular Marquee Tool (M) to create a band with a size of 1000×10px. Create a new group and name it the Top (to create it go to menu Layer>New>Group). Then create a new layer into this group and name it bg (to create a new layer go to menu Layer>New>Layer). Fill up now your selection with the Paint Bucket Tool (G) and the colour #a40000.

Create now on the right a higher band, 20px. On the right side of this band, colour this part this the colour #850000.

To finish, use the Text Tool (T) to add your first slogan. Add a shadow on the text (go to menu Layer>Layer style>Shadow).

STEP 2 Create the logo

To create the logo, create first a new group and name it the logo. Use the Text Tool (T) to add the name of the website (font used: Androgyne*) and under the slogan (font used: Helvetica).

*To download from: http://www.dafont.com/androgyne-tb.font

Then slide and drop the icon with shape of heart, available from the special Saint Valentine’s day pack. Remember you can free download these icons from this page.

STEP 3 First menu

On the right of the logo, you must find a small horizontal menu including very important links. This menu is really easy to create. Create first a new group that you name the menu. Use then the Text Tool (T) to simulate the links. Regarding the hover effect, use the Rounded Rectangle Tool (U) with a radius of 4 to create a rectangle under the last link (fill up this rectangle with this colour #eee4e4).

STEP 4 Second menu

There must be a second menu just under, bigger, then easy to discover. Create a new group and name it the menu. Use the Marquee tool (M) to create an active selection with size of 1 000w 40. Create anew layer and fill your selection using this colour #eee4e4.

Use again the Rectangular Marquee Tool (M) to create a rectangle over the band, and a border of 2px width under the band (see picture below). Fill up these elements using colour #a40000. To finish, use the Text Tool (T) to add the first link.

Use one more time the Text Tool (T) to add the other links.

STEP 5 Create the button

Now, we have to work on the button to register, which will be on the right of this button. Follow the process to create this button.

1 Create a rounded rectangle with a radius of almost 40px (use the rectangular rounded tool (U) and the colour #a40000).

2 Apply two layer styles on this rectangle: an internal glow and a gradient overlay (go to menu Layer>Layer style>internal glow).

3 Duplicate your rounded rectangle (right click on the layer and select duplicate the layer) Then change to white the colour of filling up. Reduce now the size using the free transformation (Ctrl/Cmd + T to create a red border around the rectangle).

4 Go to menu Layer> Layer Mask>Reveal all, use the Foreground Gradient => Transparent on the layer mask to create a reflection.

5 Add the text using the Text Tool (T). Add a shadow on the text.

6 To finish, import the icon with a cherry shape available from the pack of icons.

See here the final result:

STEP 6 Create the carousel

Create a new group and name it the carousel. Import your picture (the picture must take all the width of your document). Use the Marquee tool (M) to cut your picture on its height to respect a size of 670px.

Use the rounded rectangle toll (U) with the colour #a40000 to create a rectangle with a size defined as 900×230px. To create a rectangle with the correct size, remind you can use help of the guides or you can create a rectangle and use the free transformation to enter the correct values of the size.

Create a shape of heart over your rectangle and use this time the colour #820000. To create this shape, use the custom form tool (U), check now the picture below.

Hit uppercase key while drawing the shape.

Add a layer mask on the layer (menu layer>Layer mask>reveal all) then colour in black the external part of the red rectangle.

Use now the Text Tool (T) to add a new slogan as well as a description of the website.

STEP 7 Search engine

To create the search engine, create first a new group that you name the form. Use the Text Tool (T) to enter the several labels and other contents. Regarding the inputs, easy use the Rectangular Marquee Tool (M). Add an outline to these rectangles (menu Layer>Layer styles>Outline).

On the right of each white rectangle, create a square using same tool. Add two layer styles on this square: an outline and a gradient overlay.

Put an arrow over the rectangle (you can find this con on this page: http://www.iconfinder.com/icondetails/43221/128/arrow_black_go_monotone_right_solid_icon
Add now two layer styles to this icon: a colour overlay and a shadow.

See now the result:

Duplicate your document to create to columns for your form.

To finish the form, use the same method to create the second button (refer to step 5).
For the icon, go to this page to find all what you need: http://www.iconfinder.com/search/?q=zoom.

STEP 8 Create the page numbering

To close the part regarding the carousel, you need to add a page numbering on the left side of the picture previously added. Create a new group and name it the page numbering. Create now three rounds defined with a size of 12×12px (two of them in red #850000 and one in black #fff).

Check below the result:

STEP 9 Create the contents

The content of the website includes two different parts:

- One part to display the online members, the last subscribers or the most popular of them.

- One part to display a description of the website, the services or the last news.

Create first a new group that you name the women. Create then a new rectangle defined with a size of 440×250px, using colour #eee4e4 as filling up.

Use the Text Tool (T) to add the title of the block.

Use same style as the one used for the form (on the right of the inputs) to create a counter of connected people.

Go to Google to look for pictures of nice girls, adding under each picture, age and name of the girl.

Duplicate the women group and name it the men. Put this group on the right side of your picture.

See the result with the two blocks.

STEP 10 Second part of contents

Regarding this part, nothing is complicate. Create a new group that you name the description. Create a new layer and a red border of 2px height and import the icons. Use now the Text Tool (T) to add texts. To finish, add two buttons with same styles as them previously used

STEP 11 The footer

Regarding the footer, create first a new group, then use the Rectangular Marquee Tool (M) to fill up the bottom part of your picture (use the red colour #a40000). Use same tool to create a rectangle with a size of 1 000 x 40 that you place just under your picture (fill up this rectangle again with this red colour #820000).

Create a new group named the box1. Create a title using the Text Tool (T) with the font Androgyne (colour white, size 20px).

Use one more time the Text Tool (T) to simulate a list of links.

Create a new layer and use the brushes with an arrow shape (you download them from this link:: http://www.grafpedia.com/vip-downloads/325-bullet-icons-pixel-arrows

Duplicate twice the box1 group. Use the Move Tool (V) to put the copies at their correct place.

Regarding the last block, you are going to create a register form for the newsletter. To do it, add a title and a description as done for the other blocks.

Create the rectangle using the Rectangle Tool (U) and add three layer styles: internal shadow, colour overlay, outline. See the setting below:

Create now a new button (refer to step 5 for the technical method)

STEP 12 Add the Copyright and the links for social networks

Last step is regarding the Copyright of the website, as well as some links for social networks like Twitter and Facebook. Create a new group and name it the Copyright. Use the Text Tool (T) to add the Copyright on the left side of your picture.

Add three icons on the right, fill up these icons with the colour #d72626. Notice that I found these icons on this website: http://www.iconfinder.com/search/?q=iconset%3Asocial

This tutorial is now finished. Wasn’t it easy?

Do you need more? Notice that you can read these other tutorials about Photoshop, from Grafifpedia.com:

• How to Create a Unique Wordpress Theme
• Create a clean PSD layout with a 3D look
• Design a creative unusual layout
• Design a realistic website layout in photoshop
• Create an awesome portfolio layout

If you like this article, you could help Grafpedia publishing it on your Facebook, Twitter or StumbleUpon account(s) or on your website. Thank a lot in advance for all of you working in this way!

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

Today I’m really proud to introduce this new icons set special Saint Valentine’s Day. Why I’m proud? Firstly because these icons are defined in high quality and they are really beautiful, secondly because this set is distributed by our famous partnership hongkiat.com (it’s really a popular website providing to you tips for webdesigners and bloggers).

This set includes nine really nice icons: candles, heart, chocolates, love letters, rings, cheries… and each of them is available in various formats: 48, 72, 128, 256, and 512. To finish, I’m sure you will be happy because this icons set is available on both websites, hongkiat.com and grafpedia.com for free!

Download: Free Saint Valentine’s Day Icons Set V1-2012

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

Download today this pack of colorful stickers. Perfect to zoom a file or a product on your website. These stickers are available in .psd format (Photoshop file). The layers are organized in groups and names. Ready to use, swith the colour of the stickers taking only two seconds (just change the colour of the vector shape and your sticker is customized). Don’t waste your time, download this incredible .psd file now. Subscribe now to a VIP account and download this .psd file as well as our collection of 70.000 graphic items!

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.

A sweet misc vectors pack that contains all kinds of design element gems. Some of the vectors included in this miscellaneous vector art pack include an old bicycle vector, car vector, spider vector, ornate vectors, splatter vectors and more! The misc vectors are easy to edit, resize and come in both .ai and .eps file formats.
Do you want to download this new vectors pack? And enjoy our awesome collection of more than 70,000 items to spice up your designs? Register now and pleasure our website on unlimited access and upldates for one year!

Grafpedia - Premium tutorials for beginners to advanced users of Adobe Photoshop.