Every designer needs a portfolio to display their skills and current experiences they have, this can help you land a job that you been looking for. Some employer will also ask you certain details about your website and client website you worked with that was included on your portfolio.
Whether you do website design or a developer, more often than not people want to see your skills and the only way to show is to use an online portfolio.
Today we will create a simple and clean portfolio design in Photoshop, we will certain features such as a slider, a three column that will display our latest projects.
Final Result
Things we need
- Social Media Icons from Purty Pixels
- Illustration images from sakimichan, a DeviantArt user
- Image 1, Image 2, Image 3
- Adobe Illustrator image from DragonXP, a DeviantArt User
Let’s Begin
Open your Photoshop and set the canvas width to 980px and 1200px for heigh
Grab your Marquee Tool (M) and select a foreground color #FF6801 and fill it, name this layer border-top
Next is we will add the logo and navigation, for the logo font used is Arial 30pt #000000 and #FF6801. For the navigation, Arial 11pt #888888.
Now we will add an arrow to our current navigation, use Pen Tool (P) and follow the point as the number says. After that right click > make selection and fill with #FF6801.
Grab your Single Row Marquee Tool (M) and select a line after the logo. Color it with #000 using brush while it’s still selected and set the fill to 10%
Use your Marquee Tool (M) and select a 600px height after the header and create a new layer name this home-bg.
In your home-bg layer, right click > blending options and select gradient overlay. Follow the colors in the image below for your gradients color settings.
This is what we have, now select Single Row Marquee Tool (M) and click on the very end-top of the home-bg layer and fill it with #c8c8c8 fill is set to 31%. Duplicate the layer and do it again, this time fill it with #FFFFF, press arrow key up 1 time to create a sunken effect.
Now we will do the slider, select the middle part of the home-bg layer using Marquee Tool (M) and fill it with #FFFFF, name this slider-bg
Set the drop shadow color #a8a5a5 and distance 4px, size 12px
Now, drag the Adobe Illustrator image onto the canvas. Right click on its layer and select create clipping mask, make sure that this is above slider-bg layer.
After that, grab your Marquee Tool (M) and set a couple of rectangle for our text. First one is #FF6801, and #FFFFFF
Next is we added a couple of text, for the title we used Arial Bold 28pt #FFFFF and for the other text Arial Regular 12pt #333333
After the slide it’s time to move on the portfolio post images, grab your Marquee Tool (M) you can fill it whatever you want, I just made it dark so you can see it.
Set the drop shadow color to #c0c0c0 and distance 1px, size 9px
Now drop the image 1 and do a clipping mask like what we did with the slider, resize it (CTRL+T) to fit on the holder.
Create a new layer, name this content-bg. Use your Marquee Tool (M) and select the half bottom part of the image and fill it with #FFFFFF
Next is the arrow head same with our navigation, use Pen Tool (P) and follow the numbers. After that right click > make a selection and fill it with #FFFFF, name this layer arrow-white.
Lastly, we added some text to our post images. Font used for the title was Arial Bold 17pt #ff6801, for the content text Arial Regular #333333.
Continue with the other images, one tip is to group your post into folder and duplicate it (right click > duplicate folder) and just change the image and title.
Now we will create a pattern, open a new file and put 10px by 10px make it transparent.
Zoom in and use Pencil Tool (B), color is #333333 and draw a the shape same as below.
On your Menu, look for Edit (drop down) > Define Patern name this pattern 1 and save it.
Grab your Rounded Rectangle Tool (U) and fill it with #FFFFF, in blending options set the patterns to the one we did earlier and set the opacity to 10%.
Here is what should have, we also added some text. Font used was Georgia Italic 25pt #737373, the other color is #ff6801.
Next we will do our footer, grab your Marquee Tool (M) and fill it with #333332 and name this layer footer-bg. Fill in the first column with text, font used for the title Arial Bold 14pt #7B7B7B and for the text, Arial Regular 12pt #7B7B7B.
For the social media icons, we download earlier. Make sure you aligned them properly.
Footer title drop shadow, color is #0000 size and distance is 1px.
At the bottom of the footer, another Marquee Tool (M) and fill it with #1D1D1C.
After that we added a text at the bottom, what I did is duplicate the ‘about cleanfolio’ text and change the font-size to retain it’s styles. Font size now is 11pt.
And we are done!
Hopefully you can use this template to get you started online, remember that adding your personal touch would do the trick. This layout is mainly focused on getting your visitor to check out your portfolio and contacting you right away, but having a blog can help too since offering a freebie can boost your exposure and popularity among other designers.
If you would like to see the html conversion, subscribe to our RSS Feeds or like us on Facebook to get the html conversion download.
0 yorum:
Yorum Gönder