Creating Simple Portfolio Interface Using Photoshop CS5

Posted on 27. Mar, 2012 by EDDY in Adobe Photoshop, Design Resourses, Photoshop, PSD, Templates, Tutorial, Web Design, Web Templates, Wordpress

Hi! As we know how much power full Photoshop is and how it is important in web designs. Mostly themes and template are designed and sliced in Photoshop so Today we are going to create simple portfolio interface using Photoshop. Here we go…

Canvas & Background Settings

Step1:

As we know open your photo shop and press crtl+N for new canvas , set its properties and set size to 1020PX (width)and 1100PX (Height), set it resolution to 72pixels/inch and press ok . Now set it back ground color to #252525 by double click on BG color pallet in tools section.

Top navigation

Step2:

Draw a rectangle shape on the top (1020px x 80px) using rectangle tool and name it NavBG.

Now click on layer styles in layer tab in top menu and click on blending options or by double clicking on the layer,

Now double click on Gradient Overlay and use properties and colors shown in image below.

Step3:

Now press crtl+alt+J and create duplicate layer and name it shape6, now move this layer upside aprox in half of Nav BG. Now your navigation bar will look like shown in image below.

Step4:

In this step we will creat line under Nav BG by creating another duplicate layer. Reduce its height,

clear its Effects and set its color to # 464646.see image below.

Hover & Content

Step5:

In this we will type our content labels. I choose font (Swis721 BlkCn BT) for content, now type your content and set color #FFFFFF. In blending options double click on Drop Shadow and set its structure according to image below.

Step6:

Now it’s time to creat hover effect for Navigation bar. Draw shape using rectangle tool and resize it according content and I choose home for it.

In blending options double click on Drop shadow and set its structure values.

Again in blending option double click on Gradient overlay and use Gradient with these values.

Step7:

Now iam gonna place twitter and face book icons. You can download or copy and icons but I download it from icon archive. Simple place your icons on right side of your navigation bar.

Creating Logo

Step8:

I love to create logos and it is one of abilities so that’s why I really enjoy this section. First from all we will create background for our logo. Create new layer and name it under glow, click Elliptical Marquee Tooland set its Feather to 30Px with color #FFFFFF. Now draw circle and fill it by crtl+backspace or Paint bucket tool.

Click on filter in top menu bar and in Blur select Gaussian Blur

then set it’s radius to 88.0 PX

& set Opacity to 50%. Now under glow will look like this.

Step9:

I use simple font named Myriad Profor logo. Type your company name as I did (Eddfolio).

Select folio section of text open Character Panel and set its style to Condensed,

now select Edd section and in Character Panel set style to Bold.

It will look like this

OuterGlow

Step10:

Now we will put some effects on it, so we open its blending options and select outer glow. Use settings for structure, elements, and quality shown in image below.

Inner glow

Once again opens its blending options and select inner glow. Use settings for structure, elements, and quality shown in image below.

Gradient overlay

In blending options double click on Gradient overlay and set its colors.

Now use settings shown in image.

Stroke

Now open stroke in blending options and use setting in image

Your logo will look like this

Thumb layout and Hover Effect

Step11:

Now we will work on our work section were our thumbnails will appear with specific layout. Draw a rectangle using Rectangle Tool (u) and solor it #565656.

Step12:

Now duplicate this layer (crtl+alt+J) reduce its size and set its color # e3edf7. now put some image on this layer and use crtl+alt+G for group image in this layer.

Step13:

once again duplicate layer (crtl+alt+J) scale it downwards and set its color to #393b3e.

Put some text on it. See result in image.

Our thumbnail layout is almost ready now we will add some more options and details.

Thumb Date Section

Step14:

In this step we will draw a date section on right side of thumb layout. Draw a Rectangle shape using Rectangle Tool (name this layer Date) and color it # 00b7ec.

Go to this layer blending options and double click on Drop Shadow and use settings shown in image below.

Then double click on Gradient Overlay select Gradient colors,

Now use these Gradient settings and put your date as text on it.

Final Result

Thumb Category & Comment Bar

Step15:

In this step we will add Category and comments bar under our thumbnail layout. Draw a rounded rectangle by selecting Rounded Rectangle Tool with Radius 2px.