A stylish portfolio is critical for any designer. Other professions have the luxury of describing their skills and accolades in words, but designers can’t just describe their work; they have to show it. Designers are most often compared, chosen, and hired based on the impression that their portfolio makes. Even if your work samples are stellar, the portfolio itself is arguably your most important design work, and it should be just as impressive as the work within it. Below, we’ll use some straightforward techniques to help you create a stylish, professional portfolio layout.
Now that we’ve got what we need to create this layout, let’s have a look ahead at our final result:
Step 1: Create Your Photoshop Document
Open Photoshop and create a new file with a width of 1100 pixels and a 1500 pixel height.
Step 2: Fill the Background
Now, select the Paint Bucket tool and fill the background with color #f6f6f6.
Step 3: Establish the Navigation
We will start with the top navigation. Use the Rectangular Marquee tool to select a small area on the top.
Step 4: Darken the Navigation Background
Select the paint bucket tool and fill the area with color #191919.
Step 5: Build the Navigation Button Area
Click on the marquee tool and select a rectangular bar within the darkened navigation area. Then, fill it with #050505.
Step 6: Add Dividers
We’ll add some lines that will separate your navigation items. Select the line tool with a 1 pixel weight. Also, make sure that our foreground color is #616161.
Step 7: Add Your Navigation Text
Now let’s add the text for our pages. Simply select the text tool and type in the desired text.
Step 8: Build a Hover Effect
For a hover effect, we will create a white line using the brush tool with a 3 pixel size. Then, select the eraser tool and remove the edges using a soft round brush. Now, reduce the opacity to 40%.
Step 9: Add Your Brand
Add your logo to the left of your navigation menu.
Step 10: Build a Background
Now, we’ll move on to our featured content area. First, create a new layer, and with marquee tool select the area under the navigation. Fill it with color #a0c0c8.
Now, switch off the background layer, select the marquee tool again, and create a rectangle. Fill the selected area with #f0f0f0.
We need some stroke on this, so click on “Layer” > “Layer style” > “Stroke.”
Step 11: Divide Your Content Area into Columns
Create another rectangle and fill it with #323030. And, for the adjacent text area, fill it with #242322.
Step 12: Add a “Read More” Button
Now select the text tool and add our text about the featured image. Under the text, we will add a “read more” button. To accomplish this, simply select “the rectangle tool and create a small rectangle with color #323030. Then, add your text inside the new rectangle.
Step 13: Add Featured Imagery
Now, add the image on the right, and add our featured ribbon to the top right corner of the image. I’ve created the ribbon with the pen tool, and I added text using the text tool.
Step 14: Add a Drop Shadow
Select the line tool and use it under the feature box with 1px weight and color #dedede. Now, click on “Layer” > “Layer style” > “Drop Shadow.”
Step 15: Create a “News” Element
Now, we’ll create a “News” element. So, click on the rectangle tool and create a rectangle strip with color #ebebeb. Again, select the rectangle tool and create a very small rectangle on the left with color #000000. Select this black rectangle and click on “Layer” > “Layer Style” > “Gradient Overlay.”
Step 16: Add the “News” Text
Add the “news” text using the text tool.
Step 17: Build a Portfolio Item
Create a small rectangle using rectangle tool with color #f0f0f0. Then, add the same stroke that we used with the feature area.
Step 18: Add Portfolio Imagery and Text
Now, add the image and add the banner on the side. Select the text tool and add the text under the image.
Step 19: Add Additional Portfolio Items
Repeat the same process to create two more portfolio items.
Step 20: Create Buttons Below
Select rectangle tool and create two buttons with colors #ca0e0e and #3c3c3c. Then add text using the text tool.
Step 21: Add Dividing Lines
Now select the line tool and create two lines with a 1 pixel weight and the color #dcdcdc. After that, add the images and text in the same style as the post that we did before.
Step 22: Add Flickr Updates
For the Flickr updates, select the text tool and add the heading. Once again create the gray frame using the rectangle tool, and add a stroke. Now, create a new layer and place it under the frame layer. Then select a soft round brush, and use it on the sides to give a shadow effect.
Now, paste the images in the frame.
Step 23: Building the Footer
Let’s start with our footer. First, select the area with the rectangular marquee tool and fill it with color #191919.
Step 24: Adding Footer Text
Select the text tool and add the desired footer text.
Our awesome layout is all done.
Five Ways to Remove Backgrounds in Photoshop in 2021
By Amber Leigh Turner,
Need to remove an image background? Learn five ways to remove backgrounds in Photoshop, depending on the kind of image you're working with.
5 Web Design Trends for 2021
By SitePoint Sponsors,
Web design trends come and go. 2020 was no exception. Web designers will see some familiar trends replaced by safer and more dependable design choices.
Meet Flipsnack, An Easy Design Tool for Incredible Magazines
By SitePoint Sponsors,
Flipsnack is a design/layout tool similar to InDesign and Affinity Publisher that helps you easily create professional layouts online.
Anum is Web and Graphic designer. Addicted to Photoshop and crazy for pixel perfection. She is also an active blogger, sharing her passions, skills and creative details on her blog Websoulz. She loves to connect with the community, sharing the latest design gossips and rolling her eyes on boring trends.