In this tutorial you will learn how to create a light and colorful grungy portfolio layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.
Click on the image to view the full-scale final result.
Lets get Started
1. This first thing we want to do is create a new document with the dimensions of 1020×1045.
2. For our background, I used “Texture 1.jpg” from this texture pack. Go ahead move it around on the document in a way that you feel looks good.
3. Our logo is the first step. I created a text logo using the font Myriad Pro. Lay your text out in a similar way to the following.
4. I added these blending options to my logos layer to add a little bit of extra detail.
5. For our navigation in our header, we want to add some simple text links using Helvetica with the color #36393B. I then used the Distortion Icon Set for the icons next to each link. Place your links in a similar way as the following. Keep this icon pack handy, as we will be using it again in this template.
6. Time to move onto our featured area. Using your Rounded Rectangle with a radius of about 10px, make a rectangle similar to the following:
7. Set this layers Blend Mode to Multiply, and then insert the following blending options onto its layer:
8. To make the area behind our soon to be thumbnail more dynamic, I used these Starburst brushes. With your foreground set to #FFFFFF, brush in a similar way to the following, and then lower your layers opacity to about 20%. We want to mask out the excess “burst” that comes out of our featured area, so CTRL+CLICK your Rounded Rectangle Layer to select it, and then choose the Add Layer Mask Icon in your layers pallet on your Start burst layer.
9. Take a screenshot of your favorite design and then place it on the document in a similar way to the following:
10. Insert the following blending options onto your thumbnails layer:
11. Using your Rounded Rectangle Tool with a Radius of 10px, go ahead and make some Rectangles similar to the following and lower their opacity to about 70%. Then place some text describing the image, with a title on one, and then the link on the other like I have below. The icon used is from the Distortion Icon pack used before, but is desaturated in this instance.
12. Now it’s time to make our arrows for our slider box for the thumbnails on the right side of our featured area. Using your Elliptical Marquee Tool, make a circle similar to the following and fill it with #FFFFFF
13. Insert the following blending options onto its layer
14. Next we want to make our arrow. Using your Rounded Rectangle Tool with a radius of about 3px, make a small rectangle. Angle it how you want your arrow, and then copy your Rounded Rectangles layer and then flip it horizontally (Edit>Transform>Flip Horizontally). Merge these two layers together, and you’ll want something that looks like this
15. Repeat those steps to create a down arrow, and then add some thumbnails with the same thumbnail settings as your large one, and you’ll have something that looks like this for your featured box.
16. Almost finished! Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000.
17. Lower this layers opacity to around 40%, and then we want to duplicate it. On the duplicated layer, make suer your opacity is 100%, and then change the Blend Mode to Soft Light. After adding some “inspiring” text, you’ll have something that looks like this
18. Time for our content area. Using your Rectangle Marquee tool, make a square and fill it with #FFFFFF. Then using your Polygonal Lasso Tool, we want to make some angles to make it as if the box is cut. Make a selection and then go to Edit>Clear. Add a title for your content area, and then use an icon from your Distortion Icon Pack from before and you’ll have something that looks like this
19. Lower the opacity of your content box to around 69%, and then add some text. For the headings, I used the color #B1493E.
20. All that is left now is to repeat the process for the right side of your content area, and to add some Social Media Icons. For the footer I used the same steps as you followed for the quote box back in step 16. Your final result will look something like this:
- Where to Find the Perfect Logo Inspiration
- Twitter Box User Interface Design in Photoshop
- Create a Chalkboard Style Wordpress Layout in Photoshop
- PSD to XHTML: Create a Chalkboard Style Wordpress Layout
- Beautiful Music Streaming Website Design in Photoshop
- Create a Theme Store Website Layout in Photoshop
Leave Your Response