A portfolio design is a reflection of the skills and talents of the designer that owns it. Often, the hardest web design is creating your own portfolio, and thus, can take a lot of the designer’s time to create and finish. This collection is a follow up of the showcase called, "25 Impressive Portfolio Web Designs" which you should view as well.

Feast your eyes on some of the web’s most beautiful online portfolios.

1. camellie

2. Fool’s House

3. Ed Peixoto – I create Flavors

4. COO/COO CORE Graphic

5. n.design studio

6. Fully Illustrated

7. Attack of the Web

8. Ekin Yalgin

9. Twenty3design

10. Jirí Šebek

11. Nathan Sanders

continue reading…

Not only have watercolor brush strokes become a popular trend in modern web design, but so have advanced layers of transparency (or what I call, translucence). The new Envato design has received a lot of kudos for using this effect, and this tutorial will show you how to create a similar effect, while combining it with other popular web trends.

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Tutorial Details

• Program: Adobe Photoshop CS3+
• Difficulty: Intermediate
• Estimated Completion Time: 2 hours

Step 1 – Set up the Template

Let’s set up our document. I tend to create my sites with a fixed 960px width and variable height. For this tutorial, I chose a height of 800px to ensure we have enough room for all of the content sections we would like to include. Creating the original document at the exact size you want the site to be makes it easier for creating the guides.

Next, we’ll set up our guides. Drag guidelines from the document rulers to the four edges of your document.

Now we need to allocate some space for the background we’ll create. Go to Image > Canvas Size and expand the document to 1100 pixels by 1000 pixels. This should give us plenty of area to fill in our unique background.

Fill the bottom layer with white (Shift + F5). Rename this layer as “background.” Your document should now look like the image below.

Step 2 – Create the Gradient Background

Right-click the “background” layer, and choose Blending Options. We’ll be adding a Gradient Overlay to our “background” layer. I chose a three color gradient with some blues and tans, however you can essentially choose any colors you want. The beauty of using the Blending Options for the background is that at any time, you can easily switch out colors and adjust the gradient to taste.

Your document should now look like this:

You may want to skip this step, however I feel the sharp gradient is a little too glossy for this design. We’ll add some noise to tone it down a bit.

Create a New Layer. Rename this layer “noise.” Next, fill the layer with white (Edit > Fill). Once you have the layer filled with white, we need to add some noise by applying Filter > Noise > Add Noise. Set the Amount to 400%, with a Uniform Distribution and non-Monochromatic. All of the colors of the noise will give us much more depth in our background.

Set the “noise” layer to Multiply, and set the Opacity to 5%. This should give us just enough graininess to tone down the gradient.

Step 3 – Add the Texture (Brush Strokes) to the Background

First, you’ll need to download some Brush Stroke brushes, if you don’t already have them. Here is some I’ve used in the past: “Brush Stroke.”

Create a new layer, above your “background” and “noise” layers. Rename this layer to “brush1″ (we’ll be creating multiple layers like this). Set this layer to Multiply. Choose a warm foreground color (to offset the cool tones) in our blue gradient background. I chose a warm brown: #996726. Select the brush you wish to draw, and place it in the top left of the document, ensuring that the brush stroke is outside the bounds of your guidelines (we want the background to expand outside).

Adjust the layer Opacity to 50% (so the graininess shows through). Repeat the previous two steps for multiple brushes to suit your taste. Your background should now look like the image shown below.

Congratulations, your custom, unique background is complete. Since you placed the brushes randomly, it will differentiate you from those designs that bought a similar stock background.

Step 4 – Create the Inner Opaque/Translucent Container

First, we’ll need to grab the Rounded Rectangle Tool, and set the radius to 20px. Above all of your background layers (brushes + noise + gradient), drag and draw a rounded rectangle within the original guidelines we set up. Your rectangle should be 960px by 800px. Rename this layer “container,” and Right-click the layer, and select Rasterize Layer (we’ll be making some changes to this layer later, so we might as well get this out of the way now).

To make the “container” layer look opaque, we’ll need to do a few things:

1. Set the “container” layer’s Fill to 0% (we’ll be using the Color Overlay layer style to give it some color).
2. Add a Drop Shadow: Opacity of 41%, Angle at 90, Distance of 0, Spread of 1, and Size at 10
3. Bevel and Emboss: Style of Inner Bevel, Technique set to Smooth, Depth at 100%, Direction of Up, Size at 20px, Soften of 0px, Angle at 135, Altitude at 58, Highlight Opacity at 27%, and Shadow Opacity set to 15%
4. Color Overlay: White with an Opacity of 73%
5. Stroke: Size of 1px and Opacity at 100% (to give it that extra bit of depth)

Once you’ve set all the layer styles, your “container” layer should look like this:

Step 5 – Set Up the Inner Padding Guides

To ensure that we stick with consistent padding on the “container” layer (assuming we don’t want to count our pixels each time we place an element), let’s add guides at 40px inside our original guide box.

Step 6 – A Cutout Navigation

As you saw in the Final Preview, we want to make the navigation look like it is sunken or cut out of the “container” layer. To do this, we’ll just remove some of the “container” layer and let the Layer Style’s do their magic.

To create the selection for the cutout, we’ll create a new rectangular shape in the space that we want the navigation cutout to be. Use a radius of 10px here (which is half the radius of the “container” layer), to ensure that the corner has consistent spacing where it is rounded.

If necessary, move the shape to the top right of your inner padding guide lines. Once you have the layer in place, Command-click the layer in the Layer’s Palette so it is selected. Choose the “container” layer and hit Delete. You can now hide your 10px rounded rectangle for the navigation, and your “container” layer will now show a cutout as seen below.

Notice how smooth the rounded corners are. If we would have just selected a square area and rounded the selection, the cutout corners would have looked very choppy. Also, isn’t it nice how the Layer Style’s are automatically applied to the layer, and all of the beveling and shadows we added look great.

Now we need some text. I chose Rockwell as my font (it comes standard with MS Office, but can also be purchased). Evenly space your navigation elements within the cutout as shown.

We want to give the text an etched in stone effect, and to do this, we add a drop shadow to the text (we could also add an inner shadow, however it makes the text appear thinner than it actually is). Here are the drop shadow settings I generally use.

Step 7 – Active Navigation Woven through the Page

To achieve the desired effect, we’ll create a new layer just below the text we added for the navigation. Rename this layer “active nav.” Fill this selection with any color (it doesn’t matter).

Next, we’ll need to add some Layer Styles to the “active nav” layer. I’ve provided them below (you’ll need a Drop Shadow, Gradient Overlay, Stroke, and Inner Glow).

Duplicate your “active nav” layer (Command + J), and flatten all of the layer styles. Rename this layer “active nav flattened.” We’re going to be applying some crops to this layer, and we don’t want the layer styles any longer.

Use your Selection Tool to delete the Stroke and Inner Glow from the top and bottom of the “active nav flattened” layer.

Now we need to add the shadows to make the “active nav” layer look like it’s woven through the “container” layer. We’ll create these shadows using the Ellipse Tool.

Create a black ellipse that is 20px wider than the width of the “active nav flattened” layer and roughly 5px tall. Center your ellipse on the top edge of the “active nav flattened” layer. Right-click the layer and select Rasterize Layer. Rename this layer to “top active shadow.”

We need to blur the ellipse a bit, go to Filter > Blur > Gaussian Blur and apply with with a radius of 2px. Now that the ellipse looks more like a shadow, we’ll go ahead and delete the top 50% of the shadow.

Adjust the Opacity of the “top active shadow” layer to 75%. The top shadow is done. To create the bottom shadow, duplicate the layer (Command + J), apply Edit > Transform > Flip Vertical, and move the shadow to the bottom of the “active nav flattened layer.”

Step 8 – Finish Out the Header With a Logo

Before we get to the logo, let’s finish out our header a bit. First we’ll add a couple more guides. Draw a horizontal guide 40px below the bottom of the navigation cutout as shown.

We’re going to create our separating line, which will give the impression that the “container” layer has an etching or is folded at this spot. To create this effect, draw a 1px heigh horizontal line on a new layer running the width of the “container” layer. Fill your horizontal line with a dark green (I chose mine from the background). Rename this layer “separating line.”

To get the etching feel, duplicate the “separating line” layer and fill this layer with white. Move this layer 1px down so the top of it touches the original “separating line” layer.

Now we need to add our logo. I’m not much of a logo designer, so I just chose a cool font (Gill Sans) and wrote some big text in the top left corner. Just as we did the cutout for the navigation, make a selection of the logo text and then delete it from the “container” layer. Once again the Layer Styles will adjust to the new shape, and update to it.

The asterisk was done using the exact same technique as the active navigation element, to make it appear like it is sticking out of the “container” layer.

Step 9 – Featured Portfolio Items

Once again, we’re going to use the same cutout technique that we used for the navigation section.

Create a rounded rectangle with a border radius of 10px. Make sure to allow for 40px spacing on all sides (we created the guides earlier to help with this).

Command-click the rounded rectangle layer to select it, then select the “container” layer and hit Delete. You can remove the rounded rectangle as we won’t use it any longer.

We then need to create the arrows on each side, so you can have multiple portfolio items on the front page and toggle through them in a sort of slideshow. To do this, create a 40px diameter circle with the Shape Tool. Move the circle in place on the left side, centering it on the edge of the cutout.

Duplicate the circle for the other side, and once again center it on the other edge of the cutout (horizontally and vertically).

Important

Since we aren’t working with vector masks here (and our Fill is set to 0% on the “container” layer), we need to momentarily adjust this to ensure we can add on to the “container” layer.

So, let’s set the Fill of the “container” layer to 100%. Now Merge Down (Command + E) both of the circles we created for the arrows into the “container” layer. Once you have merged down, you can then set the Fill of the “container” layer back to 0%. Here is your desired effect:

Notice how the two circles have now become part of the “container” layer.

Next we’ll need to add some arrows. You could easily create them using brackets, however I chose to create my own.

Create a rounded rectangle with a Border Radius of 3px, Width of 20px, Height of 6px; and place it right above where you want the arrow. Transform and Rotate (Command + T) the rounded rectangle by 45 degrees counter-clockwise so it is tilted. This is how we will make the point to the arrow.

Duplicate the rounded rectangle (Command + J), and Edit > Transform > Flip Vertical. Move the layer in place, such that the left corners are lined up producing a bracket. In the Layer Palette, select both rounded rectangles and merge the layers together (Command + E). Rename the layer “left arrow.” Here is how your arrow should look:

We need to add some Layer Styles to the arrow to make it fit with the rest of the design as follows:

1. Fill: 0%
2. Inner Shadow: Opacity of 50%, Angle at 120, Distance of 2, Choke set to 0, Size of 3, and Noise at 0

Duplicate the “left arrow” layer (Command + J), and Edit > Transform > Flip Horizontal. Rename this layer “right arrow,” and move it to the right side of the cutout.

One last thing we need to add for our featured portfolio items area is a shadow to give it some depth. Add a transparent to black gradient at the bottom of the cutout as shown.

To trim off any excess gradient outside of the cutout, simply Command + Click the “container” layer and hit Delete. We’ll be placing our screenshots below this layer to give the illusion of depth.

Step 10 – Adding a Portfolio Item

Take a screenshot of your favorite site (I used one of my own portfolio, ryanscherf.net). Rename this layer “screenshot.”

Add a Stroke and Inner Shadow to the “screenshot” layer use your Layer Styles:

Duplicate the “screenshot” layer, and flatten all of the layer styles (merge the “screenshot copy” layer with a new, blank layer). Rotate the “screenshot copy” layer 45 degrees counter-clockwise, just as you did for the arrows in Step 9.

Place the screenshot at the bottom left of the portfolio cutout, ensuring that the top of the screenshot sticks out of the cutout (we’re going to be giving it some depth) and making it look like it’s tucked behind the “container” layer. Crop any excess of the “screenshot copy” from the bottom as shown.

Now that we have our screenshot in place, let’s add a short description to the right. Nothing too fancy here, but still trying to stick with our theme of depth and layers.

Create some text with an almost white (or very light blue/green) color. Use the same drop shadow etching technique from the navigation (Angle at -60 degrees, Distance of 1px, and Size of 1px).

Create an opaque square behind the text. I used an all black layer, at 30% opacity. The effect should look like this:

We need some navigation dots like the iPhone views. We’ll create one active dot, that will use the exact same Layer Styles as the “active nav” layer (hopefully you didn’t delete it), and an inactive dot which uses the Layer Styles from the “left arrow” layer.

Note: Reusing Layer Styles is important not only because it saves time from having to recreate similar styles, but also because it will keep your design consistent throughout.

Create a circle using the Shape Tool, with a diameter of 20px (I like my navigation dots large, as I find sometimes they are too hard to click and navigate through). Right-click the “active nav” layer and select Copy Layer Style. Select the circle from your Layers Palette, Right-click, and select Paste Layer Style.

Repeat these steps for as many inactive dots as you’d like, making sure to use the layer style from the “left arrow” layer.

Step 11 – Label it With a Ribbon

We need to let our visitors know exactly what we are showcasing here. We’ll create a ribbon using the exact same technique as we used for the “active nav” layer, which was outlined above in Step 7.

In this tutorial, we'll explain how to create a quick portfolio page by using the Step and Repeat, Paragraph Styles and object elements. We will also use Adobe Bridge.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe InDesign CS4
• Difficulty: Beginner
• Estimated Completion Time: 1 hour

Step 1

Open up a new document in InDesign. Choose Tabloid as the page size and uncheck the Facing Pages box, since we will only use one page. Set the Margins to 3 picas and the Bleed to 9 points.

Step 2

Go to the Layers palette and create three layers: One labeled as “bg,” one as “thumbnails,” and one as “text.”

Step 3

Click on the “bg” layer and create a rectangle with the Rectangle Tool (M). You can drag along the bleed lines for orientation. Then fill it with a dark gray to black linear gradient from the Swatch Palette.

Step 4

Click on the “thumbs” layer. Create another rectangle (18p by 12p) and align it to the page margin.

Step 5

Select the rectangle, fill it with white and then go to Edit > Step and Repeat (Command + Alt + U) and apply the settings you see in the image below. I already calculated the distance for you so we will have three rectangles on the page.

Step 6

Repeat Step 5 and this time set the Horizontal Offset to 0, the Vertical Offset to 23p, and Repeat Count to 2.

Step 7

Select all the white rectangles and apply an Outer Glow in black to them. You can find those effects under Object > Effects.

Step 8

The next thing we want to do is to open up Adobe Bridge and go to the folder with our images. If you don’t have one, create one in the same location that your InDesign file is and place nine photos of your choice. I picked nine illustrations I created for Vectortuts+. Select those nine images and with the mouse still clicked, drag the pointer over to InDesign (on the taskbar).

Step 9

You will see a little thumb next to the mouse curser. Now if you click on the rectangle, the images will be placed there. Click each rectangle once and fill them with your images.

Step 10

Select all the rectangles with images and go to the toolbar and click the Center content button. This will center all the images to the rectangle.

Step 11

With the rectangle still selected, apply a Stroke of 10pt white and align the Stroke to the Center.

Step 12

Let’s move on to the text. Create a text box with the Text Tool (T). I typed a title, a sub title and a link. I already applied a style to each line so you can see what it looks like.

Step 13

Open up the Paragraph Styles Palette (F11). On the top-right corner, click on the small arrow, then choose new Paragraph Style and give it the name "title."

Continue Learning…

You don’t have to be a coding nerd to be able to build your own online design portfolio. There’s a bunch of handy sites and communities out there that are allowing designers to showcase their work and flourish with with work requests. Here’s 10 solutions to easily create an online portfolio of your own, giving you the platform to showcase your work to the world.

Krop

Krop’s Creative Database is an hosted portfolio solution that allows you to spend your energy promoting your portfolio, not building it! There’s a range of brilliant minimalist themes that allow your work to shine. There’s two options available, free and premium. The free version is limited to 10 images while the premium version opens up all features for $9.99 a month.

Pros: Popular portfolio site with the handy resource of the Krop job board right next door.

Cons: You’re limited to 10 images if you’re a cheapskate!

Carbonmade

Carbonmade is a lickety-split online portfolio sans the headache, that supports images, flash and video content. Carbonmade is structured as individual projects, allowing you to upload multiple images based around each piece of work you’ve created. Carbonmade also has a free and premium version, with the free account allowing 5 projects and 35 images, and the premium account at $12.00 per month giving space for 50 projects 500 high-res images.

Pros: Nice Javascript navigation and effects spice up the experience of browsing your portfolio.

Cons: Themes are limited, with an option of a black or white colour scheme.

Coroflot

Coroflot is a fast and easy way to get your portfolio online and in front of the right people. It’s free and there’s no restrictions on file uploads. What’s more, you can network with other members and receive notifications of job offers.

Pros: A great free solution that’s not limited in features.

Cons: No options for portfolio layout or style.

Shown’d

Shown’d is a free portfolio solution that helps you connect with employers and includes some handy options such as multiple image uploads and the ability to import from Flickr. The option of embedding your showcase in an external web page also opens up some useful doors.

Pros: A free solution with handy features and customisable layouts.

Cons: Not quite as popular as the mainstream portfolio websites and communities.

Behance

Behance is a free platform for the world’s leading creative professionals and is home to some of the big names in the creative industries. Behance portfolios are subject to millions of views and is a good source of work for many designers and illustrators.

Pros: Highly popular and well known website, resulting in good exposure for your work.

Cons: Registration is invite only, so you’ve got to be good!

DeviantArt

DeviantArt is the largest art community in the world. It’s a free platform that allows users to display, share and sell their artwork. DeviantArt is a great place to receive feedback and communicate with like minded creatives and can be a handy place to find free resources to use in your own work.

Pros: Well known website that allows unlimited uploads.

Cons: Is seen as more of an art community than a place to find professional portfolios.

Continue Learning…

Retro Futurism is the term used to describe artwork depicting a view of the future, from the eyes of the past. The artwork itself also has the appearance of something old and vintage, basically blending both past and future into one style of artwork that blows your mind! Digital artists are creating their own modern interpretations of the retro futurism style, often taking inspiration from the game covers of retro consoles such as the Atari or Commodore. Check out this collection of some amazing examples of contemporary takes on the retro futuristic style, and continue on to a bunch of handy tutorials giving tips on how to create a stunning design of your own.

Hannibal Chew

Sakke Sioni

Pablo Alfieri

Joao Oliveira

James White

Nicolas Alexander

Alex Beltechi

Peter Nudo

Pinar Demirdag

Click for more designs…