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.

The files you need.

1. Twitter icon
2. Arrow

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

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

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.

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

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

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.

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

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.

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.

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.

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

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.

The Result

White

Light Blue

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%.

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% .

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.

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.

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.

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

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

Simple

White Brush

Out of Box

Download jQuery Color Menu (10260) |Download Colorful CSS Menu (1124)