Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.

• portfolio-web-layout.psd (5.1 Mb)

Tutorial Resources

• Patterns
• Icons by Glyphish
• Fonts: Univers Ultra Condensed, Univers Light Condensed, Helvetica
• 960 Grid System

Preview

Below is the web layout that we are going to create in this tutorial. Click on the image to see the full-size version.

Introduction

For this tutorial we will use the 960 Grid System. Download it and unzip the archive file. Then open the “960_grid_12_col.psd” file in Photoshop (you will find it inside the “photoshop” folder which is located inside the “templates” folder).

After you open the .psd file in Photoshop you will see 12 red bars. That is the grid system that we will be using. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” layer.

During this tutorial I will ask you to create shapes with certain dimensions. Open the Info panel (Window > Info) and when you create a shape you will see in this panel its exact width and height. The .psd file contains some guides as well which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;. I usually hide the red bars and activate the guides whenever I need them.

Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. Let’s get started!

Step 1: Setting up the document

Open the “960_grid_12_col.psd” file in Photoshop. Go to Edit > Canvas Size and change the width to 1200px and the height to 1400px.

Fill the background with the color #333333. Right-click on the Background layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the image below.

Step 2: Creating the header background

Create a new group and name it “header”. Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 140px and the color #30a0b8. Name this layer “header bg”, right-click on it and select Convert to Smart Object. Add some noise to this layer using the settings from the image below.

Step 3

Select the Rectangle Tool (U) and create a rectangle with the height 4px and the color #33b9d6. Name this layer “top bar” and move it at the top of the bigger rectangle.

Step 4: Creating a triangle pattern

Now we will create a pattern to use it in the header. Create a new document with the dimensions 20px by 8px. Zoom in, select the Pen Tool (P) and create a black triangle like the one you see in the following image. Make the “Background” layer invisible (click on its eye icon in the layers panel). Then go to Edit > Define Pattern, give your pattern a name and click OK. Now you can close this document.

Step 5: Applying the pattern

Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 10px. Set the Fill of this layer to 0% (the Fill option is right underneath the Opacity in the Layers panel). Name this layer “top pattern”, double-click on it to open the Layer Style window and use the settings from the following image for Pattern Overlay.

Step 6: Changing the color of the pattern layer

Now we need to change the color of the triangles and apply some other layer styles. Right-click on the “top pattern” layer and select Convert to Smart Object. Double-click on this layer to open the Layer Style window and use the settings form the image below. For Color Overlay I used the color #33b9d6.

Step 7: Duplicating the pattern layer

Drag the “top pattern” layer over the “Create a new layer” button from the bottom of the Layers panel to duplicate it. Name the new layer “bottom pattern” and move it at the bottom of the header. Double-click on this layer and change the color of the Color Overlay to #30a0b8.

Step 8: Creating a texture for the header

Use the Rectangular Marquee Tool (M) to create a rectangular selection over the header area. Create a new layer and fill this selection with #aaaaaa. Hit Ctrl/Cmd + D to deselect. Name this layer “texture”, right-click on it and select Convert to Smart Object.

We want the texture to affect only the header area, and not the background or other elements. To achieve this, hold down the Ctrl/Cmd button and click on the thumbnail of the “header bg” layer and the “bottom pattern” layer (this way the entire header will be selected). Now make sure that the “texture” layer is active and go to Layer > Layer Mask > Reveal Selection.

With the “texture” layer selected, go to Filter > Noise > Add Noise and use the settings from the image below. Then go to Filter > Sketch > Water Paper and use the settings from the following image. Set the blend mode of this layer to Soft Light.

Step 9: Adding the name of the layout

Select the Type Tool (T) and add the name of your layout in the left-hand side of the header. Activate the guides to help you position this layer. For my text layer I used the color #e3eef2 and the font Univers Ultra Condensed. Double-click on your text layer and use the settings from the following image for Drop Shadow.

Step 10: Creating the navigation bar

Create a new group and name it “navigation”. Select the Type Tool (T) and write the name for your navigation menu items. I used the color #ffffff, the font Univers Light Condensed and the size 18pt. Make sure you activate the guides so you can arrange the navigation items better. Add a shadow to these text layers using the settings from the following image.

Download this set of icons and look for icons that are suitable for your navigation menu items. Open those icons in Photoshop and place them above the navigation menu items as you see in the following image.

Step 11: Creating the style for the active navigation item

Select the Rounded Rectangle Tool (U), set the Radius to 2px and create a rounded rectangle beneath one of your navigation items using the color #3895a8. Name this layer “active”, double-click on it and use the settings from the following image.

Step 12: Create a diagonal stripes pattern

Create a new document with the size 4px by 4px. Zoom in, select the Rectangular Marquee Tool (M), hold down the Shift key and create four square selections as you see in the following image. Create a new layer and fill the selection with black. Hit Ctrl/Cmd + D to deselect. Then hide the “Background” layer, go to Edit > Define Pattern, give your pattern a name and click OK. Now you can close this document.

Step 13: Creating the image slider

Create a new group and name it “slider”. Select the Rectangle Tool (U) and create a rectangle with the dimensions 1000px by 350px and the color #9eafb2. Name this layer “slider border”, double-click on it to open the Layer Style window and use the settings from the following image. Put this rectangle in the center of your document.

Step 14

Create another rectangle with the dimensions 980px by 330px and the color #ffffff. Name this layer “image_holder” and put it in the center of the bigger rectangle. This is the area where the slider images will be displayed.

To show an image in this area, open it in Photoshop, move it into your web layout document, above the “image_holder” layer. Name this layer “image”, right-click on it and select Create Clipping Mask. Now your image will be visible only over the area of the “image_holder” layer.

Step 15: Creating the image slider arrows

Create a new group and name it “right arrow”. Select the Ellipse Tool (U) and create a circle with the dimensions 45px by 45px and the color #33b9d6. Name this layer “circle”. Copy this symbol “»”, select the Type Tool (T) in Photoshop and paste it in the middle of your circle. For this arrow symbol I used the font Univers Condensed with the color #f4f4f4.

Duplicate the “right arrow” group by dragging it over the “Create a new layer” button from the bottom of the Layers panel. Then go to Edit > Transform > Flip Horizontal. Name this group “left arrow” and move it to the left hand side of the slider.

Step 16: Creating the headline for the featured area

Now we will create a ribbon for the headline of the featured area. We will use the same ribbon later for other areas of the web layout.

Create a new group and name it “headline”. Select the Pen Tool (P) and create a shape like you see in the following image in the upper left corner of the image slider using the color #ac1eda. Name this layer “bg”, double-click on it to open the Layer Style window and use the settings from the following image.

Step 17: Adding shadows to the ribbon

Create a new layer above the “bg” layer and name it “shadows”. Right-click on this layer and select Create Clipping Mask. Now everything you draw on this layer will be visible only over the area of the “bg” layer.

Select the Brush Tool (B) and use a black soft brush with the opacity 60% to add some shadows on your ribbon. Change the color of your brush to white and add some highlights to the ribbon. Take a look at the following image for reference. Set the blend mode of this layer to Soft Light 70%.

Step 18

Select the Type Tool (T) and write the word “Featured” on your ribbon. I used the color #ffffff and the font Univers Ultra Condensed. Add a shadow to this text layer using the settings from the image below.

Step 19

Select the Line Tool (U), set the Weight to 1px and create a black horizontal line with the width 10 px. Put this line in the upper left corner of the ribbon.

Duplicate this line and move the new one to the right. Repeat this process until you reach to the upper right corner. Put all these layers inside a group and name it “top”. Put this group inside another one and name it “dashed lines”.

Duplicate the “top” group and move the new dashed lines at the bottom of the ribbon. Name this group “bottom”. Then set the blend mode of the “dashed lines” group to Soft Light 50%.

Step 20:

Select the Rectangular Marquee Tool (M) and create a selection like you see in the following image. Create a new layer and use a black soft brush to add a shadow in the left hand side of the ribbon. Hit Ctrl/Cmd + D to deselect. Name this layer “shadow” and set its opacity to 50%.

Step 21:Creating the background for the content

Create a new group and name it “content bg”. Select the Rectangle Tool (U) and create a rectangle with the dimensions 1000px by 1670px. The height depends on how you will align all the elements of the web layout later. If you need a different height for your content background after you add the content, you can go back and modify it.

Right-click on this layer and select Covert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the following image.

Step 22: Creating white triangle patterns

Create a new document with the dimensions 20px by 10px. Zoom in, select the Pen Tool (P) and create a white triangle shape as you see in the following image. Then hide the background layer, go to Edit > Define Pattern, give your pattern a name and click OK.

With the triangle shape layer selected go to Edit > Transform > Flip Vertical. Use the Move Tool (V) to move this layer at the bottom of the document. Then go again to Edit > Define Pattern to create a new pattern.

Close this document as we don’t need it anymore.

Step 23: Applying the triangle patterns

Select the Rectangle Tool (U) and create a rectangle with the dimensions 1000px by 10px at the top of the content background. Name this layer “top triangles” and set its Fill to 0%. Double-click on it to open the layer style window and apply the pattern you created.

Duplicate this layer and move the new one at the bottom of the content background. Name this layer “bottom triangles” and change the triangle pattern.

Step 24: Creating the “Services” area

Create a new group and name it “services”. Duplicate the “headline” group from the image slider and move it in the upper left corner of the content background. Change the color of the ribbon (the “bg” layer) to #da1e4a. Select the Type Tool (T) and edit the text to read “Services”.

Step 25: Adding a description of the services

Create a new group and name it “web design” (or any other name of design service). Activate the guides (Ctrl/Cmd + ;). Select the Rectangle Tool (U) and create a rectangle with the dimensions 220px by 320px and the color #f4f4f4. Name this layer “border”, double-click on it and use the settings from the following image. For Stroke I used the color #d4d4d4.

Step 26

Create a new rectangle with the dimensions 200px by 300px and the color #ffffff. Name this layer “image_holder” and put it in the middle of the “border” layer. Add a 1px Stroke to this rectangle using the color #d4d4d4.

Step 27

Select the Type Tool (T) and add some content for this design service. Take a look at the following image for reference.

Step 28: Creating a “Read More” button

Create a new group and name it “button”. Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 140px by 30px and the color #ac1eda. Name this layer “button”, double-click on it to open the Layer Style window and use the settings from the following image.

Select the Type Tool (T) and write the words “Read More »” on your button. I used the color #ffffff with the font Univers Light Condensed and the size 16pt. Add a shadow to this layer using the settings from the following image.

Step 29

Duplicate the “web design” group three times for the other three design services. Activate the guides and arrange the groups as you see in the image below. Select the Type Tool (T) and change the name of the design services.

Step 30: Creating the “Portfolio” area

The following sections of the web layout will be easier to create as we will just copy elements that we created previously and edit them to suit the new sections.

Create a new group and name it “portfolio”. Duplicate one of the “headline” groups from the “featured” area or the “services” area and move it inside this new group. Change the color of the “bg” layer to #aec81e and use the Type Tool (T) to edit the ribbon text so it reads “Portfolio”. Leave a distance of 60px between the bottom edge of the “services” area and the ribbon of the “portfolio” area.

Now we will create some image holders for the portfolio items. Create a new group and name it “#1″. Activate the guides (Ctrl/Cmd + ;). Select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 140px by 140px and the color #f4f4f4. Name this layer “border”. Then copy the layer style from one of the “border” layers from the “services” area (right-click on it and select Copy Layer Style) and paste it to this layer.

Create another square with the dimensions 120px by 120px and the color #ffffff. Name this layer “image_holder” and put in the in middle of the “border” layer. Add a 1px stroke to this rectangle using the color #d4d4d4.

Duplicate the “#1″ group 7 times and arrange them as you see in the following image.

Duplicate one of the “button” groups from the “services” area, change its color to #aec81e and move it at the lower right corner of the “portfolio” area. Edit the text so it reads “View Portfolio »”.

Step 31: Creating the “About” area

Create the “About” area using the same process of duplicating elements from previously created sections, changing their colors and arranging them. The color of the ribbon and button is #40b1e6. Selected the “ribbon” group, go to Edit > Transform > Flip Horizontal and move the ribbon to the right edge of the layout (note: you will have to temporarily move the text layer from the “ribbon” group while you do the transformation; you don’t want the text to be flipped horizontally; after you flip the ribbon, move the text back into the group and edit it so it reads “About”).

I also added a paragraph of text using the font Helvetica Regular with the size 12pt and the color #515151.

Step 32: Creating the “Blog” area

Add a “ribbon” group inside the “blog” group. Change its color to #da7b1e and edit the text to read “Blog”. Put this ribbon at a distance of 60px from the bottom edge of the “portfolio” area.

Create a new group and name it “post #1″. Then create an image holder for this blog post. For the “border” layer use the size 220px by 220px and for the “image_holder” layer use the size 200px by 200px. Add some text next to this image holder and a “Read More” button. Take a look at the following image for the reference.

Duplicate the “post #1″ group, and move the new post underneath the first one. Name this group “post #2″.

Step 33: Creating the sidebar of the blog

Create a new group and name it “categories”. Select the Type Tool (T) and write the word “Categories”. I used the font Univers Ultra Condensed with the color #515151 and the size 36pt.

Select the Line Tool (U) and create a horizontal line with the weight 1px and the color #b9b9b9, as you see in the following image.

Select the Rectangle Tool (U) and create a rectangle with the dimensions 300px by 5px and put it underneath the “1px line”. Name this layer “diagonal lines” and set its Fill to 0%. Then double-click on it and use the settings from the following image for Pattern Overlay.

Select the Type Tool (T) and add a list of categories. I used the font Helvetica Regular with the size 12pt and the color #515151.

To create the bullet points, select the Ellipse Tool (U), hold down the Shift key and create a circle with the dimensions 5px by 5p and the color #515151. Duplicate this layer as many times as you need and arrange them using the Move Tool (V). Group all these layers and name the group “bullet points”.

Create one more list for popular post, just like you created the categories list.

Step 34: Adding separators between content sections

Create a new group and name it “separators”. Then select the Line Tool (U) and create a horizontal line with the width 940px and the color #dbdbdb. Name this layer “1px line” and put it between the “services” area and the “portfolio” area.

Duplicate the “1px line” layer and put the new line between the “portfolio” area and the “blog” area.

Step 35: Adding the footer

Create a new group and name it “footer”. Select the Type Tool (T) and add a copyright statement at the bottom of your layout. I used the font Helvetica Regular with the size 12pt and the color #ebebeb.

Final Result

Below you can see the final result of this tutorial. Click on the image to see the full-size version. Thanks for reading and I hope you enjoyed this tutorial.

We offer best quality testking 70-450 test papers and Testking HP0-S25 materials. You can get our 100% guaranteed 1Y0-A05 questions & mcts dumps to help you in passing the real exam of testking 1z0-536.

Our tremendous offers for MB6-282 study guide and MB7-232 prepare you well for the final MB4-348. Our 70-516 prepares you for great success in your exam.

You will see how to implement a photo into full design layout, how to play with typography to achieve clean and elegant look. Hope you will find this tutorial useful and you will learn something new. Please share your opinion about this tutorial in comments section below.

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.
photography-fan.zip (2,7 MB)

Tutorial Resources

Fonts: Neuton and Georgia

Icons: Vector Social Media Icons

Main photo: girl pushes the car taken on credit

Cat photo: red cat in a car 3

Girl photo: girl poses on a coastal line

Preview

Click on the image below to see the work in full scale.

Step 1: Create a new document

Open Adobe Photoshop and start by creating a new document CTRL+N. Then make the document 1200 px by 1000 px with a white background.

Step 2: Guidelines

We need to add some guidelines. Go to View > New Guide… and add following guidelines: vertical at 120 px and 1080 px, horizontal at 530 px.

Step 3: Background

At first create a new group (Layer > New > Group…) called “Background”. After that click twice on background layer and unlock it, then move it inside the group and set foreground color to grey (#F6F6F6) and fill your background with it by clicking Alt+Backspace.

Now go to Filter > Noise > Add Noise… and set Amount to 1%, Distribution to Uniform. An example shown on the picture below.

Now go to sxc.hu and download free photo of a girl pushing the car. After that drag it to your Photoshop window and then using Move Tool (V) drag it into your design document. Click Ctrl+T and resize photo to fit in your design.

Pick Rectangular Marquee Tool (M) and select area under the horizontal guideline and delete it.

Go to Layer > New Adjustment Layer > Gradient Map… name it “Gradient Map” and select gradient from purple (#290A59) to orange (#FF7C00).

Set blending mode to Soft Light. After that click right mouse button on Gradient Map layer and select Create Clipping Mask.

Step 4: Header

Now minimize “Background” group by clicking a small grey arrow next to the group name. After that create a new group (Layer > New > Group…) and name it “Header”. Change foreground color to black (#000000) and then pick Rectangle Tool (U) and draw 1200×100 px size rectangle. An example shown on the picture below.

Move your rectangle shape 20 px from the top by holding Shift and clicking down button twice. Then change rectangle layer’s Opacity to 30%.

Now change foreground color to white (#FFFFFF) and choose Horizontal Type Tool (T), select Neuton font, set font size to 24 pt and write your website title.

Click right mouse button on title layer and select Blending Options… and apply following option.

Now pick Horizontal Type Tool (T) again, select Neuton font and set size to 14 pt and make your top navigation. After that apply Drop Shadow option as used for the website title layer.

Step 5: Body

Now minimize “Header” group by clicking a small grey arrow next to the group name. After that create a new group (Layer > New > Group…) and name it “Body”. Using Horizontal Type Tool (T), 24 pt size Neuton font write 2-3 descriptive sentences about your website. Place your description 20 px to the right from the first vertical guideline.

Now click right mouse button on text layer and select Blending Options… after that apply following option.

Change foreground color to white (#FFFFFF) and pick Rectangle Tool (U). Then create a new layer (Shift+Ctrl+N) and place it above descriptive text layer. After that draw a rectangle shape much bigger than text. An example shown on the picture below.

Reduce rectangle layer’s Opacity to 10%.

Draw two more rectangle shapes and place them below the text layer and reduce Opacity to 10%.

Pick Horizontal Type Tool (T), choose Times New Roman font and set font size to 100 pt. Then write only four dots. After that click right mouse button on descriptive text layer and select Copy Layer Style and then go back and click right mouse button on dots layer and select Paste Layer Style. These dots will be our slider changers.

Create a new layer (Shift+Ctrl+N) called “Bright line”. After that change foreground color to bright grey (#FDFDFD) and pick Pencil Tool (B), set brush size to 1 px and holding Shift button draw horizontal line below horizontal guideline.

Set foreground color to grey (#878787) and pick Horizontal Type Tool (T), then choose 24 pt size Neuton font and write something like “Welcome to Photography Fan Portfolio”.

Download Vector Social Media Icons and select following 32 px size icons: twitter.png, flickr.png and facebook.png. Drag them to Photoshop window and click Shift+Ctrl+U to desaturate them. After that using Move Tool (V) drag them into your “Body” group and place as shown on the example below.

Create a new layer (Shift+Ctrl+N) titled “Grey line”. After that change foreground color to bright grey (#DDDDDD) and select Pencil Tool (B), set brush size to 1 px and draw (holding Shift button) horizontal line between the vertical guidelines.

Click Ctrl+J on “Grey line” layer to duplicate it, then place it 4 px lower.

Go to sxc.hu and download cat photo. Then drag it to your Photoshop window and resize by clicking Ctrl+Alt+I. After that pick Crop Tool (C) and crop it to 223×114 px size.

Change foreground color to black (#000000) and grab Rectangle Tool (U). After that draw rectangle shape and place it above “Cat” layer.

Now reduce rectangle shape layer’s Opacity to 50%.

Set your foreground color to white (#FFFFFF) and pick Horizontal Type Tool (T). Then choose Neuton font and set size to 24 pt after that write photos category name for example “Animals” and place it on just created rectangle.

Now create other 3 categories using the same techniques shown before. Girl photo from sxc.hu.

Now change foreground color to dark grey (#878787) and select Horizontal Type Tool (T), choose 24 pt size Neuton font and write “About Photography Fan” or something similar. Move your text 30 px below the images.

Now find “Grey line” layer and click Ctrl+J to duplicate it. After that move it on the same level as your “About” headline text. An example shown on the picture below.

Now pick Rectangular Marquee Tool (M) and select area from first horizontal guideline to the place where the text ends and leave about 20 px gap.

Now delete selected area. After that duplicate short line by clicking Ctrl+J and move it 4 px lower than the first one.

Grab Horizontal Type Tool (T) and choose 15 pt size Georgia (Italic) font. After that write about 3 full width (between the vertical guidelines) lines of description. An example shown on the picture below.

Now find “Grey line” layer again and duplicate it twice by clicking Ctrl+J. After that move duplicated lines under the description text. Finally move one line 4 px lower.

Select Horizontal Type Tool (T), choose 13 pt size Georgia font and write your copyright information and place it below the two lines at the bottom of your design.

Congratulations! You’ve finished your photography portfolio design.

Final Result

We offer up to date practice questions for MB6-827 and MB6-817. We also provide your MB6-202 with highest score using up to date products of 70-557 is not a challenge for everyone.

As I mentioned in my The Third Month of Blogging post this month I want to release my first photoshop tutorial. And this is it. I created it very easily but when I come to explaining phase it took some time to complete. I hope that you like it and you’ll learn something new doing this tutorial.

In this tutorial we’ll use Flavours Icon Set, Nevis typeface and Social Network Icon Pack.

Final Result

Step 1: Background

Let’s start by creating a new document in Photoshop – 1000×885 px, resolution 72 pixels/inch.

Then add guidelines View > New Guide… vertical guidelines at 50px, 950px and horizontal guidelines at 102px, 404px, 497px, 832px.

Now set the foreground color to #5398B8 and fill the document with this color (Alt + Backspace). Go to Filter > Noise > Add Noise and apply filter with parametars shown on the picture below.

Step 2: Header

As the portfolio logo and other icons I’ll use Flavours Icon Set released on Smashing Magazine. Download Nevis typeface it will be used for headlines.

Pick Tablet icon from Flavours Icon Set and place it as shown on the picture below. Then pick Nevis font and write something for example “Portfolio”. Then mark the text and change character options as shown on the picture.

Right click on Portfolio text layer and choose Blending Options. Then apply settings shown on the picture below.

Now place text 40 px above guideline (Shift+4 clicks up) you should have something like shown on the picture.

Create a new group Layer > New > Group… and call it navigation. Then choose 18pt size Myriad Pro (Condensed) font pick #2a2a2a as a color and create your portfolio navigation. For the “Home” choose white color #ffffff. Character options shown on the picture below.

Then duplicate navigation layer (Ctrl+J) and move it below original layer. Then reverse text colors, where was white (#ffffff) change to dark grey (#2a2a2a) and where was dark grey (#2a2a2a) change to white (#ffffff). After that move layer 1 px down and 1 px right. Then change opacity to 40% and will have something like shown on the picture below.

Now create new layer (Shift+Ctrl+N) and move it below text. Then pick Rounded Rectangle Tool set Radius to 5 px foreground color #487f99 and create button. Example shown on the picture.

Right click on created button layer or or (Layer > Layer Style > Blending Options) and choose Blending Options. Then apply shown settings.

Here is example shown on the picture how your navigation should look.

Then set foreground color to #487f99 and pick Pencil Tool. Set Brush to 1 px and create 40 px lenght vertical line. After that set foreground color to #a4bfcc and create same length line 1 px to right from the first one. Example shown on the picture below.

Step 3: Lines

Now create new group Layer > New > Group… and call it Lines. Now do the same actions as creating vertical line but this time create horizontal lines on horizontal guidelines. Example shown on the picture. Tip:  To create straight line with pencil hold Shift key.

Step 4: “My Works” Block

Now create new group Layer > New > Group… and call it My Works. Then pick case icon from Flavours Icon Set and move it 20 px down from first guideline at the top. Then type My Works and apply settings like on Portfolio text in Step 2: Header.

Now set foreground color to black (#000000) and pick Rounded Rectangle Tool set Radius to 5 px and create button like shown on the picture below.

Now reduce Opacity to 20%. Pick blue plus button from Flavours Icon Set click (CTRL+T) and resize W and H at the top toolbar to 60% then move it on button created before. Set foreground color to dark grey (#2a2a2a) and choose Myriad Pro (Condensed) 14 pt size font. Then type “See all works” and move like shown on the picture.

Right click  on “See all works” layer and choose Blending Options… or (Layer > Layer Style > Blending Options…) and apply options shown on the picture below (on the left side shown Character options).

Here is the result with aplied Drop Shadow.

Now set foreground color to #487f99 pick Rounded Rectangle Tool set Radius to 5 px and draw about 190 px height box. Example shown on the picture.

Select button layer from Navigation group and click right mouse button on layer name and choose Copy Layer Style. Then choose previous created box layer in My Works group and click right mouse button to choose Paste Layer Style.

Then copy layer (CTRL+J) and place them like shown on the picture.

After that pick three pictures of your works. Resize them (CTRL+T) and move on the boxes. Example shown on the picture below.

Set foreground color to #2a2a2a and choose Horizontal Type Tool. Pick Myriad Pro (Condensed) font, set size to 16 pt and write brief description of the project. Then apply Drop Shadow options shown on the 2nd picture.

Now copy (CTRL+J) description layer with applied drop shadow and move under other works.

Create new layer and move it under all layers in My Works group. Then pick Rectangular Marquee Tool and select all area between first and second guidelines then fill it (ALT+Backspace) with black (#000000). Example shown on the picture below.

Right click on created layer or (Layer > Layer Style > Blending Options…) and apply Gradient Overlay. Options shown on the picture below.

After that reduce Opacity to 30% and you should get something like shown on the picture.

Pick button fast forward blue and button rewind blue icons from Flavours Icon Set. Resize (CTRL+T) them to 60% and place as shown on the example below.

Step 5: “Twitter” Block

Create new group (Layer > New > Group…) and call it Twitter block. Pick twitter icon from Flavours Icon Set and place it between third and fourth guidelines. Then set foreground color to white (#ffffff), choose Rounded Rectangle Tool set Radius to 5 px and draw about 750 px length and 50 px height box.

Then right click on white box layer and select Blending Options… after that choose Stroke and customize following an example.

Now reduce white box layer Opacity to 20%. Then set foreground color to #245166, choose Horizontal Type Tool and Georgia (Italic) font, set size to 18 pt and write something.

Step 6: “Blog News” Block

Create new group (Layer > New > Group…) and call it Blog news. Then pick screen aurora icon from Flavours Icon Set and place it as shown on the picture. Pick Horizontal Type Tool and write for example “News from blog” and apply Blending Options from Step 2: Header.

Set foreground color to #2a2a2a after that choose Myriad Pro (Regular) font, set size to 18 pt and write blog post headline. Then apply Drop Shadow options from Step 4: My Works like on the “See all works” button.

Then write some text from blog. I used Arial (Regular) 12 pt size font. Leave space for Social media block on the right side.

Create new group in Blog news group (Layer > New > Group…) and call it Read more. Set foregroun color to black (#000000). Pick Rounded Rectangle Tool, set Radius to 10 px and draw button.

Then reduce button Opacity to 20%. Choose check icon from Flavours Icon Set and resize (CTRL+T) it to 60%. Move on button and with Horizontal Type Tool Myriad Pro (Condensed) 14 pt size font write for example “Read more”. Then apply the same Blending Options like on blog headline.

Set foreground color to #487f99. Pick Pencil Tool, set Brush size to 1 px and draw vertical line to separate “Blog news” and “Social media” blocks. Then set foreground color to #a4bfcc and draw same length line but move it 1 px to right.

Step 7: “Social Media” Block

Create new group (Layer > New > Group…) and call it “Social media“. Choose coffee icon from Flavours Icon Set and place about 50 px right from separator. Then pick Horizontal Type Tool, Nevis font 30 pt size and write “Become my friend“, then apply Blending Options and Character options from Step 2: Header same like on “Portfolio” text.

Download Social Network Icon Pack. Then choose 8 icons and place them as shown on the example below.

Set foreground color to #2a2a2a, pick Horizontal Type Tool, choose Myriad Pro (Condensed) 18 pt size font and write social network titles. Then apply Drop Shadow options like on the blog headline text.

Create new layer (Layer > New > Layer…) and move it under all layers in Social media group. Now set foreground color to black (#000000) and choose Rounded Rectangle Tool. Set Radius to 10 px and draw bigger than icon and text button. Reduce Opacity to 20%.

Right mouse click on Read more group in Blog news group and choose Duplicate Group… then move duplicated group to Social media group and place as shown on the example.

Step 8: Footer

Create new group (Layer > New > Group…) and call it “Footer“. Set foreground color to #2a2a2a. Choose Horizontal Type Tool, Myriad Pro (Condensed) 18 pt size font and write something. Then apply Drop Shadow options like on Step 4: “My Works” Block “See all works” text.

Final Result

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.

Download the PSD (5.9 MB)

What do you think?

What do you think about my first photoshop tutorial? Do you understand all steps? I’d like hear your opinion and thoughts. Share your thoughts in comments. Thank you.

1Y0-A17 practice questions and 70-646 pdf cover all the important exam topics that you must go through in order to successfully move on next level. Download free demo of N10-004 online test to practice and learn exam taking strategies so you can easily pass your exam.

Budget Friendly Catalog Printing Services at PsPrint.com

Designer and Blogger, Tim Van Damme, started this portfolio design trend and there is no concrete word to describe this type of site, but it’s very similar to vCard.

In this collection, you’ll find some impressive vCard sites for inspiration, templates, themes for WordPress and tutorials on how to create your vCard portfolio.

Showcase of vCard Websites

Michaël Villar

Matthew Maber

Oskar Krawczyk

Chris Rowe

Stefan Amport

Sebastien Couture

John Phillips

Jonas Lekevičius

Christopher Wallace

Matthias Kretschmann

Maximilian Schoening

Peter Hellberg

Rogie King

Margot Dolewska Dyer

Chris Carey

Kevin Liew

Tim Van Damme

Tim Van Damme was the man who started this web design trend. He has created a “Wall of Fame” to showcase vCard sites inspired by him. There you’ll find a lot of beautiful and inspiring vCards.

Templates & Themes

vCard Professional Portfolio

This is a professional and clean vCard based on Tim Van Damme’s website. With this design you can use almost any background. With this template you will get: 6 Different Backgrounds, 2 jQuery Slides Options, Very Clean Design, jQuery Tooltips, jQuery FancyBox, Flickr Integration. And everything is just for 12$.

PureColour Folio – Creative Portfolio Template

PureColour Folio is proffesional, creative html portfolio template created for promoting any kind of application, desgined with blog, pricing subpages and more! It’s complete webpage with great features: tableless layout, jQuery usage, layered .psd. You can buy it for 10$.

Mydentity – Personal Portfolio Mini Site

Mydentity – a cross browser, attractive personal portfolio mini site. With Mydentity, you can display all your details quickly & stylishly, with great attention to detail this design has an inset style and serves as a beautiful launching pad to your social media profiles, portfolio images and as a means of getting in contact. Only for 7$.

Blackgem vCard

Blackem vCard – an easy to use template for your portfolio or Virtual Business Card needs. With great features: jQuery powered, valid XHTML Strict & CSS 2 .1, clean Design, total 8 PSD files and full PSD file. Only for 8$.

Pixel Portfolio – vCard

An easy to use and customize template for your portfolio or Virtual Business Card needs. Comes with two colors dark or light. Only for 8$.

The Virtual Business Card (vCard)

This is a professional, clean, flexible and customizable Virtual Business Card(vCard), great for everyone to showcase their online bio. It’s pretty savvy, minimal and displays your information in style and yet it remains professional. Buy it only for 8$.

vCard Personal Mini-Site

The perfect one page portfolio site to get you on the web immediately. jQuery powered, Ajax contact form (with form validation) and much more only for 8$.

vCard Portfolio Template

The perfect one page portfolio to get your name on the web immediately. Only for 8$.

Fancy – Professional vCard Theme

A professional vCard that displays your personal information with you portfolio. Fancy is a modern and elegant way to display your presence online. Only for 7$.

vCard Professional Portfolio Template

vCard Professional Portfolio Template is a single page virtual business card template with a jquery hide/show effect. It’s a clean and simple design that comes with two background variations. Just for 8$.

vCard Professional Template

vCard HTML Template is clean style design for vcard or personal website. There are 8 color variations for this theme that you can choose base on you favorite color. Just for 8$.

MiniMe Personal vCard Design

MiniMe is a vCard design with gradients and you can change colors easy. You can download .PSD file for free.

MiniCard Theme for WordPress – a cool free business card/social network theme

MiniCard is a social network/business card free WordPress theme inspired by Tim Van Damme’s excellent website. The theme lets you add links to all the social networking sites you may be a member of, and post useful information such as bio’s and contact details.

The Digital Business Card WordPress Theme

This free WordPress theme is perfect for those that need a good “Digital Business Card” or if you simply need a simple website with a few bits of information and links to social networks.

Visiting Card

Another great free WordPress theme inspired by Tim Van Damme.

Tutorials

jQuery look: Tim Van Damme

The two key effects Tim Van Damme is using are a simplified accordion and a hover effect. It’s worth noting that the hover effect only works in WebKit (Safari & Chrome), but this tutorial will show you how to create the effect using jQuery too.

Design a Dark, Contemporary Minifolio in Photoshop

In this tutorial you’ll learn how to create your own vCard and portfolio mixed design.

Your Opinion

What do you think? Do you agree that vCard Websites are Portfolio Design trend? If you know more templates, themes or tutorials on how to create vCard website please share your suggestions and thoughts in comments.

Preparing for 70-647? Maximize your success chances for 70-649 exam with help of highest quality exam resources by test-king. Using best quality 646-204 materials not only you will pass your exam but it also help you to improve your performance at work.

In this article you will find various styles 30 Photoshop tutorials on creating your own portfolio. These tutorials are useful because you’ll learn new techniques and improve your skills.

Here you will find newest and older tutorials but with your creativity they’ll reborn with new and modern look. All of listed tutorials shows you how to design a portfolio layout in Photoshop. We hope that this roundup will help you on designing your own portfolio.

How to Make a Green & Sleek Web Layout in Photoshop

Create a Sleek, High-End Web Design from Scratch

Awesome Tutorial Portfolio Design

Create a Clean Modern Website Design in Photoshop

Design a Clean and Colorful Portfolio in Photoshop

Design a Portfolio Site with a Textured Background

Design Studio Layout

How to Create a Grunge Web Design Using Photoshop

Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

Making your own portfolio web page

Personal Portfolio Layout #2

Freelancer portfolio design

Designer portfolio layout

Design studio – web page layout

Photographer portfolio layout

Designing Freelancer portfolio layout

Create a Professional Portfolio Design in 17 Easy Steps

Create a Dark and Sleek Web Layout Using Photoshop

Create A Stylish Portfolio Layout

Design a Dark, Contemporary Minifolio in Photoshop

Design a Minimal and Modern Portfolio Layout with Photoshop

Design a Beautiful Website From Scratch

Theatre: design an elegant, dark portfolio site

Create a Very Simple Portfolio Web Layout with Photoshop

Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop

Create a Clean Business Web Template Design in Photoshop

Design a simple, modern web template

Create a grunge photographer layout

How to Make a Light and Sleek Web Layout in Photoshop

Design a realistic website layout in photoshop

1st Photoshop Web Design Professional Layout Tutorial

Learn how to improve your creativity with mcp web designing course and become cissp expert using our testkings free design tutorials and VCP-410 resources.