We need to put a call-to-action button once again so the visitor has something to act on. Make sure you give enough space on the sides so everything looks balanced. I’ve included social network links and address. Place it 70px from the top giving a lot of space and creating a footer section more powerful and independent.Īfter that add some more information that visitors may need. Pick the Horizontal Type Tool (T), set the color to white #FFFFFF, size to 16px and write down BLOG in capitals and some potential blog post headlines. Now we need to put some content in our footer.
After that move it 40px below the work images using the Move Tool (V). Grab the Rectangle Tool (U) set the color to the previously used blue #075dfb and draw a huge rectangle covering the bottom part of the document. It was quick huh? Minimize the Work group and create a new one called Footer. Leave 40px spaces at the top and bottom and 30px between the images on the sides. After that hit CMD/CTRL+T to resize the images to be 313x235px and place them in three columns by two.
Drag and drop your shots into Photoshop, convert them into smart objects by clicking the right mouse button on the image and selecting Convert to Smart Object option. Minimize the Featured group by clicking the small arrow icon next to the group name and create a new group called Work.įor the work examples I’ve used some of my previous Dribbble shots. Let’s add some more of your work so visitors can get a sense of your style. Place inside the white rectangle and center it both vertically and horizontally. Place it on the right of the image consistently giving 40px space around ( 30px at the bottom as we need to align horizontally with the title).įinally, pick the Horizontal Type Tool (T) again, set the color to black #000000, font size to 14px and write your button message. Pick the Rectangle Tool (T) and draw a 212x46px sized rectangle. We need a call-to-action button so the visitor can dig deeper into our work. For consistency I’ve left 40px space on the left and on the bottom. Make sure to give some space for the text so it looks balanced. Pick the Horizontal Type Tool (T) once again use Montserrat font and set the font size to 40px, color #FFFFFF and write whatever you think will describe your work using 3-5 words. We need a title for our work we’re featuring. Gradient options are shown below.Īfter you have the gradient ready, hold down the SHIFT key and drag from the bottom of the image to the top of it and reduce the layer’s Opacity to 65%. After that pick the Gradient Tool (G) and make it go from black to transparent. Great! Now we need to put a shadow over the image so the text on top of it will be easily readable.Ĭreate a new layer called Shadow using SHIFT+CMD/CTRL+N shortcut and create a Clipping Mask as we did for the image earlier. Make sure it is big enough so it will cover the rectangle without scaling.Īfter you have dragged your image into Photoshop place its layer above the rectangle layer and holding down ALT key mouse over the thumbnail of the image until you see a little arrow-down icon and click on it to create a Clipping Mask so everything that is inside the clipping mask will be within the rectangle area. Choose an image you want to use in your portfolio and drag it into Photoshop. I’ve used one of my previous shots on Dribbble: Refe Menu Opened. Now we need to put the actual work above our rectangle shape. Using the Move Tool (V) move the shape 40px down the navigation so it has enough space and looks balanced. After that pick the Rectangle Tool (U) and draw a 1000x574px sized rectangle between the first and last guidelines. Go to Layer > New > Group… or simply hit the quick group icon at the bottom of layers panel. Minimize Top Nav group by clicking on the little arrow icon next to its name and create a new group called Featured. Using the same tool change text to be links of your portfolio. Place it right after the first vertical guideline leaving some space at the top, in my case it’s 40px.Īfter that duplicate that layer by hitting CMD/CTRL+J and move it to the right of the document.
Pick the Horizontal Type Tool (T), choose Montserrat font, set its size to 20px, color to blue #075dfb and write down the name of your portfolio. Create a new group called Top Nav, go to Layer > New > Group... or simply hit the quick group icon at the bottom of layers panel. Now that we have our guidelines set we can start designing. Go to View > New Guide… and set following vertical guidelines: 200px, 450px, 700px, 950px and 1200px. Now let’s set some guidelines so we have our design perfectly aligned. Hit CMD/CTRL+N and set the width to 1400px and the height to 1630px. Lets get started by creating a new document in Photoshop.