How to Create a Simple, Dark Yet Stylish Portfolio Design

post
I always try to create things the unconventional way. There are so many tutorials on how to create a portfolio mock up in Photohshop. Also, I have seen tutorials on gimp too, however none on Pixelmator.  It is nice image editing software for mac. I enjoying working on it. So I decided why not create a Portfolio mock up tutorial. In this you will find how to make simple, dark yet stylish Portfolio mock up. The PXM and PSD format is available to download. This my first tutorial on mock up. [ Please go easy :)]. My goal was to create something minimal, very simple but also add some style and glow to it. Hope people enjoys it.

Do not forget to subscribe because another free Pixelmator give away is coming.

First Lets Look at what we are creating.

dark_blue_box

The files you need.

  1. Twitter icon
  2. Arrow

1. Create  a new document and fill the with black #000000

step_11

2. Create a new layer called bgcolor. Fill in bgcolor named layer with #824a1f

step_2

3. Create Another layer named Menubg. This layer will be menu background . Now using the Marquee tool and  create a rectangular block the height is about 474 and width is 600. You can change the size as you need.

step_31

4. Now create a new layer called menu bg brush and choose a following shown brush with the settings.

menu_brush_setting

5. Using the brush draw cloud like image and add the necessary text.

step_51

step_6

6. We need to create a content slider. Add three images below the menu. I just added three random pictures from deviantArt. Use rulers to align them.

step_8

7. Use Marquee tool to to create a border around the image. Don’t make border too thick.
step_91

8. Just duplicate the border and use it behind each image. Use the guidelines if you need to. After that, merge the border layers and link all the images. It will be easier to move the images around.

step_10

9. This step is optional if you want to make the image more nicer use  Filter>Distort> Glass to make the border little grungy. Use 65-68 if you go higher it will look more distorted.

step_111

10. For  the slider you need to make two arrow. You can use these to arrow that you downloaded at the beginning.  Again use marquee create a small rectangle with white color #FFFFFF. Drag it under the Arrow Right Layer and merge the layer.

step_12

When you are done with the right side arrow copy the layer. Go to Edit>Transform> Rotate Canvas> Flip Horizontally.

slider_both

11. We are going to create some sprinkles now. Use the setting mentioned. You can use white color brush or light blue. Whatever you like best, you pretty much play around with the settings. Use scatter more to have the brush stoke separated. Here is how it looks with white and light blue color. After first layer is done duplicate the layer and Go to Filter>Gaussian Blur. This will give the brushes that glow effect.

brush_setting

The Result

White

white-brush

Light Blue

blue_brush

12. Next we are going to create a box for content. Create a new layer called content and fill it with black. Turn the opacity to 12%.
content

13. We need to create two sidebar. Create two Layers called Sidebar Top and Sidebar. Again fill it with black and turn the opacity to 12% .

sidebar

You can download and add the twitter icon from here and add brush on the side.

14.   We need a simple footer. Create a new layer with full width and fill it black  and turn the opacity to 12%. And add the copyright information.

footer

15. If you want to keep it simple you are done. Now lets look at the whole page. Click on the image for full size.

tutorial_3_no_box_small

16. Now are going to make the content background a little more cooler. Add a layer underneath content called Content bg. Fill it it grey #cccccc. And Go to Filter>Quartz Composer> Cube. Select the secondary color  same as background #824a1f, so it will match with the page. Turn the opacity down of the cube as you please so it matches with the rest of the page.

cube

17. Use Free transform to match the bottom of the content and the side bar.

content_arrange

17. Alright We are done! lets look at three differnt versions.

Simple

tutorial_3_no_box_small

White Brush

tutorial_3_white_brush_small

Out of Box

tutorial_2_small1

[Download not found] |[Download not found]


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • Kawsar Ali

    @Chad: Oh Chad, This is not photoshop this created using Pixelmator

  • Chad

    great tutorial!

    also, your photoshop dialog windows look different from anything i’ve seen. why do they look like that? (asking because i’d like mine to look like that, too).

    cheers,
    chad