http://www.tiquinotrading.com/

http://www.pr4.com/

http://www.laconfection.fr/

http://www.dotnetcmsportal.com/

http://apige.com/

http://www.artificiallandscapes.co.uk/

http://titaniumdeveloper.co.uk/

http://vilniausdenticija.lt/

http://html5master.com/

This tutorial is another collaboration with a very good friend Ciursa Ionut. In this web design tutorial we will create a portfolio web layout using fabric textures. You will be taken through the process of designing the logo using Adobe Illustrator, creating spotlights for the "services" area and how to apply textures to the layout in a subtle way that will increase the quality of the final result. Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

• 960 Grid System
• Fabric patterns
• Subtle grunge brushes
• Oswald font
• Twitter birds

Introduction

In this tutorial we will use the 960 Grid System. Download it and unzip the archive file. Then open the “960_grid_12_col.psd” file in Photoshop.

The 12 red columns that you see is the grid that we are going to use. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” layer. This PSD file contains some guides as well, which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Command/Ctrl + ;. I usually hide the red bars and activate the guides whenever I need them.

Also, smart guides are very useful when designing web layouts. Activate/deactivate them by going to View > Show > Smart Guides. They will help you align each layer depending on the position of other layers.

During this tutorial you will be asked you to create shapes with certain dimensions. When you create a shape you will see its exact width and height in the Info panel (Window > Info).

Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. Let’s get started!

Step 1: Setting up the document

Open the "960_grid_12_col.psd" file in Photoshop. Then go to Image > Canvas Size and set the width to 1200px and the height to 2400px. This will give us enough space to work with.

Step 2: Creating the header of our web layout

Create a new group and name it "Header". Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 520px and the color #595e61. Name this layer "header bg", right-click on it and select Convert to Smart Object.

Go to Filter > Noise > Add Noise and use the settings from the image below. This will create a nice subtle texture.

Download this pack of fabric patterns and open the .PAT file in Photoshop. Then double-click on the "header bg" layer to open the Layer Style window and add a Pattern Overlay effect with the settings from the image below and a pattern from the pack you downloaded.

Step 3: Creating the navigation background

Select the Rectangle Tool (U) and create a rectangle at the top of your document with the height 120px and the color #000000. Name this layer "navigation bg". Set the Fill of this layer to 20%, double-click on it and use the settings from the image below for Inner Shadow.

Now we will add a circle to the "navigation bg" layer to make room for the logo later on. Select the Ellipse Tool (U) and click on the "Add to shape area (+)" button from the option bar above your image.

Click on the vector mask of the "navigation bg" layer to make it active. Then using the Ellipse Tool, hold down the Shift key and create a circle in the middle of the navigation bar with the radius 140px. Take a look at the following image for reference.

Step 4: Creating a dotted line pattern

Create a new document (Command/Ctrl + N) with the dimensions 3px by 1px. Zoom in as much as you can. Then select the Rectangular Marquee Tool (M) and create a square selection as you see in the following image. Create a new layer and fill the selection with white.

Hide the "Background" layer by clicking on its eye icon. Then hit Command/Ctrl + D to deselect. Save your pattern by going to Edit > Define Pattern. Give your pattern a name and click OK.

Go back to your web layout document. Select the Line Tool (U) and set the Weight to 1px. Then hold down the Shift key and create a horizontal line at the bottom of your navigation bar.

Set the Fill of this layer to 0% and the Opacity to 20%. Double-click on this layer to open the Layer Style window and add the pattern you created earlier.

Now we need to erase the area of the dotted line that goes over the circle. Use the Rectangular Marquee Tool (M) to select that area. Then go to Layer > Layer Mask > Hide Selection.

Step 5: Adding gradients to the header background

Use the Rectangular Marquee Tool (M) to create a selection as you see in the image below (1). Then go to Layer > New Fill Layer > Gradient and use the settings from the following image (2).

Click on the mask of this layer to make it active. Then select a black soft brush (B) and paint with it over the area where the gradient covers the navigation bar circle (3). Set the opacity of this layer to 3% (4).

Now we will add a radial gradient at the bottom of the header background. Hold down the Command/Ctrl key and click on the thumbnail of the "header bg" layer to load a selection of it. Then go to Layer > New Fill Layer > Gradient and use the settings from the image below (1).

With the Gradient Fill window still opened, click on your image and drag down. Set the blend mode of this layer to Soft Light 40%.

Step 6: Adding subtle grunge brushes to the header background

Download this pack of brushes and open them in Photoshop. Create a new group and name it "brushes". Then create a selection of the "header bg" layer (hold down the Command/Ctrl key and click on its thumbnail). Make sure that the "brushes" layer is active and go to Layer > Layer Mask > Reveal Selection. Now everything we put inside this group will be visible only over the header area.

Create a new layer inside this group. Set the foreground color to white. Select the Brush Tool (B) and use some of the brushes you downloaded to add a subtle grunge effect to the header. Create a new layer for each brush you use and adjust the opacity of each layer. Then set the blend mode of the "brushes" group to Soft Light. Take a look at the following image for reference.

Step 7

Select the Line Tool (U), hold down the Shift key and create a horizontal line with the Weight 1px and the color #50565a. Name this layer "1px line" and put it at the bottom of the header area.

Duplicate this layer (Command/Ctrl + J), select the Move Tool (V) and hit the up arrow key on your keyboard to move it one pixel up. Change the color of this line to #8e9496.

Step 8: Creating the logo

To create the logo we will use both Adobe Photoshop and Illustrator. First, we will create the text and a circle with dashed stroke in Illustrator and then we will complete the logo using Photoshop.

Fire up Adobe Illustrator and create a new document. Select the Type Tool (T) and write "My Folio". Put each word in a separate object. The font that I used is called Akzidenz-Grotesk Condensed Medium Italic.

Select the two text objects using the Selection Tool (V) and go to Object > Expand. This will make the text layers editable so we can modify the anchor points.

Select the word "My" and move it down to connect the bottom area of the letter "Y" with the top area of the letter "F".

Use the Direct Selection Tool (A) to select the anchor points from the bottom of the "Y" letter, as you see in the image below. Then hit the Backspace key to delete them.

Use the Pen Tool (P) to reconstruct the bottom area of the letter "Y" and connect it to the "F" letter. Make sure that you close the path. Take a look at the following image for reference.

Now we need to create a circle with a white dashed stroke. Select the Ellipse Tool (L), hold down the Shift key and create a circle with no Fill and a 1pt white Stroke. Then go to the Stroke panel (Window > Stroke) and use the settings from the following image.

Change the color of the text to white. I added a grey rectangle underneath all objects in order to see the text and the circle.

Finishing the logo in Adobe Photoshop

Go back to Photoshop, create a new group and name it "Logo". Then select the Ellipse Tool (U) and create a circle with the dimensions 125px by 125px and the color #2e3134.

Name this layer "circle", double-click on it to open the Layer Style window and add a Pattern Overlay effect using the following settings. The leather pattern that I used is from the pack you downloaded at the beginning of this tutorial.

Copy the text objects from Illustrator, go back to Photoshop and paste them as a smart object. Use Free Transform (Command/Ctrl + T) to change the size of this layer and put it in the center of the dark circle. Add a Color Overlay effect to this layer using the color #f4f4f4.

Copy the dashed circle from Illustrator and paste it in Photoshop as smart object. Use Free Transform (Command/Ctrl + T) to change the size of this layer and put it in the middle of the dark circle. Name this layer "dashed circle" and set its opacity to 60%.

Duplicate the "dashed circle" layer (Command/Ctrl + J). Use Free Transform (Command/Ctrl + T) to change the size of this layer until it reaches the curved edge underneath the logo. Name this layer "bottom border".

Use the Rectangular Marquee Tool (M) to select the upper area of the circle as you see in the image below. Then go to Layer > Layer Mask > Hide Selection. This will leave a dotted curved line underneath the logo, just like we want.

Step 9: Adding the navigation

Create a new group and name it "Navigation". Select the Type Tool (T) and write the name for your navigation menu items using the font Oswald and the color white. Spread your navigation items equally in the left and right hand side of the logo.

Creating the style for the active menu item

Select the Rounded Rectangle Tool (U) and set the Radius to 4px. Then create a rounded rectangle underneath one of our navigation items with the height 32px and the color black.

Set the Fill of this layer to 25%, double-click on it to open the Layer Style window and use the settings from the following image.

Step 10: Creating the "Featured" area

Create a new group and name it "Featured". Select the Type Tool (T) and write the name of your project using the font Oswald with the size 22pt and the color white. Put this layer in the left hand side of the layout and at 50px underneath the navigation bar.

Select the Line Tool (U) and create a horizontal line with the width 300px. Set the Fill of this layer to 0% and the Opacity to 50%. Double-click on this layer and add the dotted line pattern that you created earlier in this tutorial.

Use the Type Tool (T) to add a block of text underneath the horizontal line. Use the font Helvetica with the color white and the size 13pt. Go to the Character panel (Window > Character) and set the leading (the distance between lines of type) to 24 pt to make the text more readable.

Creating a "Read More" button

Create a new group and name it "button". Select the Rectangle Tool (U) and set the Radius to 4px. Then create a rounded rectangle underneath the block of text with the size 110px by 30px and the color #9ca2a6. Name this layer "button".

Duplicate the "button" layer (Command/Ctrl + J) and move this new layer underneath the original one. Select the Move Tool (V) and hit the down arrow on your keyboard once to move this layer one pixel down. Set the opacity of this layer to 50%.

Duplicate the previous layer (Command/Ctrl + J) and change its color to #54585b. Move this layer one pixel down and set its opacity to 100%.

Now you should have three "button" layers. Double-click on the top one to open the Layer Style window and use the settings from the image below. The color that I used for the Stroke effect is #54585b.

Hold down the Command/Ctrl key and select the two "button" layers from the bottom. Right-click on one of them and select Convert to Smart Object.

Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay. This will add a subtle 3D effect to the button.

Hold down the Command/Ctrl + Shift keys and click on the thumbnail of the "button" smart object and then on the vector mask of the "button" layer. This will create a selection of the entire button. Create a new layer and fill the selection with white. Hit Command/Ctrl + D to deselect.

Right-click on this layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the image below. Set the blend mode of this layer to Multiply 25%.

Now select the Type Tool (T) and write "Read More" on your button using the font Oswald with the size 15pt and the color white. Double-click on this layer to open the Layer Style window and use the settings from the following image for Drop Shadow.

Step 11: Adding an image slider

Create a new group and name it "image slider". Select the Rectangle Tool (U) and create a rectangle with the dimensions 620px by 300px. Name this layer "image_holder", double-click on it to open the Layer Style window and use and use the setting from the following image for Outer Glow.

Open an image in Photoshop that you want you feature in this area and move it into your web layout document using the Move Tool (V). Name this layer "image" and put it over the "image_holder" layer. Then right click on it and select Create Clipping Mask. Now your image will be visible only over the area of the "image_holder" layer.

Creating the image slider arrows

Select the Custom Shape Tool (U), right-click on your image and select one of the arrow shapes. Then create an arrow in the right hand side of your image slider using the color #e2e6e8.

Name this layer "right arrow", double-click on it to open the Layer Style window and use the settings from the following image. Right-click on this layer and select Convert to Smart Object. Then set its opacity to 40%.

Duplicate this layer (Command/Ctrl + J) and name the new one "left arrow". Then go to Edit > Transform > Flip Horizontal. Move this arrow in the left hand side of the web layout. Take a look at the following image for reference.

Creating the navigation bullets for the image slider

Create a new group and name it "navigation bullets". Select the Ellipse Tool (U), hold down the Shift key and create a circle with the dimensions 10px by 10px and the color #4d5357. Name this layer "navigation bullet".

Duplicate this layer (Command/Ctrl + J) a few times and arrange them as you see in the image below.

Select the Ellipse Tool (U) again and create a smaller circle in the middle of a navigation bullet to indicate the active image. For this circle use the color #9ca2a4.

Step 12: Creating "Services" area

Create a new group and name it "Services". Select the Rectangle Tool (U) and create a rectangle with the height 450px and the color #fafafa.

Name this layer "services bg", right-click on it and select Convert to Smart Object. Then go to Go to Filter > Noise > Add Noise and use the settings from the following image.

Double-click on this layer to open the Layer Style window and use the settings from the following image for Inner Shadow and Outer Glow.

Select the Line Tool (U) and drag a horizontal line at the bottom of the "services" area using the color #d2d2d2. Name this layer "1px line".

Duplicate this layer (Command/Ctrl + J) and change the color of the new line to white. Then move this layer 1px up.

Step 13: Adding the content for the "Services" area

Select the Type Tool (T) and write the word "Services" with the size 38pt and the color #5b656a. Put this layer in the left hand area of the web layout and at 40px underneath the "featured" area.

Create a new group and name it "web design". Create another group inside this one and name it "spotlights". We will design a 3D-looking room with some spotlights over an image.

Select the Rectangle Tool (U) and create a rectangle with the dimensions 300px by 100px and the color #3b444a. Name this layer "border", right-click on it and select Convert to Smart Object.

Go to Go to Filter > Noise > Add Noise and use the settings from the image below. Then double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay.

Now I will show you how to create the 3D-looking room. First, select the Rectangle Tool (U) and create a gray rectangle with the dimensions 286px by 86px and put it in the center of the "border" rectangle. This is a temporary layer that will help us create the walls.

Select the Rectangle Tool (U) and create a rectangle with the height 22px and the color #434f57. Make sure this layer does not go over the gray rectangle. Name this layer "floor", double-click on it to open the Layer Style window and use the settings from the following image.

Create a new rectangle with the dimensions 240px by 64px and the color #3b4851. Name this layer "front wall" and position it as you see in the image below. Ten add a Gradient Overlay effect to this layer.

Using the Direct Selection Tool (A), select the upper right hand corner of the "floor" layer and move it to the left. Then select the upper left hand corner and move it to the right. Take a look at the following image for reference.

Create a rectangle in the left hand side of the 3D room with the color #39444b. Use the Direct Selection Tool (A) to reposition the bottom right hand corner of this rectangle, as you see in the image below. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Duplicate this layer (Command/Ctrl + J) and move it to the right. Then change the angle of the Gradient Overlay to 0.

Create a new rectangle at the top of the 3D room using the color #505e67. Name this layer "ceiling" and use the Direct Selection Tool (A) to adjust the bottom corners like you did for the "floor" layer. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Now you can delete the gray rectangle you added at the beginning of this step. Below you can see how my "3d room" group looks like.

Right-click on the "3d room" group and select Convert to Smart Object. Then go to Go to Filter > Noise > Add Noise and use the settings from the following image.

Double-click on this layer to open the Layer Style window and use the settings from the image below.

Step 14: Creating the spotlights

Create a new group and name it "top lights". Then select the Ellipse Tool (U) and create a white circle, as you see in the image below. Right-click on this layer and select Convert to Smart Object. Then go to Filter > Blur > Radial Blur and use the settings from the image below. Name this layer "light 1".

Create a new circle, bigger than the previous one. Name this layer "light 2" and convert it to smart object. Then apply a Radial Blur Filter with the same settings.

Repeat the process one more time with a bigger circle. Name this layer "light 3". Take a look at the following image for reference.

Group the three "light" layers together and set the opacity of each one as follows:

• "light 1" – 70%
• "light 2" – 50%
• "light 3" – Soft Light 40%

Duplicate the group two times and arrange your spotlights as you see in the image below.

Hold down the Command/Ctrl + Shift keys and click on the thumbnail of each "light" layer to select them. Then go to Layer > New Adjustment Layer > Hue & Saturation and use the settings from the following image. This will add a subtle blue color to the lights.

Some of the lights might go over the border of the 3D room. To correct this, hold down the Command/Ctrl key and click on the thumbnail of the "3d room" layer. Then click on the "top lights" group to make it active and go to Layer > Layer Mask > Reveal Selection.

Create a new group and name it "floor lights". Then use the Ellipse Tool (U) to create three ellipses as you see in the image below. Convert each layer to a smart object. Then add a Gaussian Blur filter and a Noise filter to each layer. Set the opacity of these layers to 40%.

Then you can add an image in the middle of the 3d room that represents the design service you added. I used the Webdesign Tuts+ logo.

Step 15

Select the Rectangle Tool (U) and create a white rectangle with the dimensions 300px by 210px underneath the spotlights area. Name this layer "content bg", double-click on it to open the Layer Style window and use the settings from the following image for Outer Glow.

Select the Pen Tool (P) and create a triangle shape using the color #d1d6da, as you see in the image below. You can activate the guides to help you create this shape.

Name this layer "top triangle", double-click on it to open the Layer Style window and use the settings from the following image. The color that I used for the Stroke effect is #c5cace.

Select the Type Tool (T) and add the content for this service box. For the headline use the font Oswald with the size 20pt and the color #747d82.

For the block of text use the font Helvetica Regular with the size 13pt and the color #5f6c74. Also, set the leading of this text layer to 24pt from the Character panel.

Create a new black dotted line pattern just like you created the white one at the beginning of this tutorial. Then use the Line Tool (U) to drag a horizontal line between the headline and the block of text. Set the Fill of this layer to 0% and apply the pattern you created.

Copy the "Read more" button from the "featured" area (right-click on its group and select Duplicate Group). Then move the new button underneath the block of text from the "services" area. Take a look at the following image for reference.

Step 16

Duplicate the "web design" group two times and arrange the new columns as you see in the image below. Then replace the headlines and the images that are under the spotlights.

Step 17: Creating the "Portfolio" area

Create a new group underneath the "Services" group and name it "Portfolio". Then select the Rectangle Tool (U) and create a rectangle with the height 590px and the color #f1f1f1 underneath the "services" area.

Name this layer "portfolio bg", right-click on it and select Convert to Smart Object. Go to Filter > Noise > Add Noise and use the settings from the following image. Then double-click on this layer to open the Layer Style window and apply one of the fabric textures you downloaded.

Select the Type Tool (T) and write "Portfolio" in the upper left corner of this area. I used the font Oswald with the size 38pt and the color #5b656a.

Step 18: Adding the portfolio items

Create a new group and name it "images". Then select the Rectangle Tool (U) and create a rectangle with the dimensions 180px by 140px. Name this layer "image_holder".

Duplicate this layer (Command/Ctrl + J) and move the new rectangle to the right at 10px distance from the first one. Continue to duplicate this layer until you create a grid like you see in the image below.

Open some images that you want to showcase in the "portfolio" area. Drag each image over one "image_holder" layer, right-click on the layers of the images and select Create Clipping Mask. This will put an image inside each rectangle.

In the image below there are two columns where I did not add any images. We will use that area to add a detailed portfolio item.

Step 19: Adding a detailed portfolio item

Create a new group and name it "active project". Select the Rectangle Tool (U) and create a rectangle over the two columns that have no images using the color #595e61.

Select the Rectangle Tool again and create an image holder with the dimensions 330px by 160px. Open an image that you want to display in this area and put it over the "image_holder" layer. Right-click on the "image" layer and select Create Clipping Mask.

Select the Type Tool (T) and add some content to this area. For the headline use the font Oswald with the size 22pt and the color white. For the block of text use the font Helvetica Regular with the size 13pt and the color #fafafa.

Duplicate one of the previous "Read more" buttons and put it underneath the block of text from the "active project" area.

Create a new group and name it "close button". Select the Rectangle Tool (U), hold down the Shift key and create a square with the dimensions 20px by 20px and the color #484c4f. Put this rectangle in the upper right corner of the "active project" area.

Select the Line Tool (U) and create two diagonal lines to form an "X" shape. Hold down the Shift key to drag a line at 45°.

Step 20: Creating the "Blog" area

Create a new group and name it "blog". Select the Rectangle Tool (U) and create a rectangle with the height 340px underneath the "portfolio" area using the color #fafafa.

Right-click on this layer and select Convert to Smart Object. Go to Filter > Noise > Add Noise and use the settings from the image below.

Select the Line Tool (U) and create a horizontal line at the top of this rectangle using the color #d2d2d2. Duplicate this layer (Command/Ctrl + J) and move the new line one pixel down. Change the color of this line to white.

Step 21: Adding blog posts

Select the Type Tool (T) and write "Blog" in the upper left corner of this area using the font Oswald with the size 38pt and the color #5b656a.

Create a new group and name it "post #1". Select the Rectangle Tool (U) and create an image holder with the dimensions 180px by 140px. Open an image that you want to display in this area and drag it over the "image_holder" layer. Right-click on the "image" layer and select Create Clipping Mask to make it visible only over the area of the "image_holder" layer.

Select the Type Tool (T) and add some content next to the image. For the headline use the font Oswald with the size 22pt and the color #747d82. For the block of text use the font Helvetica Regular with the size 13pt and the color #5f6c74. Also, set the leading of this paragraph to 24pt. Then add a "Read more" button underneath the block of text.

Duplicate the "post #1" group and move the new one to the right. Then you can change the image and content for this new blog post.

Step 22: Creating the "Footer" area

Create a new group and name it "footer". Duplicate the "header bg" layer (Command/Ctrl + J) from the "Header" group and move it at the bottom of the layout, underneath the "Blog" area. Name this layer "footer bg".

Hold down the Command/Ctrl key and click on the thumbnail of the "footer bg" layer to select it. Then go to Layer > New Fill Layer > Gradient and use the settings from the image below. While the Gradient Fill window is still opened, click on your image and move the gradient up, as you see in the following image.

Set the blend mode of this layer to Soft Light 40%.

Select the Line Tool (U) and create a horizontal line at the top of your "Footer" area using the color #50565a. Name this layer "1px line".

Duplicate this layer (Command/Ctrl + J) and move it one pixel down. Then change the color of this line to #8e9496.

Step 23: Creating the "About" area

Now we will split the footer into three columns: "About", "Twitter" and "Contact".

Create a new group and name it "about". Select the Type Tool (T) and write "About me" at the top of the first column. Leave a distance of 40px between the top edge of the "footer" area and this text layer.

Select the Line Tool (U) and create a horizontal line underneath the headline. Set the Fill of this layer to 0% and the opacity to 50%. Then apply to this layer the white dotted line pattern that you created in this tutorial.

Use the Type Tool (T) to add a block of text underneath the dotted line using the font Helvetica Regular and the color #fafafa. Set the leading of this paragraph to 24pt from the Character panel. Then add a "Read more" button underneath the block of text.

Step 24: Creating the "Follow me" area

Create a new group and name it "follow me". Then add a headline and a couple of tweets in this area. Use the same dotted line to separate the blocks of text.

Add a "Read more" button underneath the tweets. Select the Type Tool (T) and change the text into "Follow me".

Download this set of Twitter birds and move a couple of them into your web layout document, underneath the "follow me" area. Add a Drop Shadow effect to these bird layers using the settings from the image below.

Step 25: Creating the "Contact" area

Create a new group and name it "Contact". Then add a headline to this area and a dotted line underneath it.

Use the Rectangle Tool (U) to create the contact form, as you see in the following image. Fill each rectangle with the color #eff0f0. Then add an Inner Glow and a Stroke effect to each rectangle layer. The color that I used for the Stroke layer style is #4d5254.

Select the Type Tool (T) and write inside each rectangle what it represents (name, subject, email, message).

Add a "Read more" button button underneath the Contact Form and change the text to read "Send".

Step 26: Adding the "Copyright" area

Create a new group and name it "Copyright". Then select the Rectangle Tool (U) and create a black rectangle as you see in the image below. Name this layer "copyright bg" and set its the blend mode to Overlay 20%.

Select the Line Tool (U) and create a horizontal line at the top of the rectangle you created earlier. Set the Fill of this layer to 0% and the Opacity to 35%. Then apply the dotted line pattern that you created in this tutorial.

Select the Type Tool (T) and add a copyright statement in the middle of the dark rectangle. Use the font Helvetica Regular with the size 12pt and the color #b1b5b7.

Final Result

We’re finished. Below you can see the final result of this tutorial. Click on the image to see the full-size version.

I hope you enjoyed this tutorial and you learned some new things for designing web interfaces. Leave any comments or questions you have in the comments section below.

Psdtuts+

The Multi Column Layout Module has been introduced to help us create columns quickly and easily using CSS3 only. In this tut I’m going to be taking a look at some of its properties and demonstrate them through a series of examples.

Introduction

Anyone who has tried to create multiple columns in the past using CSS will already know that this type of layout has been achievable for a long time. However, this has often resulted in the use of hacky techniques and floats. More often that not this has been quite time consuming and definitely not the easiest of layouts to create. The truth is creating multiple columns using CSS has been an extremely awkward process up until now. The multi column layout module offers more flexibility and control over previous CSS methods.

The new approach, which is an extension to the current CSS box model, allows content to run from one column to another and makes it easily adaptable for different viewing devices and dynamic data.

Browser Support

Ok, so before you get too excited about this new module it’s important to understand which browsers support it, which prefixes to use and a few browser limitations.

Supported Browsers

• IE10+
• Firefox 5+
• Chrome 12+
• Safari 3.2+
• Opera 11.1+

Both Chrome and Safari use the ‘-webkit-’ prefix. Firefox uses the ‘-moz-’ prefix. Opera and IE support all the properties without the need for a prefix. For some reason Chrome, Safari and Firefox don’t support break-after or column-fill properties, whilst Safari and Firefox don’t support column-span. Saying that, I’m sure these properties will soon be available in future updates.

A Quick Example

Before we take a look at the properties used in the multi column layout module I’m going to show you a quick example to help you understand how it works a little easier.

Here’s a preview of how the columns will be rendered:

First, the html for this example it super simple. We simply create a div with a class of ‘columns’ and a bit of a lorem ipsum dummy text.

  <div class="columns">  <p>Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis odio sed pulvinar ridiculus sit. Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis odio sed pulvinar</p>
</div>

The multi column layouts module is quite easy to describe and understand in CSS. Here’s an example:

.columns{
 column-count: 4;
 column-gap: 10px;
}

First we use ‘column-count’, to dictate how many columns are needed (I’ve used 4 in this example).

We then say how big we want the gutter (the gap between the columns) to be. In this case I’ve used 10px.

By adding these properties it allows our lorem ipsum dummy text to flow between the 4 columns. It really is this simple to get started. By now you should be starting to see how simple this is to use.

CSS Properties

Let’s take a look in more detail at some of the properties which can be found in the multi column layout module.

Column Count and Width

Setting the number or the width of columns is important to the multi column layout content. Columns should be set by using either ‘column-width’ or ‘column-count’, but should never be used together. Both of these properties are by default set to ‘auto’.

Column Width

‘Column width’ does exactly what it says on the tin. It allows you to specify a fixed width for the columns. The measurement of this width can be carried out in the standard way using px, ems etc. Depending on what you enter for the column width it can vary and may be slightly wider or narrower to fit the space available. If this property is set to ‘auto’, then this means the width of the columns will be dictated by other properties, such as the one below.

Value options column-width: (length) | auto;

Column Count

Should you want the layout to be split into a number of specified columns then this is the property that you would opt for. By setting the value of this the content is divided into the required amount of columns. If this property is set to ‘auto’, then this means the number columns will be decided by other properties, such as ‘column-width’.

Value options column-count: (number of columns) | auto;

Columns

‘Columns’ is effectively a shorthand property that allows you to set the ‘column width’ and ‘column count’. Here are a view valid values that you might associate with ‘columns’:

columns: 12em;  /* column-width: 12em; column-count: auto */
columns: auto 12em; /* column-width: 12em; column-count: auto */
columns: 2;   /* column-width: auto; column-count: 2 */
columns: 2 auto;  /* column-width: auto; column-count: 2 */
columns: auto;  /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */

Column Gap

‘Column gap’ give us the opportunity to add a space between each of the columns and gives the content room to breathe. We specify the width of the gap using standard CSS measurements. The width of the gap that you specify cannot be negative.

Value options column-gap: (length) | normal;

Column Rule

‘Column Rule’ effectively puts a border down the middle of the ‘column-gap’. Therefore, to enable this, a ‘column-gap’ width must be specified that has the same or larger value than the column rule. The column rule also has several separate sub properties as well as a shorthand version. This shorthand version works in the same way as the shorthand ‘border’ property. You can see this below:

column-rule-width:1px;
column-rule-style: solid;
column-rule-color: #000;
column-rule: 1px solid #000; /* This is the shorthand version */

Column Span

‘Column-span’ allows us to span across all of the columns. If we take our simple example from earlier and add a h1 title to our content, we can easily get this h1 tag to span the entire 4 columns by adding column-span:all to it. Have a look at this demonstration:

h1{
 column-span: all;
}

Value options column-span: all | none;

Column Fill

The ‘column-fill’ property gives us two controls for setting how the amount of the content is balanced over the columns. If set to ‘balance’ then the variation in the column length will be minimized and all lengths will be as equal as possible. If set to ‘auto’ then the columns will be filled in order and (for instance) may result in the 4th of 4 columns having less content than the 3 previous columns. If balance was set on this then it would allow all 4 columns to be roughly of equal height. This property solves the problem of undesirable gaps being left in the content.

Overflow

‘Overflow’ should be used to control what happens if the content overflows the columns. If for instance the main ‘columns’ div had a fixed width and the content of the columns extends this then we can control whether this should be shown or clipped using the ‘overflow’ property.

In the example below we can see that the columns overflow the div. This is due to overflow not being set to ‘hidden’ on the parent element.

Example 1

The old Method for Creating Multiple Column Layouts

I’ve put together a few examples which you can download at the top of this page. I have done this to show how you might use this new module in different situations so that you can see how easy it is to change the layout of your code just by changing a few properties in the CSS markup.

This first example demonstrates the old method for creating multiple columns using CSS3. It has been achieved by adding a ‘float:left’ to the ‘navigation’, ‘the main content’ and the ‘sidebar’.

Sure, this works OK and you can achieve the desired effect. However, the flexibility really is quite restricted. If you were wanting to add extra columns or change the layout then you have to rely on adding extra markup, moving elements around, and it can be quite tedious. This new module changes all that.

Example 2

The New Method

This example above shows the new method for creating the columns. This time, rather than using it on the main body elements I have added the CSS3 Multiple Column module to the ‘main content’ where you can see that the content has been divided into 3 columns.

To change the number of columns, it’s as simple as changing a number.

Example 3

Other Features

In this last example I’ve kept with using it on the main content, but also added some extra divs to show how you can change the layout quite simply. I’ve also added ‘span:all’ to the lower ‘h1′ tag so that the headline stretches across ‘all’ columns. Lastly, I’ve added a rule to it by including ‘column-rule: 1px dotted #999999;’ to the CSS.

It’s all worth noting at this point that I’ve also included a javascript fallback in the examples, so that they work on browsers which don’t support the multi column layout module yet.

Fall Backs

As with any new CSS module; new toys save us time, but have an interim or crossover period that can sometimes take quite a while before competent cross browser compatibility is reached. We’re currently in the in between stage, where some browsers have caught up, some are catching up and some are left behind. It’s during this stage that we need to have a backup plan or fallback for the browsers that do not yet feature support. Luckily Cedric Savarese has come up with a script that reads our new CSS3 property values and displays the columns using javascript. You can read how to implement this and download the script on A List Apart.

Multi Column Layout Generator

If at this stage you’re dying to jump in and play around with some of the properties that we’ve discussed today, then I’ve knocked up a quick ‘multiple column generator’ that you can have a mess around with. It’s nothing fancy, but after a little fiddle with it you should be able to grasp the basic concepts of the ‘multiple column layout module’ and be able to start using it in your own projects.

You can also download the generated code so that you are able to further experiment with some of the other properties that are not included in the generator.

CSS3 Multiple Column Layout Generator

Summary

So that brings us to a close on the CSS3 multi column layout module. I hope you now have a better understanding of how to use it. It really is quite simple to use once you’ve had a little play around with it. Despite being new and having a few browser support limitations, it is starting to make its way around the Internet and I’m sure it’ll only be a matter of time before it’s a fully approved and implemented CSS module.

It gives us the ability to explore some great layouts with CSS. Experiment with it, have a mess around with it and download the source files for the examples at the top of this tut. I’d be keen to hear what you have to say and think about this new module, let me know in the comments below.

Further Links, Reading and Resources

• Official Recommendation – CSS3 Multi Column Layout
• FireFox Extension – Make any webpage utilise the multi column layout module
• CSS3 Multi Column Layout generator

Webdesigntuts+

http://www.psdstyle.com/

Photoshop psd templates

http://depot.freeagentcentral.com/

A snapshot of the FreeAgent backlog and your chance to vote on upcoming features

Today, we will demonstrate how to combine several stock photos to create an abstract poster layout. Let’s get started!

Tutorial Assets

The following assets were used during the production of this tutorial.

• Roots
• Hand
• Paper
• Earth
• Shoefly Inksplats

Step 1

We’ll want to start off with a base outline for our triangle. We’re going to use the pen tool to create the triangle, but before we do that, let’s bring out the ruler tool (Cmd/Ctrl + R). We want to get the dimensions of the triangle right and even, so we’re going to use the ruler lines to help us. Bring down the lines, and secure the dimensions you want the triangle to be. Once you have this tiny grid to help you, grab the pen tool. For the bottom left and right edges of the grid, use the pen tool to chart the paths. Then you identify the center and lead the paths to the upper-middle of the box. Make sure to stroke this path (1px hard round) and not to fill it.

Step 2

This is where the fun starts happening. Remember that this triangle was merely a base outline for our actual one. We’re going to make it a lot more interesting. First, let’s create some small lines that follow the outline of the original triangle. You can place them in any direction you want, just make sure it follows the size and keeps the form of a triangle. Look at the image below for reference.

Grab your pen tool again. We’re going to use it to create and FILL some random shapes for the triangle. Just go wild! Curve the edges, make it weird, abnormal, different. This is where your artistic freedom comes in. Don’t restrict yourself. Delete the original base outline when you’re finished.

Step 3

Take out your eraser tool. This will help us create some contrast in the shapes. Make the eraser brush a 1px hard round. Use it to erase small little lines that cut parts of the shape off from one another. If you own a tablet, this works really well with the pen pressure settings.

Step 4

We’re going to want to create another triangle to add some dimension to the piece. This time, it’s going to be larger and far less occupied with the random shapes. Follow step one again to make sure that the dimensions are exact and even. Once you have your new triangle, cut off about a 1/3 portion of one of the line segments. This will be the area where we add the shapes.

Step 5

Now we’re going to create another batch of shapes. Once again, don’t hold yourself back. Of course, keep the consistency in shapes, but make sure to create originality in every little curve. One thing to take note is to make the shapes larger than the last. This will help add depth to the piece. Once the shapes are finished, proceed with the eraser technique again.

Step 6

Add a new triangle in the center of the piece. This will be the smallest of the triangles, but the focal point of the whole design. This time, the triangle will be filled in rather than stroked.

Step 7

This is where brushes take their role. Download the brushes offered in the tool assets and load them into Photoshop. These will help add to the grungy atmosphere of the design. They will mainly be used to bring more attention to the center of the focal. We’re going to place them both in and around the middle triangle. Grab a brush you like and use it on the triangle. I picked one that wasn’t too complex and not too simple, just right.

Step 8

The inside of the triangle is our most important focus in this whole design. It absolutely must be attractive as it is your main focal point! Make it look good! What I did was Cmd/Ctrl select the layer, and used the brushes to create some kind of dark place confined only to that one part in the piece. As though it’s slowly creeping its way outwards. Mix the brushes up. To add some more value, I duplicated the triangle layer and made it white. Then I created a new layer and pasted my brushes on. One thing to take note of is to make sure that the triangle layer is selected as an outline so that your brushes don’t go out of bounds of the shape. Then I grabbed the eraser tool (soft round brush) and erased to darken parts of the triangle. This helped to add value rather than just having the whole thing white or black.

Step 9

Download the roots stock photo from the tool assets. Open it up in Photoshop. We’re going to use the magnetic lasso tool to cut the roots we want out. This doesn’t have to be perfect. If you’ve got some clipping that you don’t want, just use the eraser tool to get rid of it. Zoom in if necessary!

Step 10

Paste the roots into our document. Place it on one of the shapes in the second triangle. Resize and transform accordingly.

Step 11

Now, I know what you’re thinking! That branch doesn’t look blended in very well. I told myself the same thing. What we’re going to do is create a new layer and make a clipping mask for the root layer. Grab your brush tool with black as your colour and paint over the end where the branch protrudes outwards from the shape. This will help make it look as though it’s actually coming out of it.

Step 12

Repeat steps 9-11 two more times. We want three of these root photos in the image.

Step 13

We’re going to use the brushes again. Find a brush you like. Erase everything but one splatter. The brush is going to be used as a rap around for the roots. Cmd/Ctrl select one of the roots layers. Make sure that you are on your brush layer! Now erase the part of the brush every other time it laps over the root.

Step 14

Do step 13 one more time on another root. We’re not going to do it for all the roots so we can add some contrast in the piece.

Step 15

Let’s add a few adjustment layers shall we? Both are set on normal 100% opacity. Make sure that the black-white gradient map is on top of the grey-white gradient map.

Step 16

A little bit of colour would do wonders to this piece. Grab the single row marquee tool and dab it anywhere on the canvas. We only need one. Now, grab the paint bucket tool and choose a nice blue hue. Use it on the line. Free transform the line and make it fall accordingly onto the middle triangle.

Step 17

Duplicate the line layer two more times. Move the first up a bit and the other down a bit. Make sure to add some further effect by changing where the lines end and start with the eraser tool and down a little bit, changing where it ends and doesn’t with the eraser tool. Mix it up!

Step 18

Create some circles with low opacities and place them in spots to identify to the viewer a further visual concept. Small things like these make all the difference.

Step 19

Create a new layer and grab the brush tool. Use a soft round brush to dab two soft circles onto the hard ones. Set the layer to soft light. This helps add value.

Step 20

Before we add some perspective to the piece, we’re going to want to turn off the layer with the blue line that’s furthest away from the others. The perspective tool throws off the angle and makes it look warped since it’s so far away from the two other lines. Turning it off, giving it perspective, then turning it back on will fix this. Look at the image below for reference.

Step 21

Now create a new layer and apply image. Use the perspective tool (Edit > Transform > Perspective) and grab on of the two bottom points on the canvas. Bring your mouse closer towards the middle. You’ll notice that this changes the image to follow the point paths. Where they go, the image goes, and thus creating perspective. The whole image looks a lot better when things decrease and increase in sizes. Depth in the objects is key to making a good piece.

Step 22

There are some clipping errors here. Using the perspective tool has shown us the other layers (look at above image)! We don’t want this. An easy way to fix this is to Cmd/Ctrl select the layer, go to select, and hit inverse. This will make it so that everything you do will only affect what’s outside of what was originally selected. Perfect for paint bucketing white in! Grab the paint bucket tool, change your color to white, and click once on the canvas.

Step 23

Turn the blue line layer back on. Drag it to the top, above the perspective layer, and free transform/place accordingly.

Step 24

Here’s where everything comes together. Open up the hand stock photo in Photoshop. The magnetic lasso tool is going to be used again to cut the hand out from the image. Don’t be afraid to zoom in and get those difficult small spots!

Step 25

Now, there’s not as much strain in the hand as we would like there to be, so let’s go and touch it up a bit. I used the lasso tool to cut the fingers out and transformed them further away from each other, rotating them when necessary to fit the mood of a hand trying to reach out of the triangle. It’s nice to use the clone stamp tool for this part, as it helps blend in areas with others. The dodge and burn tools are crucial for this step. They help reveal certain creases in the hand, and intensify the lighting. Remember that you’re going for a dirty, flexed hand look! The image below should help give you an idea:

Step 26

Place the new and improved hand into the original design. We want to get a nice position of the hand in the middle of the triangle, so take your time and make sure it’s the best position possible.

Step 27

You want the hand to fit into the triangle and appear as though it’s coming out. To do this, grab the pen tool. Create a new layer and outline the middle triangle. Fill it with black. This will be used as a nice base to help us erase the hand. When you have it filled, Cmd/Ctrl select the layer and inverse it. Now select the hand layer and erase the bottom part where it starts to pass the base of the triangle. Once done, delete the black triangle fill.

Step 28

Here’s the part where you can go back and do a few touch ups. Maybe add some adjustment layers, transform/erase areas you don’t like, etc.

Step 29

We’re nearing completion! All we have to do is add a few textures to the background to make it more interesting. Download both of the textures from the tool assets and open them up in Photoshop. Go ahead and change their sizes, rotate them around. Just be sure to erase with a soft brush the middle so it doesn’t obscure the design and make it faded. Adding a really light yellow to brighten it up on all ends helps a lot. Once again, this is only for the ends of the canvas, not the middle.

Conclusion

Add a border to bring everything together.

Psdtuts+

http://www.animalvirals.com/

The funniest videos of farm animals on the web!

http://bigrelated.com/

http://fuseranywhere.com/

http://www.bikenationusa.com/

http://snowboard4me.com/

http://www.spiut.se/

http://www.urlsquid.com/

With urlsquid, your favorite sites are always just a click away – no matter where you are.

http://walther-pm.de/en/

Your expert in comprehensive care for residential and commercial real estate in Berlin.

http://dropr.com/

Dropr is an easy way to share your multimedia creations.

http://www2.thenorthface.com/ap/

http://grandpeople.no/

Grandpeople – Design / Art direction / Shapes and Colours since 2005.

http://irontoiron.com/

Iron to Iron loves the Web, we love what it has to offer and we recognize the value within it. Our goals reflect process, professionalism, and quality of work.

http://www.gominimango.com/

http://events.nokia.com/NokiaN8/

Take amazing photos and videos, connect to your favourite social networks and be entertained with the latest Web TV programs and Ovi Store apps.

http://darky.mall.cz/

darky.MALL.cz – Dárky pro nemallou radost

http://www.sum-tech.co.jp/audio/

http://treegrowing.btcv.org.uk/

This website was originally produced for a project called ‘Trees of Our Future’, which ran in Northern Ireland between 2001 and 2004.

http://www.solelunacafe.it/

http://www.karlthegorilla.com/

http://www.funarisedie.com/

http://www.manmadecreation.com/

Made by Humans. Made by You.

http://www.meurer-palazis.de

Clean and friendly website of dentists from Duesseldorf, Germany.

http://www.thewordpressdevelopers.com

http://10k.aneventapart.com

http://www.fuegointeractive.net

http://www.ourdollarwedding.com

http://airwalk.com

http://www.gridlondon.com

http://www.princestreetfilms.com

http://deploycms.com

http://newadventuresconf.com

http://www.draftboardapp.com

This is the second part of this tutorial series about creating a ready to print booklet menu for an imaginary coffee shop named “Violet Coffee.” In this final part of the two part series, you’ll learn to create a ready to print booklet on InDesign, work with master pages, text, tabs, paragraph and character styles, import external files and actually print the booklet. Let’s move on!

What You Should Get Now

In the Part 1 of this tutorial series, I showed you how to design a background for both the cover and internal pages, besides two additional graphics that we will use later. Before starting with this part of the tutorial you should have all the following PSD files on hand. Psd Premium members can find those files in the source folder of the Premium download.

Setting up the Document

Step 1

Let’s get it started, open Adobe InDesign, go to File > New > Document. Click on the More Options button to show all the options. First set the document Intent to Print, then set the Number of Pages to 4 and Start Page #1, check on the Facing Pages option, this is very important when you’re designing a booklet; set the Page Size as Letter, which is exactly 8,5 x 11 inches, and select the Portrait orientation. On the Margins set 0,25 inches (1/4) on all the fields (click on the chain icon). And set the Bleed value to 0,125inches (1/8) to all the fields. Booth Margins and Bleed values are variable depending on the requirements of your print shop, the values shown are my personal standards which work pretty good with these kind of pieces.

After hitting OK, you’ll have a Letter sized document with four facing pages, with a security margin of 1/4 inch and a printer cut-off bleed of 1/8 inch.

Master Pages

Step 2

A master page is something like a “template” of basic layout that can be used over and over again on many pages of your document, and allows an quick, easy way to change multiple characteristics. In this particular case we will create three master pages: one for the front cover, one for the back cover, and the last one for the internal pages.

First of all you need to show the Pages Panel by going to Window > Pages (F12). By default InDesign creates a blank master page labeled “[None]” and a secondary Master Page with two pages named “B-Master.”

We will create our very own, Option/Right – Click on the B-Master and click over New Master, Set the Prefix to “A,” Name of Cover, Based on [None] and Number of Pages at 1, hit OK and the A-Cover master page will appear in the top row on the Pages Panel. Repeat the process to add the “B-Back Cover” page and for the last Master Page named “C-Internal” just change the Number of Pages to 2.

You should have something very similar to the bottom of the image below.

[onlymembers]

Step 3

The following step is to apply the Master Pages to the actual Pages in the document. On the Pages Panel, in the lower row there’s a mini layout of the document’s pages. Select the first page with a Click, then Option/Right – Click over it to show the options menu, select “Apply Master to Pages” option, a dialog window will shows up select Apply Master: “A-Cover” (Because the first page is the cover) To Pages: 1. Repeat the same process with the Page 4, but applying the “B-Back Cover” instead. Finally Select both Pages 2 and 3 (Shift-click) and Apply Master: “C-Internal” To Pages: 2, 3.

If you did everything right, a tiny letter in the upper-left corner of each page will show the prefix of its respective Master Page.

Add the Backgrounds to Master Pages

Step 4

Now it’s time to import the background elements. Double-click on the “A-Cover” master page, the page will show up in full view. Then go to File > Place… (Command D). Browse your file system until you find the “violet_0000_cover” PSD file, select it and click on Open.

Now the cursor will include a miniature of the imported image, click somewhere over the master page to place it into the design. If you did everything good with the document sizing, the background’s height should be exactly the same as the master page’s height, so the only thing you need to do is place it matching the right border of the background with the master page right border.

Step 5

Repeat the previous step but this time working on the “B-Back Cover” master page, with the difference that you need to match the background left border with the page’s left border.

Step 6

My favorite characteristic of InDesign is that you can resize the dimensions of the containing box without modifying its content nor the aspect ratio. We will reduce the background’s width in order to match it with the page’s width, for this double-click on the “A-Cover” masterpage, then in the Toolbar, grab the Selection Tool (V) and click over the background to select it to show the transformation handlers, click on the middle left handle and drag it until make it match with the page’s left border.

Do the same with the “B-Back Cover,” but resizing the width matching the page’s right. This process will allow you to have a better visual of the document when editing and since we designed the background in Photoshop with the “double-letter” custom size, there should not be any displacing when we print the piece, but we will cover it later.

Step 7

Finally add the “C-Internal” background. Double-click on the Master Page miniature and place (Command + D) the “violet_0000_inner” PSD file, since the background is already designed for a double page layout you will only need to match the borders.

Those are our master pages, you should have something like the bottom of the image below. If you need to add more pages to your design, there will be no reason to insert the background over and over again, just apply a master to the respective page. It makes edits easiest, because you can always modify the background or replace it only once to modify the entire document look, or maybe create a different background style and have many backgrounds in a single document.

Step 8

Next we will add some visual aids for the columns, depending on your design you can set a layout with several columns per page, in this case we will divide the internal pages into two columns, remember this visual aid (Columns, bleeds, guides) will not be printed on the final piece.

Double-click on the “C-Internal” Master Page to edit it, go to Layout > Margins and Columns… in the dialog you’ll be able to modify the Margins and Column values. Since we set up the Margins already, let’s add the columns. Set the Number at 2 and the Gutter (space between columns) to 0.25 (1/4) inches. And that’s it, now you have a two column layout for the internal pages. In case you need some pages with a different layout with more or less columns, just create another Master Page.

Adding Back Cover Text

Now we will need to open the client’s Word Document, you can download it here. Basically, its a bunch of text without any order, it’s our job to mock up it in the best possible way.

Step 9

We will start with the back cover because it’s the simplest. First of all double-click on the page you’re editing, in this case Page 4. Show the Rulers (Command + R) and draw a horizontal guide and place it in the middle of the page.

Show the Layers Panel (Window > Layers). There you’ll see a layer that contains the background elements, rename it to “Background,” then create a New Layer named “Text” and select it. You can block the “Background” layer by clicking on the tiny square next to the layer name to avoid undesired editions, but it’s not necessary.

Select the Type Tool (T) and draw a box from the center guide starting on the left column, left border to the bottom of the left column right border, once you have the box, open the word document and copy the “Company Information” text.

Back on InDesign, click somewhere inside the text box and paste the clipboard text. Then in the Toolbar, grab the Selection Tool and click over the text box, show the Swatches Panel (which we will use several times in this tutorial) by going to Widows > Color > Swatches (F5). Now click on the “Paper” color, which will make the text white, and it’s easiest to see.

How to Create a Color Swatch

This intermediate step is about creating a color swatch, I’ll explain it once because we will need to create several swatches in this tutorial. In the Swatches Panel, click on any existing swatch, then Click on the New button at the bottom of the panel and the selected swatch will be duplicated at the bottom of the swatches list. Double-click on the duplicated swatch, and in the Swatch Options window set the Color Mode to CMYK, and set the desired values, ensure the Name With Color Value check box is selected and hit OK.

Creating a Character Style

Step 10

First you’ll need to show the Character Panel (Window > Type and Tables > Character) and ensure you have the Swatches Panel visible as well. Select the Type Tool (T) and select the words “Violet Coffee.”

Then in the Character Panel, change the font face to “Edwardian Script” (you can use any other font in case you don’t have it) and size around 34. Then in the Swatches Panel, create a new Swatch with this color: C:5, M:15, Y:0, K:0. Now click on the tiny “T” icon on the top of the panel to apply the color to the font face and finally click on the Swatch. You should have something like the bottom of the image below.

Step 11

Since we will use the Character Style a lot in this tutorial, we will save it in the Character Styles panel. Show the panel by going to Window > Styles > Character Styles. In the panel you’ll notice there’s a row labeled “[None],” which is the shortcut to remove all the styles on the selected characters.

Now, to create our custom Character Style. Using the Type Tool select the text we just modified, then in the Character Styles Panel click on the tiny New icon on the bottom. A new row will appear named “Character Style #,” double-click on it and a dialog with several options will be open. You can actually create the style directly there instead doing it as we did before, but the result is the same. In the dialog we will only change the style name to: “Title.” Now, without repeating the process of the previous step, we can apply the style to any word in our design.

Creating a Paragraph Style

Step 12

Now, let’s do something a little bit more complicated, we well combine character and paragraph styles to create a custom and reusable Paragraph Style, which is one of the most powerful features of this software. First of all, open the Paragraph Panel (Window > Type and Tables > Paragraph).

Select the second row of text, which is actually a subtitle, first in the Swatches panel create a new swatch with this color: C:15, M:10, Y:0, K:0. Now in the Characters Panel, change the typeface (I’m using ITC Avant Garde – Extra Light) and Size: 12, open the Panel’s Option menu (icon on the top right of the panel) and select “All Caps” to uppercase the text.

Then in the Paragraph panel, click on the Align right option. Then in the Panel Options Menu, select Paragraph Rules, a dialog will appear, there, click the Rule On check box. Select the Rule Below option, modify the Width to 1px, Style dotted, search for a Color from the existing Swatches, and set the Offset to 0,0625 inches. You can preview your changes on the fly by checking the Preview check box.

At the end you should have something similar to the bottom of the image below.

Step 13

Now we will save this Paragraph Style to use it or modify it later, for this, show the Paragraph Styles panel by going to Window > Styles > Paragraph Styles just like on the Character Style, the “[Basic Paragraph]” option overrides all the styles of the paragraph.

Use the Type Tool to select the row of text that we just edited. To save the line as a custom Paragraph Style, click on the New button at the bottom of the panel, a new row will be created, double-click on it and a dialog with several options will appear. There you can change almost everything of the style, this time we will change only the Style Name to “Subtitle.” And now we are able to reuse this style several times on the design.

Step 14

Now select all the extra text, you can notice I’m dividing it in two paragraphs to make the example more visual. On the Swatches Panel create a new swatch C:5, M:5, Y:0, and K:0, then select it. In the Character Panel set the Typeface to ITC Avant Garde Extra Light Condensed (you can use any other of course) with a Size of 12pt and Leading of 20pt. On the Paragraph Panel select Justify with last line aligned left, First Line Left Indent: 0,0625 and Space Before: 0,1875, besides click on the Hyphenate Check box to divide the words when they exceed the box border.

Step 15

Save the previous styling in a new Paragraph Style named “Standard Paragraph.”

Previewing

Step 16

InDesign allows us to see a quick preview of the design, at the bottom of the Tools Bar you can switch between viewing modes, Normal (W) shows all the additional elements such guides bleed and margins. Selecting the Preview Option you can see only the printable elements. In the bottom of the image below there’s a preview of the Back Cover page, the design is starting to look good.

Add the Internal Text

Step 17

Now let’s add the internal pages’ content using the column border as bounds. Use the Type Tool to draw a text box on the first column of Page 2, Option/Right Click over it and select Fill with Placeholder Text to have a visual of the content (you can skip this step of course). Then using the Selection Tool, Click on the box of text and Drag it holding the Alt Key to duplicate it. Do it three times in order to add a text box on each column of pages 2 and 3.

Chain Text Boxes

Step 18

Using the Selection Tool (V) click on the tiny square at the right bottom of the first text box. The cursor will change to an arrow with a tiny chain icon next to it, that means you must select over which text box you will like the text to continue. Click over the second column text box. Then repeat the step, but chaining the second with the third box, and then with third and fourth.

Just for testing purposes, using the Type Tool select all the text (Click on any box and press Command + A), on the Paragraph Styles panel Click on our previously created “Standard Paragraph.” Then look the design on the Preview mode (see Step 16). Try editing the text, if you remove a word on any box, the content should be adjusted accordingly on all the other boxes.

After testing the columns chaining, select all the text and deleted, and ensure the new text inserted is set with the default “[Basic Paragraph]” style on the Paragraph Styles panel.

Step 19

It’s time to add the actual menu text. Often what you get from the client is just plain text like in this example, it’s your work to make it look nice. Copy and Paste the Menu text from the client’s Word document.

Before moving forward identify what your client had in mind. You can distinguish “Titles” for something like menu sections: “Coffee,” “Hot Beverages,” etc. Then the item name, e.g. Expresso, Capuccino, etc. Below a short description of each item and finally the prices for the different sizes or variations.

The categories titles will be the first in line, using the Type Tool start selecting the word “Coffee” and on the Character Styles panel click on our custom “Title” style. Repeat this step with all the titles on the document (just for visual purposes I changed the rest of the words’ color to white, to make it more visible).

Step 20

Now set the styles for the items’ titles. Using the Type Tool select the word “Expresso.” Then in the Swatches Panel use the previously created Swatch: C:5, M:5, Y:0, K:0. In the Character Panel set the Font to ITC Avant Garde Book Condensed, with a Size of 12. On the Paragraph Panel, set the Align Left option, set the Left Indent to 0.125 inches, the Space Before to 0.1875 inches, and Space After to 0.0625 inches. Also add a Paragraph Rule using the following options Weight of 0,5pt, Type of Dotted, Color of Paper, Left Indent of 0,125in, and Offset of 0,0625in.

Step 21

Save all the previous styles in a new Paragraph Style named “Item Title,” then apply it to all the items in the document.

Step 22

Now select the short description text. In the Swatches panel set the Text Color to Paper, in the character Panel set the Font Face to ITC Avant Garde Extra Light Condensed, with a Size of 11pt. And on the Paragraph Panel select the Left Align option and Left Indent 0.125 in.

Step 23

Create a new Paragraph Style and name it “Short Description,” then apply it on all the descriptions of the document.

Working with Tabs

Step 24

Even if it’s not in the document, the coffee shop’s client needs to know the price of each product, so we will add it in a nice way. Apply the “Short Description” Paragraph style to the two price rows under “Expresso” coffee, “Small” and “Large.” Then, always using the Type Tool, set the cursor at the end of the word “Small” and click the Tab key once. Next write some random price. Repeat the Tab process on the “Large” coffee’s price.

The Tab character is really important in this step in order to save time. Basically we will use an index like style with dotted lines connecting the label with its price. Repeat this step on all the document’s prices.

Step 25

Now it’s time to style the Tab, ensure the two prices’ rows are selected and go to Type > Tabs to show the Tabs Panel. You’ll see a ruler with triangular marks on the left and right sides, those are actually the Left and Right Indent.

Click on any portion of the ruler, between the indents to add a Tab Mark, this mark will be a reference for the Tab character that we inserted on the previous step. Drag it left or right until the prices on the position shown on the screens are placed as shown below. Then on the Leader field, set a character to replace the invisible Tab. In this case, I’m using a period “.” but feel free to use any other. Finally, in this panel you can modify the indents by dragging its handlers. I’m moving the Left Indent a few points as shown at the bottom of the screenshot below.

Step 26

Keeping the two rows Text selection, create a new Paragraph Style named “Menu Price.” Apply it on all the necessary prices paragraphs. In some cases, there are no sizes, so just apply the price style to the description row, adding a Tab and a price of course.

Step 27

Keeping the two rows Text selection create a new Paragraph Style named “Menu Price.” Apply it on all the necessary prices paragraphs. In some cases, there are no sizes, so just apply the price style to the description row, adding a Tab and a price of course.

Editing Paragraph Styles

Step 28

We are almost done, a little tip at this point. The advantage of using Paragraph Styles is that you are always able to edit them without modifying everything again. In the following screenshot there’s two examples, we will modify the “Menu Prices” and “Item Title” styles. We just need to double-click on the Style and modify the values accordingly, you can preview the changes and commit them by clicking OK in the Panel. All the paragraphs related to its respective style will be automatically modified. If you want to, set the new values shown below on each style.

Resizing Boxes

Step 29

Using the Selection Tool and the transform controls you can resize the boxes according to your needs. In this example I’m resizing the first column box to create space to add a copy of the coffee’s logo. You’ll notice that all the content will be adjusted accordingly. All the text work is done by now, let’s add the final details.

Adding Additional Objects

Step 30

Now we will add our nice Coffee Cup and a small version of the company Name to the internal pages. On the Layers Panel, create a new layer named “Additional Objects,” besides you can block the other layers to avoid undesired editions. Then go to File > Place and look for the “coffee.psd” file. Place it on the second column of Page 3.

Step 31

Go to File > Place, look for the “logo.psd” file and place it on the first column of Page 2. Then on the Tool Bar select the Free Transform Tool (E) and use the transform handlers to reduce the image size matching the new width with the column’s width. Since the resolution of the PSD file is pretty big, there’s no problem reducing the size of objects, but if you want to increase the size you’ll see distortion.

Step 32

And that’s it!. Check if everything looks good by switching to Preview Mode.

Print it as a Booklet

Step 33

Now your design should look very similar to the screenshot below. A front cover page, two internal pages with the menu text, and a back cover page with the company information. Let’s Print it!

The most economic way to print this design is handling it as a booklet, which means the printshop will print it in a single sheet of paper, both sides. The type of paper depends on your needs, but the size of the paper sheet should be no less than “double-letter” sized. In this tutorial we will export the design on a high quality PDF file ready to print. You will need to have Adobe Acrobat Pro to make it work.

Go to File > Print Booklet, on the pop-up dialog Click on Print Settings, a new pop up will show, there Click on Setup. The system will show you a list of the available printers on your computer. Select Adobe PDF and Click on Preferences, then in the Settings Tab select the option: High Quality Print. Now Click on OK to commit the changes and Click on Print to go back to the InDesign print settings dialog.

Step 34

Check that under General options the value for Printer is Adobe PDF. Under Options select Visible & Printable Layers.

Under Setup options, select the paper size as Custom and set the following values Width at 12 in, Height at 18 in (Since the printable area of the document is 11 x 17 inches, we need to talk with the printshop and ask them for standards, often you can just leave it as is, but in this example I wanted to show you how to add print marks so I’m adding an extra inch around the design area). Set the page orientation to Landscape and ensure the Scaling values set at 100%.

Under Marks and Bleeds, Check the Following marks: Crop Marks, Registration Marks, Color Bars, and Page Information. Then check the Use Document Bleed Settings. Click on OK and then Click on Print.

Step 35

And voilá we have a ready to print PDF document. You can get rid of the print marks if you want, or show only the ones you need.

Conclusion

And that’s it! Hope you found this tutorial useful, try it changing the backgrounds or the typography to obtain a different result to apply it on your personal projects, and good luck!

.

Vectortuts+

[/onlymembers]

Hi everyone, this time I’ve got for you a practical tutorial about creating a ready to print booklet menu for an imaginary coffee shop named “Violet Coffee.” In this tutorial you’ll learn to mockup a ready to print background and a couple of additional objects, which will be imported later on in Adobe InDesign to finish the piece. Are you ready?

Before Getting Started

This tutorial aims to be a guide for those starting on print design, we will cover several important subjects, such as: document settings, dimensions, layout, bleed and margins, working with color, adding typography and even printing the piece.

I’ll divide it in two parts, this first one is about creating the background for the menu sheets and adding a couple of additional graphics using Adobe Photoshop, which will be imported later on into InDesign to finish the product. The second part is about adding the text elements in Adobe InDesign, mock-up a ready to print booklet style document and actually print it.

We will work within an imaginary scenario where a client “X” provide us a couple of pictures and a Word document with the coffee shop’s text and our job is to make it look nice for print.

Let’s get it started, the assets for this tutorial are:

• A cup of coffee
• Smoke
• Star Brushes of jen-ni

Setting Up the Document

Remember, pen and paper first! Draft what you want to achieve and how you want to make it. Below there’s a quick draft that I did, which will be the starting point of the design. There will be two pages, front and back.

On the front page we will have the cover and back cover layout, and on the back page we will have the actual menu text. The design will be folded as a booklet. We will use violet and black colors for the background and mostly white text. The paper size may be variable, I’m thinking of a “double – letter” size, which means that each page will be an actual Letter size. It’s common to print the menus on big sizes, but depends on you. Once you have the idea of what you want to achieve, it’s time to move forward.

Step 1

We will create a single Photoshop document to mock up the backgrounds, create the image with the company name and add the cup of coffee.

Let’s start this adventure, open Photoshop and then go to File > New. First of all you need to decide which size of paper you want to use, this may vary depending on the client’s budget. This time we will start with a standard Letter Size of 8,5 x 11 inches. It’s very important to set up the resolution at this point, the minimal Print Resolution that works (in my experience) is 300 pixels/inch. And this time I’ll start working directly with CMYK Color Mode.

The cover and back cover of the booklet will be a unique piece of paper that will be folded after print. In order to make the background look nice and fluid (without undesired cutoffs), we will design it in a single document, which means duplicate the document width to convert it into a “Double Letter” piece of paper.

Duplicate the width size of the Letter paper to 17 inches (8,5 x 2). Once you double-check everything is correctly set up, hit OK.

Step 2

Now we’ve got the printable canvas, but we need to increase the design area a little bit with a security Bleed. Show the Ruler (Command + R) and add four Guides (click over the rule and drag) around the document borders, then go to Image > Canvas Size and increase the document size 1/8 inch at top, bottom, left and right. The quickest way of doing this is to add 1/4 inch (1/8 x 2) which means 0,25 inch to the canvas width and height as shown in the image below. Ensure the anchor point is located at the center and hit OK, you should have your canvas increased by 1/8 inch on all the borders.

Finally, add a Guide exactly to the horizontal center to divide the document into two columns. Use the rule to draw two more guides 1/8 inches to the left and right of the middle guide, to create something like a middle bleed area.

Designing the Background

Step 3

Let’s start with the actual graphic design. First of all we will create a Gradient Fill Layer, go to Layer > New Fill Layer > Gradient and set the following values to the gradient colors: Violet (C:80, M:100, Y:30, and K:25), and Black (C:70, M:70, Y:70, and K:95) which is a common version of rich black and works really good. If you want to know more about using black in print design, take a look at this link: The Ultimate Guide to Designing with Black. Be sure to set the Angle to 90 degrees.

Step 4

Now add some effects to the to the background. Create a new layer above the gradient background, set the Front color to: C:80 M:70 Y:60 K:80 and the Background color as White. Now go to Filter > Render > Clouds. Change the cloud layer’s Blending Mode to Overlay.

Then, go to Filter > Blur > Motion Blur, set the Angle to 90 degrees and Distance to 999 px. Finally adjust the Levels (Command + L) as shown at the bottom of the image below to finish the effect.

Step 5

Using the Pen Tool, draw a shape similar to the one shown in the image below. Fill the path with this color: C:10, M:15, Y:0, and K:0. To keep the layers organized I’m using Layer Groups, first create a folder named “Curves Right” and put all the curves of the right side of the canvas there.

After drawing the curve, go to Layer > Layer Mask > Hide All and fill it with a Horizontal Gradient (White to Black) making visible just a part of the left side of the curve. Finally change the curve Layer Opacity to 25% and set its Blending Mode to Color Dodge.

Step 6

Duplicate the Curve as many times as you want (hold the Alt key and Drag) and use the Transformation Tools to distort each duplicated curve in order to get something like the image below. You can add as many curves as you want. Try changing the opacity value on each one to obtain a nice effect.

Then select the “Curves Right” group and drag it to the right side of the canvas. Then duplicate the entire group (you can hold the Alt key and drag) and go to Edit > Transform > Flip Horizontal to reflect the curves, then select the new Group that you can name “Curves Left” and drag it to the left side of the canvas.

Step 7

Create a new layer above the “Curves.” Use the Ellipse Tool (U) to draw a pink (C:5 M:55 Y:0 K:0) circle (hold the Shift key to make it perfect). Then go to Filter > Blur > Gaussian Blur you’ll be asked to Rasterize the Shape, do it; set the Radius to 50px and hit OK. Next, change the circle’s Blending Mode too and the Opacity to 25%, then place it somewhere over any of the curves.

Duplicate this layer as many times as you want, changing the Opacity value and resizing each copy a little bit. Try to get something like the bottom of the image below. Once you’ve finished, put all the layers into a folder named something like “Light Spheres.”

[onlymembers]

Step 8

For this step you’ll need to open the Stars Brushes set. In a new layer paint some White (C:0, M:0, Y:0, and K:0 ) stars in random places, then add an Outer Glow Layer Style using the Screen Blend Mode, with a Size of 70px and this color: C:15, M:55, Y:0, K:0. Finally set the “Stars” layer Opacity to 70%.

Adding the Name

Step 9

The following step is adding the logo, of course this cannot be named logo, since an actual logotype is a more complicated graphic design piece, so I’ll call it just “company name.” Use some guides to divide the left portion of the document in two, both vertical and horizontal. Then use the Type Tool (T) to type the word “VIOLET” in all caps and in White. I’m using the commercial font Avant Garde, but feel free to use any substitute (Futura, Century Gothic, etc). Use the Character values shown below. Then select the letter “O” and change its color to: C:10, M:85, Y:0, and K:0.

Finally, as an additional effect, add to the Text Layer a Gradient Overlay Layer Style (Gray to White) and set the Blend Mode to Linear Burn, Opacity to 75%, and Angle to 90 degrees.

Step 10

Now we will add a reflect effect to the text layer, for this duplicate the text layer, rasterize it (a quick way of doing it is creating a blank layer below it, then select both the copied layer and the blank layer and press Command + E to merge them) and then go to Edit > Transform > Flip Vertical. Place the copy just below the text. Finally, add a Layer Mask > Hide all to the copy and fill it with the Gradient Tool (Black to White).

Step 11

As a final touch, create a new Layer above the “Violet” text layer and use the Stars Brush set to paint some white stars on it. Change the Layer’s Opacity to 85%.

Step 12

Let’s type the word “coffee” in the lower right corner of the word “Violet.” For this word you can use any script typeface (I’m using Edwardian Script). Now add a Gradient Overlay Layer Style using these colors: C:10, M:85, Y:0, K:0 and C:15, M:55, Y:5, K:0. Finally, put all the layers related to the company name in a Layers Group named “Logo.”

Layer Comps

Step 13

Now we’ll set two Layer Comps in order to save two different versions of the design in two separate files using an Automated Script.

First show the Layer Comps panel, go to Windows > Layer Comps. Ensure the “Logo” folder is visible and on the Layer Comps panel click on the tiny New icon at the bottom, rename the new layer comp to “Cover.” Then hide the “Logo” folder, and create a new Layer Comp naming it “Inner” this time. You can toggle the visibility of the layer comps to double-check everything is OK.

Step 14

Go to File > Scripts > Layer Comps to files. In the dialog, set the File Type as PSD, browse where you want to store the new files, name the resultant files with some descriptive prefix like “Violet,” and leave all the other settings by default. When you hit on Run, Photoshop will automatically create a new file for each Layer Comp. The name of the new document will include the name of the Layer Comp.

Additional Graphic, a Cup of Coffee

Step 15

Open the cup of coffee image in Photoshop, double-click on the “Background” Layer to make it editable. Then use the Pen Tool in Paths mode, draw around the cup’s silhouette, once you’re finished with the path drawing, click on Exclude Overlapping Path Areas in the Options bar and draw a path inside the cup’s handler. Once you’ve got the paths drawn, go to Layer > Vector Mask > Current Path to convert the path to a vector layer mask extracting the cup from its background.

Step 16

You can drag and drop the coffee cup from its original document to our working document. Once you place it on the design, rasterize the layer if you want too, Option (Right) click on the Layer and select Rasterize Layer; name the resultant layer “coffee cup.”

Then, using the same technique as in Step 10, add a reflection to the cup, but this time using a big, soft, black Brush (B) paint a little bit over the layer mask to soften the angular shades, as shown.

Step 17

As a little additional detail we will add a shadow to the cup. Use the Ellipse Tool to draw a rich black ellipse between the “coffee cup” and “coffee cup copy” layers. Then go to Filter > Blur > Gaussian Blur, set the Radius to 35 and hit OK.

Step 18

To keep the violet ambient add a Photo Filter Adjustment Layer above the cup, ensure the Clipping Mask option on the Adjustments Panel is selected and set this color to C:40, M:80, Y:0, K:0 and Density to 25%. Now put all the coffee cup related Layers into a Layer Group named “Coffee cup.”

Step 19

Now we will add a little bit of Smoke to the coffee cup. Open the Smoke image from the assets and double-click on the “Background” Layer to make it editable. Hit Command + I to invert the colors of the image. On the Hue / Saturation adjustment window (Command + U) set the Hue value to -92 to make the smoke more violet.

Let’s extract the smoke from its background. In the Channels Panel (Window > Channels) duplicate the Red channel, hit Command + A and Command + C to save the copy to the clipboard, then delete the duplicated channel, click on the RGB channel again to leave the image with its default colors.

In the Layers Panel select the smoke layer and go to Layer > Layer Mask > Hide All, on the Layer Mask miniature, always on Layers Panel, Alt-click on the mask to show it, then Paste the clipboard on the visible Layer Mask. Then click on the actual layer miniature to see how it looks.

Step 20

Drag the smoke layer to our main document. Then rasterize it and name it “Smoke.” Place it just above the cup of coffee. Add a Layer Mask to this layer and fill it with a White to Black gradient to hide the bottom of the smoke column. Use a soft black brush to paint over the layer mask to hide the top of the smoke column.

Finally, duplicate the “Smoke” layer, place the copy above the original layer and go to Filter > Blur > Gaussian Blur, then set the radius to 35%. This will add a nice glow to the smoke layer.

Step 21

Now, in order to increase the visual impact of the coffee cup, add some lights and stars, just like we did on the background at the steps 7 and 8. Finally, put all the layers related to the coffee cup, including the smoke, the lights and stars, into a new Layer Group named “Coffee.”

Exporting the Additional Graphics

Step 22

Revising, we have two important layer groups for this step: “Coffee” and “Logo.” Both will be additional graphics that we will import later on into the InDesign document, so we need to export each one as a different file. Let’s start with the “Logo” group, duplicate it (drag the group over to the New button at the bottom of the Layers Panel), select the “Logo copy” group and press Command + E to rasterize it. Do exactly the same with the “Coffee” Group.

Step 23

Select the “Logo copy” layer, then Option (Right) – Click on it and select Duplicate Layer, on the popup dialog, write a name for it and select Destination of New. This will create a copy of the logo layer in a document with the same width and height as the original. Use the Crop Tool to cut all the blank space on the copy, then save the document with some descriptive name like: “Logo.psd.” Repeat the process with the “Coffee copy” layer.

Resultant Files

Step 24

That’s it with Photoshop, at this point you should have the following important elements to use them on the next part of this tutorial: two PSD files with the backgrounds, one for the cover and another for the internal pages. A PSD file including the Logo with a transparent background, and another document including the coffee cup with transparent background as well.

Now we are ready to create a printable document in InDesign and add the information provided by the client.

Conclusion

At this point we have a good looking background for our menu. Now jump to Part 2 of this tutorial over on Vectortuts+ where we’ll learn more about print design.

.

Psdtuts+

[/onlymembers]

http://bogothemes.com