Posted on Friday, January 27th, 2012 in Uncategorized by Nick
This tutorial is written in a way where you’re given instructions on what to do, but keeps aspects open to your own creativity. Photoshop tutorials should be followed somewhat loosely, with keeping your mind on turning things into your own. Design the page with your own touch. After all, this is YOUR portfolio.
Start off with creating a new document, big enough to contain the site design. I like to start with the size of a popular screen resolution, width-wise. In this case, I’m going to use 1280px. Keep in mind, the height will likely change a lot while you design your site, so that’s not too important right now. Make the height big enough work with, I started with 1200px, just to keep things simple. So, if you’re trying to stick with me through the entire tutorial, we’re making our canvas 1280x1200px.
So now that you have your blank canvas in Photoshop, let’s throw down a texture for the background. I’m using “Broken Noise,” by Vincent Klaiber, who was nice enough to put the pattern on subtlepatterns.com.
So, let’s start off with designing out header. Throw your logo up, front and center. You’re gonna want some nice focus on that fancy logo you put together, but try to avoid making it too large. I scaled mine to 145x103px, a nice, comfortable size. Add your name here, too, possibly with a nice slab-serif font (you can find one here http://www.fontsquirrel.com/fonts/list/style/Slab%20Serif). I used Arvo, it’s pretty, it’s free and it works. Arvo font, 30pt, Bold, white.
(before this step, you’re gonna want to grab the Subtle Patterns Volume 1 .pat file from http://subtlepatterns.com/?page_id=343)
Now let’s give the logo some treatment. Right-click/secondary click on the logo layer, click ‘Blending Options…’ and check off Drop Shadow and Pattern Overlay. The settings for both Drop Shadow and Pattern Overlay are both following this, but first I should mention that the Pattern Overlay is using a pattern from the Subtle Patterns .pat file mentioned above. I’m using “concrete wall,” it’s the 42nd pattern, but you can use whichever light pattern you think looks nice.
Ah, lookin’ fancy! If you want your text to have the same treatment, right-click/secondary click on the logo layer we just applied blending options to, click on “Copy Layer Style,” then right-click/secondary click on the text layer, click “Paste Layer Style.”
Now lets make the background a little less boring. Make a new layer under both the text layer and logo layer, take out your brush tool, and set it to a big, soft brush. I’m using a 370px brush, with 0% hardness. Brush directly behind the logo, but keep half of the brush out of the canvas, so you only have a half-circle fading from the top, like shown here:
Adjust the opacity of this layer to 30%, give or take 10% depending on how you like the glow.
Additionally, make a new layer again, take out your brush tool, set a smaller brush (I used 200px, 0% hardness), and brush across the top, keeping the brush JUST out of the canvas, so only it’s soft edges will appear on the document. Set the opacity to 20%.
I know a popular trend is to add some witty text, describing what you do in a fun way. That’s fine, go ahead and add something like that if you want. If you do, separate this from the logo with a line, 1px or 2px would do. Fade the ends by taking out the eraser, selecting a soft brush and erasing the sides. I used a 2px faded line, and set the opacity to 15%.
My sub-text is Arvo Regular, 23pt, with text in gray (#cecece) and the links in an orange (#ffb22b).
Alrighty, header is lookin’ nice! Let’s get to the beef of the page, the actual portfolio.
How you display your portfolio items is pretty important. You want your creations displayed gorgeously, which is a little easier if you’re generous with the space each item has. In this case, we’re gonna use the entire screen width for the portfolio items. Does that mean we need huge images to fill the screen? Nope, not necessarily, it’ll just be our background that will stretch from end to end, we’ll keep the actual work within 900px or so.
So, take out your Rectangular Marquee Tool (keyboard shortcut is the ‘m’ key), change the Style in the top bar from “Normal” to “Fixed Size.” Set the width to your document width, if you’ve been following the tutorial down to each pixel, your width is gonna be 1280px. Set your height to something where you have enough space to fit whatever project you’re showcasing, as well as some information. 400px is a nice height, it’s what I’m gonna use. Make a new layer, fill it with the color of your choice (mine’s just black, because I’m gonna a masked grass texture).
Let’s throw some designin’ at this bad boy.
I’m gonna use a texture background for my first project, because I think it looks nice. You can use a pattern, some photo, simple gradient, etc. Possibilities are endless! That’s my favorite part about this layout, you can add these little pieces of art, each in their own element, on the same page. It looks awesome.
So I used a grass texture found on http://cgtextures.com/.
I’m thrown’ a mocked up soccer app here, it’s not a real app, just made this for this tutorial. You should keep the background simple, but try to theme it towards the project. Colors, elements, etc. can all be different, and should match the project. Here’s the example I put together:
Now you’re gonna want to add in more and more projects, each with it’s own theme.
So, repeat the process with the first project as many times as you’d like. I kept three to one page, but you can definitely put more, it’s okay to have this page tall, because scrolling is it’s sole navigation function.
Now let’s finish this guy up with a simple footer. Grab your text tool, bring out your slab-serif font again, and let them know they’ve scrolled through your work. “Thanks for looking at my stuff, I’m available for work.” It’s simple, to the point and it’ll fit on two lines (which I would recommend).
Throw in your logo too, under the text. Give it different treatment this time, though. I made it black, and added a nice inlaid effect. My layer style is posted below, if you’d like to replicate the effect I gave to the logo. Oh, and throw a glow behind it like we did with the header.
Alright, so how’s it lookin’ now?
Wow! Looks awesome! 😀
It’s simple, it showcases your work beautifully, and a simple link to your email will provide easy contact for any future clients. Of course, you can in some links to other profiles/pages of yours on the internet, like so:
I’m gonna keep mine without the three links. I just like the simplicity.
Well, you’re done! Congratulations, you now have a gnarly portfolio layout!