First, create a new layer, and with marquee tool select the area under the navigation.

After that, add the images and text in the same style as the post that we did before.For the Flickr updates, select the text tool and add the heading. A stylish portfolio is critical for any designer. Select the line tool with a 1 pixel weight. Also, make sure that our foreground color is #616161.Now let’s add the text for our pages. Hopefully these tutorials will teach you some new tricks and techniques that will be useful to you in your own work.
Fill the selected area with #f0f0f0.We need some stroke on this, so click on “Layer” > “Layer style” > “Stroke.”Create another rectangle and fill it with #323030. 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.Let’s start with our footer.

But as the image is resized down, it’s harder to spot the blur. Select the text tool and add the text under the image.Repeat the same process to create two more portfolio items.Select rectangle tool and create two buttons with colors #ca0e0e and #3c3c3c. To accomplish this, simply select “the rectangle tool and create a small rectangle with color #323030. Then, fill it with #050505.We’ll add some lines that will separate your navigation items. In this post we’ll look at 25 tutorials that will lead you through the process of designing a portfolio site in Photoshop. Select this black rectangle and click on “Layer” > “Layer Style” > “Gradient Overlay.”Create a small rectangle using rectangle tool with color #f0f0f0. This is going to be a very harsh example, but it’s to help me illustrate my point. I’ve created the ribbon with the pen tool, and I added text using the text tool.Select the line tool and use it under the feature box with 1px weight and color #dedede. As I said – this is an extreme example (I hope you don’t have images partially blurred in Photoshop in your portfolio). I took an image from Unsplash and used “Gaussian Blur 2px” in Photoshop on a part of the image. Then I resized that image to 1920px width and 1440px in width. Now, reduce the opacity to 40%.Now, we’ll move on to our featured content area.

How to Create an Awesome Portfolio Layout in Photoshop sanjaykhemlani.com Web Layout Aug 24, 2012 As a designer creating an awesome portfolio will get you or land you a job, this is the very first step every web designer should do if they want to gain more clients. Simply select the text tool and type in the desired text.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. Then, add the same stroke that we used with the feature area.Now, add the image and add the banner on the side. Then, add your text inside the new rectangle.Now, add the image on the right, and add our featured ribbon to the top right corner of the image.

Create an Awesome Portfolio Layout in Photoshop.
Create a Portfolio in Photoshop w/ Contact Sheets! In this tutorial I’ll walk you through the steps necessary to design a portfolio website to showcase your design services. 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:Open Photoshop and create a new file with a width of 1100 pixels and a 1500 pixel height.Now, select the Paint Bucket tool and fill the background with color #f6f6f6.We will start with the top navigation. Fill it with color #a0c0c8.Now, switch off the background layer, select the marquee tool again, and create a rectangle. As I said – this is an extreme example Generally, I recommend the “Full HD” size, which isIn portrait images, 1440px height is going to reduce the width to around 1080px (depending on your image ratio). Once again create the gray frame using the rectangle tool, and add a stroke. ... we will create a white line using the brush tool with a 3 pixel size. Then add text using the text tool.Now select the line tool and create two lines with a 1 pixel weight and the color #dcdcdc. And, for the adjacent text area, fill it with #242322.Now select the text tool and add our text about the featured image. Designing a quality portfolio website is a must for any aspiring designer. However, if you do have a night shot with relatively high ISO noise, you can do a lot more with your full-resolution image ( de-noise and/or sharpen it ) and then scale it to HD size ( around 1920px ) and still have it look decent enough. With some subtle textures and layer styles, you’ll see how the smallest details can work to give your portfolio … Under the text, we will add a “read more” button. In general, I usually recommend keeping your landscape images Try your best to keep your images as small as you possibly can (Images in the responsive site appear blurry, I have Sony Xperia XZ Premium which has 3840×2160 and it shows all the images to be blurry including the “To Top” button which is provided with the theme.what is your recommended ppi? First, select the area with the rectangular marquee tool and fill it with color #191919.Select the text tool and add the desired footer text.Anum is Web and Graphic designer. Create Your Photoshop Document.

Now, click on “Layer” > “Layer style” > “Drop Shadow.”Now, we’ll create a “News” element. Designers are most often compared, chosen, and hired based on the impression that their portfolio makes. It seems that To find the right size for your portfolio images you have to juggle with site speed, single image load time, bandwidth and image quality. Use the Rectangular Marquee tool to select a small area on the top.Select the paint bucket tool and fill the area with color #191919.Click on the marquee tool and select a rectangular bar within the darkened navigation area. She is also an active blogger, sharing her passions, skills and creative details on her blog Learn valuable skills with a practical introduction to Python programming!Give yourself more options and write higher quality CSS with CSS Optimization Basics.Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers