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
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.
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.
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.
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
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.
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.
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.
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.
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
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.
Once again opens its blending options and select inner glow. Use settings for structure, elements, and quality shown in image below.
In blending options double click on Gradient overlay and set its colors.
Now use settings shown in image.
Now open stroke in blending options and use setting in image
Your logo will look like this
Thumb layout and Hover Effect
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.
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.
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
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.
Thumb Category & Comment Bar
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.
Now select Convert Point Tool straightens upper curves and set background color to #565656.
Put some Gradient on it
set its opacity to 50%.
Type your text (Poster Design) and put your comments icon on it, now your layer will look like this
Duplicate this thumb layout multiple times and create your portfolio gallery.
I am gona draw a very simple Navigation for gallery. Draw a triangle shape (I use Photoshop shapes for it).
You can also draw it with the help of Rectangle Tool.
Place it under gallery on both sides. Now type next works and previous works and align text according to left and right arrows.
Finally we are starting our template footer to make it done. Select Rectangle Tool and draw rectangle strip from edge to edge and color it #707070.
Duplicate this layer place it under this layer like this.
Now draw another rectangle shape under these layers and color it #C9C9C9.
Our footer layout is ready now it’s time to create its features, Draw a small square shape using Rectangle Tool for thumb
insert any image in it by placing image up on thumb shape layer and press crtl+alt+G to Group layers.
Duplicate thumb and create image strip.
Place your text as I plan to create flicker gallery and twitter feed by placing twitter icon on it.
Now create 1px separator in between flickr and twitter feed section, Duplicate layer this separator and place it right under Flickr panel.
In the end we will create our menu under footer; I use simple text font (Myriad pro) to make it simple and clean.
Place social media icons in center of footer and type powered by word press (font is Tahoma).