This Tutorial about Photoshop will be useful to help you to create an incredible ecological and design Template. Follow it step by step to discover unique technics you can use in Photoshop: creations of shadows, buttons, carousels and more.
The must of this tutorial is regarding the fact I add the whole .psd sources files (organized layers) as well as layers styles with the split and encoded Template in HTML/CSS (ready to use directly on your web site, in case done want to take time to try to understand the method to create it).
Find here the Template review :
I do not let you wait longer for this Tutorial :
STEP1 Create the file
Open your Photoshop software, enter the name, width and height.
STEP 2 Header
Create a new layer (menu Layer>New>Layer) then select the Gradient Tool (B). Set fourground color to grey #e2e2e2 and create a grient from the bottm to the top. (starting at 140 pixels from the top border).
STEP3 Bottom page
Go now the menu Selection>Switch, then select the background layer and fill in the active selection using color #313131 and the Paint Bucket Tool (G)
STEP4 Import the logo
Open file logo_green.psd (available in the zip file, the download button is located on the bottom of the page) and move the folder Logo to your document. Use the Move Tool (V) to place the logo on the right top in the header.
STEP 5 Search engine
Change the foreground color to the black #000 and select the Rectangle Tool (U). Create now two rectangles: first one for input, second one the validate button. Create a group (menu Layer>New>Group) and name it Form, then put these two form layers inside.
STEP6 The button
Add several style of layers on the layer regarding the button. Go to menu Layer>Layer style>internal shadow. Follow now the setting as shown here.
Select now the Text Tool (T) and add the title of your button. Add now a shadow on your layer (Layer>Layer Style>Shadow). Follow the setting shown here.
STEP 7 Input
Apply same method and add the search engine to the Input to give it a style.
STEP 8 Slogan
Select the Rectangle Tool (U) and create a rectangle (900 * 210 pixels). Import the picture into your document, to do it, open the picture and press Ctrl/Cmd + A to select all, Ctrl/Cmd + C to copy and now in your picture press Ctrl/Cmd + V. You can find the picture we are talking about, in the .zip file, on the bottom of this page.
STEP 9 Create the menu
Right click with the mouse on the thumbnail of the Layer Picture, then create a new layer. Use the now the Paint Bucket Tool (G) to fill in this selection with the black color. Move the selection till 50 pixels to the top and press on DEL key.
STEP10 Text Slogan
Select the Text Tool (T) and add your slogan over the picture. In my example I have used the Helvetica LT Condensed font. Add a shadow to the text (menu Layer>Layer Style>Shadow).
To complete the slogan, add the button.
Now the all process to create the button. I recommend you to aggregate all your layers used to create the button, in an unique group, group you can simply name button;)
STEP 11 The menu next
Return to the layer menu and add a gradient overlay. To do this, select the layer menu and go to menu Layer>Layer Style>Gradient Overlay and follow the setting as shown on the picture here.
STEP 12 Create a sharing
Create a new layer and an active selection around the menu. Set foreground color to #a4a4a4. Use the Paint Bucket Tool (G) to fill this selection. Move it 1 pixel to the top and press the DEL key. This action creates a grey sharing band of 1pixel width on the bottom of the menu. Use same method to create a white sharing band of 1 pixel width.
Add over the menu, the texts which present the different links. Add a shadow on this to this layer. Use the following setting.
To finish the menu, add on the right, the RSS feed counter. To do this, start saving the icon located on this link page: http://www.iconfinder.com/iconde...ss_icon. Import this icon into your document and place it on the right of the menu.
Use the Text Tool(T) to insert a counter. To finish, add a layer style on the icon and on the text (to do it, select the layer and go to menu Lay>Layer Style>Shadow). Use the setting shown on the picture here.
See here the final work:
ETAPE 13 Multi box
Use again the Rectangle Tool (U) to create a new area defined as 900 * 180 pixels on your Template, use color #e5e5e5.
STEP14 Add a border
You have now to create on the bottom of the area, a border of 10 pixels height. To create this border, use the Rectangle Tool (U) to create a new rectangle defined as 900 * 10 pixels. Place this rectangle on the bottom of the area previously created. Use the Layer Styles to add a gradient.
STEP 15 Some texts
Use the Text tool (T) to add a title, a subtitle and a paragraph.
Complete the text with a green button. Follow the process described of the picture below to create the button.
Create now new group and place inside the text layers and the button. Duplicate this group two times to create in final three different texts blocks.
STEP16 The contents of the website
Select once again the Rectangle Tool (U) and set the foreground color to the #f1f1f1 color. Create now a rectangle defined as 900 * 450 pixels.
Use one more time the Text Tool (T) to create the contents (title, subtitle, paragraph). Import the picture of the business man from the .zip file.
Continue to create another text, another subtitle and a list. To create the list style, simply use the Defined Form tool (U) and the Ellipse Tool (U)
STEP 17 Create a border
To create the grey border located on the bottom of the contents area, start to create a new layer (name it stroke). Retrieve the rectangle selection created during the previous step and fill in it with the Paint Bucket Tool (B) and color #848484. Move the selection 10 pixels to the top and press on DEL key.
See here the Template you would have to get at this step of this tutorial:
STEP 18 The sidebar
It is time now to create the right side of the website, the sidebar. Create a new group and name it the right. Use again the Text Tool (T) and create texts (title, subtitle and paragraph).
Create a small calendar you place on the left of this text. Follow the picture show here, to create the calendar (place all the layers into a common group you name Calendar).
Duplicate the text and the calendar to create second news.
ETAPE 19 Create the carousel
Under the news, you can create the carousel which will be used to put
logos of companies. This carousel simply defined with a rounded
rectangle, a title, two logos and two arrows (useful to scroll the logos
on the left and on the right).
Select the Rounded Rectangle Tool (U) and create a new rectangle (200 * 130 pixels), set the radius to 20 pixels.
Then add on the rounded rectangle layer, several layer styles.
Use the Text Tool (T) to create a title (add a 1 pixel shadow on the text). Create now two new white rounded rectangles to put the logos (use the Rounded Rectangle Tool with a radius of 10 pixels).
Add the logos over the white rectangles.
To finish add the arrow on the right and on the left. Follow the process described in this picture to create the arrows.
STEP 20 Last share
Create a new layer then create an active selection around the rectangle of the contents layer. Move this selection 1 pixel to the bottom. Set the foreground color by the #c9c9c9 color and fill in it (use the Paint Bucket Tool (B)). Move the selection 1 pixel to the button and press the DEL key.
See now the result:
STEP21 Create the footer
It's now last step of this tutorial. Create a new group and name it Footer. Download the Twitter RSS icons available on this page: www.iconfinder.com/icondet...s_icon Import them now into your document. On the Twitter layer, add two layer styles: an internal shadow and a gradient overlay.
On the right of the icon, add the text (add a 1 pixel shadow to the text) Apply same method to the RSS icon.
Use the Text Tool (T) to create the Copyright on the right of the footer. Use dark-grey and light-grey color.
See the final work below. The template is now completely finished. Thank a lot to you to read this new Photoshop tutorial, hopping I teach you new things. If you wish to download the .psd source file, click on the download button below (you need to connect as member before). Still no member account! you can subscribe right now, by a click on this link:
