• home
  • forum
  • my
  • kt
  • download
  • Make a beautiful simple Cd-cover!

    Author: 2009-08-10 22:45:40 From:

    Recently I read a magazine and saw a picture of a nice and simple CD-Cover from Israel Houghton . I liked it, so I decided to make a tutorial on how to make a cover similar to this one.‘ So far the story of this tutorial ;)! In this short tutorial we’ll make a CD-Cover using Photoshop CS3+.

    After this tutorial you’ll know how to apply to color schemes to a design, to adjust the ‘leading’ and ‘tracking’ of fonts and using capitals. The outcome of this tutorial is shown on the left.

    Before actually opening photoshop, we’ll look at the colorscheme:

    If you want to make a colorscheme on your own: Adobe Kuler is a great tool for making color schemes. We see that the main colors used in this scheme are white, grey and black, and a red/orange like color is used to create a sharp contrast. Let’s translate that to photoshop!

    Step 1

    Create a new file (CTR + N or File > New) with the following dimensions (this is optimized for web preview, for print the resolution and dpi should be much higher):

    Step 2

    Now add a new Layer (CTR + SHIFT + N or Layer>New>Layer) and call it ‘BG’ or ‘Background’. Select the Gradient Tool and draw a Radial Gradient, using the following colors:

    Draw it from slighty below the middle towards one of the corners, similar as shown in the image below:

    Step 3

    No it is time to start brushing! The standard brushes of Photoshop will do here. Create a new Layer (CTR+SHIFT+N or Layer>New>Layer) and call it ‘Brushing’. Start brushing a shape using the Brush Tool (B) as shown in the picture below, using the 14px ‘Spatter Brush’ (also shown below).

    The color you should use is black (#000000). Hold SHIFT for drawing vertical lines. For the ‘tails’ at the bottom of the shape, decrease the Diameter of the Brush using ‘ [ ' . Keep brushing until you got something similar to below:

    Step 4

    Add a new Layer (you should now the hotkey for it by now ;)) and call it 'Brushing Scatters'. Select the 1px Brush, color Black. Go to the Brushes Palette and set up Scattering on Both Axes, 500%:

    Start Brushing around the 'tails', and create some variation in the size of your scattered Brush (from 1-3px, use [ and  ] ), so that you’ll end up with something that looks similar to the picture shown hereunder:

    Step 5

    The black area is still having some lack of depth. Create a new Layer and call it ‘Brushing White’ Now select a 1px White Brush (B, D to reset for- and background color to Black and White, X to swap those). Make sure it Scattering, which was used in Step 4, is turned of. Draw straight vertical lines in the area whe brushed already. Also use different Opacity values for this, so that you’ll have something like this:

    You might want to lower the overall Fill of this layer if it is still too bright. I lowered it to 60%.

    Step 6

    Aah, we could use some text! Create a New Text Layer, using the Horizontal Type Tool (T). We want the distance between the lines to be decreased, so the ‘leading’ of the font needs to be adjusted.  We also want it all in capitals without using Caps-Lock. Go to the Characters Palette / Tab, and set the ‘leading’ to 20 pt, and ‘All Caps’ on. As you can see besides ‘All Caps’ there are a lot of other options such as Subscript and Superscript. Also make sure that you have selected 24pt Tahoma as font:

    Now type the following text (or any other text you want, as long as it fits well!), in the ‘black brushed area’, as shown below. The red color used here is ‘#d32316′.

    Step 7

    Somewhat above the ‘black brushed area’, create a new Text Layer and type ‘Phantom’ (or anything else you want). As you can see a ‘tracking’ of 75 was set up for this Text Layer. A positive tracking value will increase the distance between letters, where a negative tracking value will decrease it.

    The text was placed at this location:

    Step 8

    This is the final step, create a new Text Layer and type ‘George’ (or something else you like) exactly above ‘Phantom’ (you can see how it is done in the outcome). Use the settings shown below, so that it will be exactly as wide as ‘Phantom’. If you used your own (different) text, you can make other changes in Font Size, Font Style or ‘Tracking’ to make it fit.

    Congratulations! You finished this short tutorial!
    Outcome:

    Download the .psd here.

    discuss this topic to forum

    relation tutorial

    No information

    Category

      Abstracts (120)
      Effects (774)
      Animation (252)
      Photo Effects (1191)
      Automation (23)
      Photo Retouch (415)
      Basics (513)
      Photography (352)
      Brushes (56)
      Scripting (7)
      Buttons (217)
      Text Effects (916)
      Color (94)
      Textures and Patterns (202)
      Digital Art (245)
      Web Graphics (822)
      Drawing (1065)
      Web Layouts (305)

    New

    Hot