Design a Minimal and Modern Portfolio Layout with Photoshop
Thursday, October 29th, 2009
In this Photoshop web design tutorial, we’re going to create a mock-up of a clean and modern-looking website. This is Part 1 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.
Minimal and Modern Portfolio Layout Tutorial Series
- Part 1: Design a Minimal and Modern Portfolio Layout in Photoshop
- Part 2: Minimal and Modern Layout: PSD to XHTML/CSS Conversion
Preview
Here’s a preview of what we’ll be creating together. Click on the image to enlarge.
Make a new Photoshop document
1 Start off with a new document (Ctrl + N) in Photoshop; make the document 1200 x 1200px with a transparent background.
Creating the Header’s background
2 Choose the Rectangular Marquee Tool (M) from the Tools Panel and then create a rectangle selection spanning the width of the canvas; the height of the rectangle should be about 120px.
3 Use the Paint Bucket Tool (G) to fill the selection with any color. Double-click on the layer in the Layers Panel to open up the Layer Styles dialog box then add a Gradient Overlay using the settings below.
You should have something like this.
Creating the Content Area background
4 We’re now going to create the second half of our background for the layout’s content area. Start by setting your Foreground color to #00315C and Background color to #001B32 in the Tools Panel. Select the Rectangular Marquee Tool (M) and make a selection around the remaining transparent area; once you’ve made the selection, select the Gradient Tool (G), and set the Gradient Type in the Options bar to Radial Gradient.
5 Once you’ve set up the Gradient Tool (G), drag it over the marquee selection we created, and start dragging from the top middle of the selection to about a quarter of the way down the Photoshop canvas.
Setting up Guides
6 We are now going to set up some guides so that the website layout remains 850px wide throughout the design process. To create your first guide, go to View > New Guide. In the New Guide dialog box, enter 175px and make sure that the Orientation setting is set to Vertical. This will create a guide 175px away from the left edge of our 1,200px canvas.
7 Repeat the previous step and create another vertical guide, only this time enter 1025px (175px + 850px = 1025px). This will give us a layout that is 850px wide and centered on our 1,200px wide canvas.
Designing the Header section
8 Select the Horizontal Type Tool (T) and then add your layout title and slogan text at the top against the left guide.
9 Create a new layer underneath your layout title text, and then get the Rectangular Marquee Tool (M) ready. Make a selection over your header area; the selection should be the whole width but only half of the height of the header (about 60px in height).
10 Fill (G) the selection with the color white (#FFFFFF) then set the layer’s Opacity to 25% in the Layers Panel. You should have something like this.
Creating the Navigation
11 Select the Horizontal Type Tool (T) with a font size of about 11-12px. Add your dummy navigation text to the right of your layout’s title and slogan; leave margins in between each dummy link.
12 In between each dummy link, add a 1px line using the Rectangular Marquee Tool (M); the line should be from the top of the header/navigation to the bottom. Fill (G) the 1px lines in the color #CECECE. You should have something like this.
13 Now, let’s add a simple hover state to one of our dummy links. I’ve already colored one of the links in a dark blue color to represent a hover state. Select the Polygonal Lasso Tool (L) and create a triangular shape – holding down the Shift key whilst making the triangle will ensure each side is perfectly straight.
14 Fill the triangular selection with the color #00315C.
Creating the Welcome Area
15 Choose the Horizontal Type Tool (T), and then add some dummy welcome text; again place the text against the left guide and leave a decent amount of space in between the header/navigation and the welcome text. At the bottom of the welcome text, I’ve added 4 bullet points for a small list. The bullet points are icons from the Function Icon Set (the file name is circle_blue.png).
16 We’re now going to add a welcome image on the right side of our welcome text; I’m using a screenshot of Six Revisions. Crop your image and remove any unnecessary parts that aren’t needed. Once you have your image ready, alter the perspective by going to Edit > Transform > Perspective.
17 Select the Elliptical Marquee Tool, and then make an elliptical selection at the bottom of your welcome image.
18 Fill (G) the selection with the color black (#000000) on a layer underneath your welcome image.
19 Once you’ve filled the selection, set the layer’s Opacity (you do this in the Layers Panel) to 35%.
20 Then go to Filter > Blur > Gaussian Blur and blur the ellipse by about 1 to 2px.
21 Duplicate your welcome image and shadow layers, and then drag them underneath there originals. Move the duplicated image and shadow so that it looks like it’s standing behind the first one.
22 Once you’ve moved it in place, go to Filter > Blur > Gaussian Blur and blur the second screenshot by 1px.
Creating the horizontal 3D divider
23 Select the Rectangular Marquee Tool (M) and create two 1px lines on top of each other; the lines should be 850 pixels wide from the left guide to the right guide. You can create the two lines on the same layer.
24 Fill the top line in the color #000D19 and the bottom line in #003461.
25 Select the Elliptical Marquee Tool (M) and make a selection over the divider line.
26 Fill (G) the rectangle with the color black (#000000) then apply a 2 to 3px Gaussian blur. Once you’ve blurred the ellipse, cut the top half away from the divider by using the Rectangular Marquee Tool and deleting the area beneath it so that you are left with half an ellipse.
27 Merge both layers together (Ctrl + E with the top layer selected in the Layers Panel), and then add a layer mask (click on the Add layer mask icon at the bottom of the Layers Panel) to the merged layer.
28 Select the Gradient Tool (G) with a gradient type of Reflected Gradient, and then set your Foreground color to white (#FFFFFF) and Background color to black (#000000).
29 Drag the reflected gradient from the middle of the divider to either the left edge or right edge – both the left and right sides should slowly fade into the background.
Designing the Content Area
30 Select the Horizontal Type Tool (T) and then add a dummy header and paragraph on the right side of the layer underneath the 3D divider.
31 On the left side of the layout next to the dummy paragraph, create a rounded rectangle using the Rounded Rectangle Tool (U); make sure that it has a Radius option is set to 10px (the radius is set to 10px by default).
32 Once you’ve dragged out your path, select the Pen Tool (P), right-click inside the rectangle, and then choose to Make Selection.
33 Set your Foreground color to #00315C and Background to #001B32 and choose the Gradient Tool (G) with a gradient type option set to Radial Gradient.
34 Drag the gradient from the top of the selection down to the middle, just as we did for our background. Once done you should have something like this.
35 Now Add a Drop Shadow, Inner Shadow, and Stroke layer styles to your rounded rectangle layer (double-click on the layer in the Layers Panel to open up the Layer Style dialog box). Use the settings as shown in the following figures.
36 Select the Polygonal Lasso Tool (L), and then make a triangular selection around the bottom corner of the rectangle.
37 Cut and paste the selection to a new layer. Once you’ve re-pasted the corner you cut off to a new layer, you would have lost its layer styles. So before we go any further, re-apply the Layer Styles from above to the corner layer.
38 Once you’ve re-applied the layer styles, rotate the corner 180 degrees by going to Edit > Transform > Rotate 180; place the corner back at the bottom of the rectangle.
39 To finish off the content box, add your dummy content.
Creating the Footer area
40 Select the Rounded Rectangle Tool (U) and then drag out your footer sized rectangle.
41 Fill the rectangle with any color, then add a Gradient Overlay with the following settings.
42 Finally, add your footer information to your footer and you’re done!
Finished!
That concludes this tutorial, thank you for reading. In the next tutorial, I’ll show you how to code it into a working portfolio template.
Share your work on Flickr
If you followed along this tutorial, why don’t you show it off to the rest of the Six Revisions community by placing it in the Six Revisions Flickr Group?
Download
If you want to download the PSD file of this tutorial, you can grab it as a ZIP archive.
- minimal-mordern-layout.zip (ZIP, 1.5MB)
Related Content
- How to Make a Light and Sleek Web Layout in Photoshop
- How to Make an Impressive Blog Layout in Photoshop
- Create a Very Simple Portfolio Web Layout with Photoshop
- Related categories: Tutorials and Photoshop
About the Author
20+ Car Pimping and Tuning Photoshop Tutorials
Thursday, September 24th, 2009
We’ve seen how Photoshop has been extensively used in areas like web designing and beauty photo retouching. In today’s post, we bring you into another stretch where Photoshop also rules and dominates – the modding and sketching of rides.
This following article is dedicated to car lovers, forumites who use car photos as signatures, web designers or anyone who fascinates nice rides. We search the Internet and here we put forward some of the best Photoshop tutorials with techniques on how to mod a car. Full list after jump.
Colors Manipulation
Chrome your car
Gives your car body that chrome effect. Works better with black default.
Color Tweak The Ferrari
This tutorial make use of an additional mask and give your car a color change on the fly by applying different color blending options.
How to make Car Advertisement Mock-ups
Get your car air brushed with any color, or design. But before that, Thomas Baekdal suggest you give it the right base color.
Add Flaming Decals to a Modern Car Design
This tutorial will explain the steps needed to turn this boring Prius into an awesome street racer.
Body and Parts Enhancements
Porsche digital rendering photoshop tutorial
How to render a low quality digital car photo into a high quality output.
Give your car a little wood
Here is one way to take a simple texture and apply it to a shaped object like a car and have it appear to follow the body contours.
Create a real life "Cars"
How to create a real CARS of your own cars.
Vanity License Plate
How to create a custom vanity license plate using a few basic Photoshop tools a piece of reference material and some creative layer stylings.
Car Enhancement with Digimods
Folks at Digimods have a comprehensive list of Photoshop tutorials covers almost everything you will want to mod on a ride. From adding a bad boy bonnet, carbon fibre bonet to lowering the car, changing the wheels and much more!
Freehand and Sketching
Concept car sketch Photoshop Tutorial
This tutorial describes how to render this car with paths, and finishes the paints with later masks and filters.
Drawing a Car Lineart in Photoshop
Draw the lineart of this Mclaren F1 using paths. You are required to have some experience in using Photoshop’s Pen tool to be able to draw this car in detail.
Photoshop Rendering
Photoshop rendering in Photoshop by Emre Husmen, a 20 year old Turkish design student, also the 2004 Peugeot Design Contest finalist.
Rapid Development Sketching
"In this tutorial it is assumed that you already have a design theme worked out and know roughly what your car will look like. Ideally you would be working over a photo of a clay or screenshot of an alias model. I have chosen a supercar to show the methods used here because the forms are exaggerated and it is easier to see how they are being rendered." Miles Waterhouse
Vector Car Tutorial
This tutorial guides you through creating a vector toon based Veilside’s Fortune RX7 from scratch.
Dramatic Effects
Create a truck coming from a flame
Create a Acura commercials simmilar effect where a truck came out from the flame.
Super Slick Lighting Effects
Learn how to combine photos and brush strokes to give a car photo slick dusky lighting effects.
How To Create An Amazing Car Illustration
How to create a fierce car illustraton making use of different type of brushes.
Create a Smoky Car Crashing Shot
"We have another tutorial this week in which we will learn some menus of blur filter, which will help us create smoke effect. We will also cover up some brush technique too to make this smoke effect."
Video Tutorials
Photoshop Car Tuning – 65 videos and 3 how-to articles to learn all about Photoshop car tuning, by wonderhowto.com
YouTube – Tons of great video tutorials are hidden within YouTube. We attempt to pull out some of the best for you, sorted by view count.
56 Absolutely Brilliant and Intriguing Photoshop Video Tutorials
Friday, September 4th, 2009We see a lot of Photoshop tutorials on the net, but most of what we come across are tutorials written in a step-by-step manner. In most cases, the instructions are clear-cut and easy to follow, but few would argue against an even more effective kind of tutorial: Video tutorials.
With the emergence of video sharing websites such as Youtube and Metacafe over the recent years, we see an ever-increasing number of user-generated videos from all over the net. Some of these videos came from avid Photoshop fans sharing their tips, while others originates from websites dedicated to Photoshop techniques sharing their video tutorials on a regular basis. These videos give the most direct demonstration of how to achieve certain image effects via Adobe Photoshop. With such boundless video resources on Photoshop tips and tricks, it will be quite a waste not to utilize them to sharpen our Photoshop skills. It is for this reason we combed the internet to find some of the most intriguing Photoshop manipulation techniques captured on video. Here are 50 plus video tutorials to inspire you.
More: Check out our collection of more Photoshop Tutorials.
1. Tutsplus (PSDTuts)
How to Digitally Illustrate a Camera with Light Streaks
Create a digital illustration of a digital camera using light streaks.
High Flying Snowboard Illustration
Using wavy lines that suggest motion and paint splatters for snow to illustrate high flying snowboard.
How to Create a Dark Surreal Illustration in Photoshop
Create a dark surreal illustration using a few techniques and a handful of images. Also, apply stylish color settings and give the illustration that extra polish it needs to give it that finished look.
How to Create a Richly Ornate Typographic Illustration
Create an ornate typographic illustration using the Ayosmonika typeface.
How to Turn Humdrum Photos into Cinematic Portraits
Adding drama or a cinematic quality to a regular, humdrum portrait, along with a little bit of faking HDR.
How to Apply Textures to Uneven Surfaces
Applying texture to a flat surface, or flatly applying a texture across a whole image is simple stuff. Here, we realistically apply a texture to an uneven surface, which is much more hands-on.
How to Create Super-Malleable Effects with Colorful Lines
Colorful lines are one of the most malleable effects you can easily create in Photoshop. Create these fantastic colorful effects using only Photoshop and compose illustration with these effects.
How to Create a Fantasy Photo Manipulation
Work with a few images and create a really interesting photo manipulation to create a fantasy world.
Create an Out of Bounds Fantasy Illustration
This takes you through the process of creating a fantasy scene, make water pour out of a painting, make some sort of a absorption effect and end up with a really nice looking color for the surreal illustration.
Create a Feathered Crow Illustration
Create this crow illustration using just a few tools and resources.
Creating a Touching Story Scene in Photoshop
Create a story scene using photo manipulation and a lot of color adjustments.
2. Planet Photoshop
Gritty Photo Effect
Give a gritty and dramatic feel to your photos.
The Davinci Design
Create this eye-catching effect using just a single layer style and applying it to all the different elements of your design. This tutorial touches on alpha channels, blur filters, and layer styles.
Folds and Creases
Adding folds and creases to an age old map.
Light Through Window
Create an effect that will give a room the appearance of rays of light coming through the windows.
Graphic Texture
Make a graphic appear as though it has the texture of a brick wall.
Painting Motion
Using custom brushes and the smudge tool to create an interesting motion blur effect.
Stage Lights
Learn how to make these smoky stage lights by creating a gradient selection in quick mask mode and applying some filters and layer styles.
Vanishing Point
The Vanishing Point filter is a very powerful feature in Photoshop CS3, especially once you know a couple tricks for drawing grids, and then placing and blending images to them.
Graphic on Mug
Applying illustrated artwork to a photo realistically.
Custom Coins
Create a realistic-looking coin effect using the channels palette and the lighting effects filter.
Got a Light?
Create a realistic effect of a burning cigar.
Reflection Revisited
Here a quick way to achieve a convincing reflection on a vehicle at a 3/4 view.
Water Drops
How to simulate the look of water drops on your photo.
New Planet
Create a new & unique planet from scratch.
Sci-Fi Text Effect
Make a pretty Sci-Fi text effect using smudge tool and its finger painting feature.
Give Your Photo an Antique Look
Convert your current photos into antique-looking ones.
Beads of Sweat Effect
Creating a beaded sweat effect.
Stylized Comic Book Effect
Using this effect, you can transform anyone into a comic book character with a halftone, saturated look.
Need for Speed
Adding motion to static objects.
3. Tutorial Champ
Creating Stunningly Realistic Planets
Create amazingly realistic planets with stunning textures and colors, all from scratch.
Isolate One Color
Emphasize a certain color and make it stand out by completely isolating it. In this case, leave one color while converting the rest of the picture in to greyscale.
4. Youtube, Metacafe and Vimeo
Create Liquid Metal Chrome Mercury Blobs Using Adobe Photoshop
How to create liquid metal chrome blobs like in the Terminator movies.
Old Burnt Treasure Map Effect
Create a old burnt treasure map effect.
Human to Statue
Convert your normal pictures of people into photos of statues.
Exploding Planet
Create an awesome exploding planet effect.
Skin Smoothing
Learn how to soften skin tones and gives models a much smoother skin in your digital images.
Sin City Style
Get the Sin City comic art style in your images.
Starry Eyes
Easy way to make starry eyes in photoshop.
GlassBall
Create a glass ball apply it onto your images.
Graffiti
Make some cool background behind a graffiti.
Vanishing Objects with Clone Tool
Vanishing objects with clone tool in a few simple steps.
Fiery Explosions
Create big fiery explosions in your images in a quick and simple manner.
Create a Glass Sphere or Gel Button
Make a glass Photoshop button set into a metallic base using three flat shape layers with layer styles applied.
Toning & Burning
Use and create custom Gradient Maps and burning to render a more dramatic image.
Photo Manipulation: Mix Two Creatures Into One
Mixing two creatures into one through photo manipulation.
Digital Smoke
Easily create a very customizable digital abstract smoke.
Satin Cloth
Create a crumbled stain cloth look from scratch.
De-Aging
Make someone look younger!
Effective Eyes
Creating stunning eyes using various tools.
Create an iPhone
Produce an image of the popular iPhone using Photoshop tools.
Fairy dust
A quick example on how to create fairy dust for your photos.
Cool Dark Night
Create a cool night background for the Taj Mahal.
Photo Manipulation
Blend two objects together seamlessly. In this case, a mouth is added to an apple.
Mystical Moonlight Effect Photoshop Tutorial
Effectively turn a day time image to a night time one and create a mystical moonlight effect.
