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.

We’re often told to not judge a book by its cover, but in most cases we do. If a book doesn’t have a nice cover, it probably wouldn’t catch our attention in the first place. In this tutorial, I’ll be teaching you how to create a dirty grunge book cover design complete with bleeds!

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 CS4
• Difficulty: Intermediate
• Estimated Completion Time: 2-3 hours

I’m a fan of horror, thriller and crime investigation novels, which are quite often linked with dirty and grungy covers. Two of my favorite things combined! This is the beauty we’ll be working towards:

Step 1 – Setting Up Your .PSD file

A book cover, in most cases (unless it’s an eBook) is going to go to press, which means we have to set it up correctly. There are hundreds of different book sizes, but a few that are commonly used for fiction books. One of them is 108×177mm (front cover only). Spines change width obviously depending on the length of the book, but in this case we’re going to use 26mm, giving us a total dimension of 243×180mm including a 3mm bleed.

If you’re setting up your document for a real book cover, whatever you do, do not guess the width of the spine! There’s a simple formula which can determine that width for you: you have to take the number of pages and divide that number by your text papers PPI (Pages Per Inch), which all depends on the weight (GSM) of your paper. You should be able to get that from your quote sheet, or ask your printers for it! You can use this awesome spine width calculator if you can’t be bothered to work it out yourself!

Head over to Photoshop and set up a new document; make sure your width is set to 243mm and your height is set to 180mm. Make the resolution 300 pixels/inch and set the color mode to CMYK. Hit OK!

Make sure your rulers are showing by going to View > Rulers, or press Command + R. A lot of people don’t use rulers very much, but they can come in very handy for dragging out guides later on in the project. Go to View > New Guide… and with Horizontal selected insert 3mm into the Position box. Do the same again, this time inserting 177mm into the position box. Repeat the process using measurements 3mm and 240mm, this time with the Vertical checkbox ticked. That’s our 3mm bleed added to the document – our design will go right up to the edge of the document, but for those that don’t know, when the document goes to print, 3mm from each side of the document will be chopped off.

This means the printers can assure you that there will be no white gaps on any of your documents so long as you set up the file correctly. Also, with any print project, not just this one, always keep your text at least a few millimeters away from the bleed guide, this is just to be on the safe side incase a few of your prints aren’t aligned correctly when being cut down to size. You might find it easier to create another set of guides for this, or you can do what I do and use your eyes as a guide.

It’s time to add some guides for our spine. Go to View > New Guide… and with the Vertical checkbox ticked, insert 108mm and hit OK. Repeat the last step using the measurement 134mm. Remember we’re working in millimeters, not centimeters or pixels. You should now have a nicely aligned .PSD document. Always remember to save your documents regularly!

Step 2 – Choosing a Color Scheme and Adding Some Initial Background Texture

Crime, Horror and Thriller books are often associated with grungy covers, which means this tutorial is going to use a huge handful of textures, blending modes and brushes.

I’m going to go with a blood red color scheme mixed with some warm browns, dark oranges and a pure white which will be used for the majority of the typography in our design – what color scheme you choose is entirely up to you, I suggest you play around with your design for as long as you have and see what you can come up with; after all that is the best way to learn and pick up new techniques.

Select a warm blood red/orange (#db2900) and using the Paint Bucket Tool fill your background layer. We’re going to add some texture to our design straight away. Make a new layer and fill it with white. Go to Filter > Noise > Add Noise… In the new window, insert 100% into the Amount field, and make sure Gaussian and Monochromatic are both selected. Hit OK.

With the new layer still selected, drag it down to the New Layer symbol at the bottom of the palette – this will duplicate the layer. Repeat the step again. Set all three layers to Overlay and using a large, soft Eraser, get rid of some of the areas on each layer. Name each layer sensibly so you can find them later; I named mine “Noise 1″, “Noise 2″ and “Noise 3.”

Already our cover is looking quite grungy, and so far we’ve only used one built in Photoshop Filter! Head over to Textur.es and download this lovely grunge texture. Insert the texture into your document by going to File > Place. Rotate it so the grungier side of the texture is on your front cover, and upscale it to the same size as your document. The easiest way to do this is by going to Edit > Free Transform or by pressing Command + T and then dragging the corners of the texture out whilst holding the Shift Key to keep everything in proportion.

Change the textures layer to Overlay, and change the layer name to “Texture 1.” Drag the layer down to the New Layer icon at the bottom of the palette to duplicate the layer. Rotate it by 90 degrees, and align it next to the spine (this should be easy if you have Snap to Guides selected – if not, go to View > Snap To > Guides). Grab the same soft Eraser we had a minute ago and erase a few areas of our duplicated layer. Rename the layer to “Texture 2.”

The joy of using textures in your work is that you can create a stunning piece of work with a very minimal amount of time, effort and resources. One texture can go a long, long way.

I’ve just realized our whole design is turning a little bit orange – not so much that blood red I was hoping for! The overlays on the Noise layers seem to have lightened our red up so much that it’s turned to orange. To fix this, make a new layer above our original background and fill it with a dark red/brown (#5c0000). Rename the layer to Background 2 and drop the Opacity to 60%.

Step 3 – Making Different Areas Look Different

When it comes to books, there are three different areas. The front covers main purpose is to advertise the book – it needs to stand out. The spine is to make the book easy to find on a shelf full of others. The back cover is to present a blurb – meaning it should be easy to read. So far, our front, spine and back look virtually the same. We need to fix that!

Duplicate your layer “Texture 2″ and select the Paint Bucket Tool. With the same dark red/brown we selected earlier, click somewhere on your duplicated layer to fill some areas. Rename the layer to “Texture Blobs” or something of your own choice. Your image should currently look like something below.

Select a large, soft Eraser, and erase out some of the inner areas of your “Texture Blobs” layer. Change the Blending Mode to Multiply, and lower the opacity to something you think is suitable for your piece; I used 20%. This should give us a dark, grungy front cover that fades into the background as it reaches the center of the page, which is where we will be featuring an object.

Make a New Layer and name it “Front Border.” We’ll be making some more darker areas where, later on, we will be presenting some text with a Spot UV overlay. Select the Rectangular Marquee Tool and select the front of your cover up to the spine.

Select a large, soft brush and change your color to a dark grey or black. In your marquee selection, paint a dark area at the top and bottom of your front cover – you could even paint a very small streak of black up the sides of your cover. Use the Eraser with a soft brush to thin out any areas you felt you applied too thick.

Change the Opacity of the layer to about 25%. Repeat the last two instructions again, this time making the border even thinner – remember to make a new layer! Name it “Front Border 2.” I also used a different color – a dark red/brown (#6f2009).

You should have more subtle grunge area at the top and bottom of your front cover now, which is suitable to present some nice typography later on in the tutorial.

Now we’re going to work on the spine of our book cover. The spine should be very subtle and easy to read, especially as we don’t have too much space to work with. Make a New Layer and name it “Spine Background.” Select the Rectangular Marquee Tool and select the spine – this should be relatively easy because, with Snap to Guides selected, it should automatically connect with our spine guides. Grab a soft brush and using the same color we used in the last instruction, paint the bottom and top of your spine, leaving a small area in the middle. Lower the Opacity to 70% just so a little grunge shows through!

With the front cover and spine virtually complete (we will probably add a little more background texture later on!), it’s time to move on to the back cover. The back cover will have a lot of text and important information on it, so it’s important we don’t show too much texture and keep it pretty plain. We will need to display: a blurb, a couple of one-line reviews, a price, a barcode, an ISBN number and maybe an authors web address and a designers web address.

This step is pretty much the same as the last few: make a new layer and name it “Back Cover Background.” With the Rectangular Marquee Tool, select the back cover. Select the Brush Tool and choose a large, soft brush – again using the same color we used in the previous step. Brush over the back cover, leaving a small, low opacity area in the middle.

Lower the opacity of the layer to 85% and then make another New Layer called “Back Cover Background 2.” Lower the size of your brush a little (I lowered mine to 1000px) and choose pure black as your color. Repeat the same step as before, this time not going as far into the center of the back cover as we did previously. Change the layers Blending Mode to Overlay and drop the Opacity to 50%.

With your marquee selection still active, fill it with pure black on a new layer named “Back Cover Black Overlay.” Lower the opacity to 15%. This just takes a little color out of our back cover which will make it easier to present readable text.

Our back cover, compared to our spine, seems a little dark. To fix this we’re going to make our spine a little darker. Reselect the spine with the Rectangular Marquee Tool. Make a New Layer and name it “Spine Dark Background.” With the same brush as we used in the previous instruction, brush over the left half of the spine using a color from the back cover (use the Eyedropper Tool to select a color). You should have something look similar to the screenshot below:

Lower the Opacity of the new layer to 70% – you’re spine should now merge in a little more between the back and front covers.

Step 4 – Organizing Our Document!

I often take a few minutes throughout a project to tidy up my mess – it doesn’t take long when we’ve been renaming our layers throughout the length of the tutorial, but now we have a total of 16 layers it’s time to put them into some folders.

Make a total of four new folders by clicking on the New Group icon at the bottom of the layers palette. Rename them to: “Main Background,” “Front Cover Background,” “Spine Background” and “Back Cover Background.” Move all the related layers into the appropriate groups.

This was a bit of a short step, but plays a vital part in keep our document organized. If you’re not to sure what you’re doing when it comes to pre-press and you send in a Photoshop document, having a well-named layered and grouped document really helps out and ultimately means the turnaround time for your print job will probably be quicker – we all win!

Step 5 – The Typography

It’s time to add some typography! As this project isn’t actually for a real book cover, I’m going to make some names up. I’m going to use my name, “Callum Chapman” as the author, “BOOK COVER TUTS+” as the book title, “A Tuts+ Print Tutorial” as a mini description of the book, and a section of text from Tuts+ about page as the blurb. On top of all this, I’ll be making up some mini one-line reviews by several made up magazines/newspapers.

Select the Type Tool and drag a text box over your front cover. Type in your authors name, in my case I used “CALLUM CHAPMAN.” I used two separate lines for “CALLUM” and “CHAPMAN.” Select your text and change to a suitable font – I’m going to use Myriad Pro for the majority of text on my cover as it has a lot of styles such as condensed, semibold, oblique, bold, and a combination of them all together. When designing for print, try to stay clear from Faux Bold and Italic as in the end they don’t always come out as great as they could.

Change the size of the authors first name to 45pt and the size of the authors surname to 60pt – this is the time to make sure your text box is lined up with the bleed on the right-hand side of the document and the right side of your spine. Open up the Character Palette by going to Window > Character. From here we can change the leading and tracking, which is always important when it comes to typography – never bypass it! Change the Leading to 55pt – this will bring your authors surname closer to the bottom of your authors first name, but not too close! If you’ve used a different typeface or size to me, you might need to play round with these settings as they differ depending on the font and size used.

With your text layer still selected, open up the Blending Options by going to Layer > Layer Style > Blending Options. Alternatively you could Alt-Click on the Text Layer and select Blending Options from the menu.

We want to add various styles to make our text really pop out from the cover. We’ll be using the following styles: Drop Shadow, Inner Shadow, Bevel and Emboss and Stroke. The screenshots below show the different settings I used for each individual style:

Create a new layer beneath our authors name and call it “Author Shadow.” Grab the Brush Tool, and with a medium-sized soft brush, paint a black shadowed beneath the authors name.

Change the layers Blending Mode to Saturation, this will turn everything below it to greyscale. Lower the layers Opacity to 40%. The point of this step is to just make it that little bit easier to read, and makes the text pop out even more!

Repeat the previous steps to add a book title. I’m using the following text in the same text area on separate lines: “A Tuts+ Print Tutorial” and “BOOK COVER TUTS+.”

With your mini description selected, change the size of the font to 15pt. Select your mini description and book title together and change the Leading in the Character Palette to 30pt. Select your mini description and change the color to an off-white/red – I used #ffdada.

Make a new layer beneath your book title layer, and using the same technique we used earlier, brush in a black shadowed area with a small, soft brush. Remember to rename your layer – I called mine “Title Shadow.”

Go to Filter > Blur > Motion Blur. Change the Angle to 90 and the distance to 250. To preview the different Distances before applying the blur, make sure the preview box is checked. Hit OK to apply the blur to our shadow.

Go to Filter > Noise > Add Noise. Change the Amount to 25, the Distribution to Gaussian and make sure Monochromatic is unchecked. Hit OK.

Change the layers Blending Mode to Overlay and its Opacity to 60%.

Using similar styles and fonts, add a few short reviews beneath the book title. I’m going to use “‘A top-notch book!’ – PSD Times” and “‘Fantastically gripping!’ – Vector Mag.” I’m going to use Bold Condensed Myriad Pro for the review, and Condensed Myriad Pro for the reviewers name.

Step 6: The Back Cover

It’s time for the Blurb on the back page. Head over to the Envato homepage and copy the brief introduction to the Tuts+ Network. Select the Text Tool in your Book Cover document and make a new text box on the back cover; make sure it’s center! Paste the introduction in to the text box. Back over at Envato, copy and paste the information under the ‘About Envato’ heading, head back to your document and paste this in, too. At the top of your text box, insert a line that will be used as an opening sentence. I’m going to use: ‘You’re about to learn how to make your very own book cover!’

Continue Learning…

A great looking design can be easily created by combining various textures and brushes. In this tutorial we’ll look at creating a cool grungy design based around some abstract 3D type, then apply a few finishing touches to really bring the design to life.

To start, we’ll create the type by hand using Illustrator. Create a new document, then turn on the Grid, and adjust the snap settings to snap to the grid.

Draw a square onto the artboard. Notice how the points will automatically snap to each grid intersection. This will come in handy when creating our abstract geometric type style.

For this tutorial, we’ll base the design around the word ‘Create’, so manipulate this first shape into a letter C by chopping out a section using the Pathfinder tool. Use a temporary shape to overlap the appropriate area, then select both shapes and click the Subtract from Shape Area icon.

Continue onto the next letter, in this case an R. Use the Pen tool to create triangular shapes to sculpt the box into a vague R shape.

Once all the letters have been created, space them equally alongside each other. Basing each letter on the same rectangle gives a boxy, geometric and generally cool style.

Head over to SXC and download a background texture. This particular one is a paper texture from IB6364. Paste the texture into Photoshop.

Copy and paste the wording from Illustrator into Photoshop. Fill the letters with a colour sample of a nice grey-blue.

Duplicate the text layer, then press CMD+T to Transform. Hold Shift and Alt to scale down the letters proportionally. Dropping the opacity on the top layer can help visualise the transformation.

Fill the smaller text with a darker shade. This is the base of the three dimensional effect.

Continue Learning…