This site requires the latest Flash plugin for the content to run. Click here to download the latest plugin from Adobe.
Cyber Aspect -dot- Com : Publishing opinion on the net since 1999Cyber Aspect -dot- Com : Publishing opinion on the net since 1999
we recommend
Quality website design and development services that WORK!  fx digital offer a quality service at an affordable price @ www.website-designs.com
  feature article
  [ tutorials ]
 

Working with Adobe Photoshop (DVD Cover)
Julie Smyth : 2004

Following on from the last Photoshop tutorial I've put together another small tutorial. This time we're going to work through creating an entire image ourselves and hopefully we'll all end up with a DVD cover. This tutorial is intended for users who are familiar with Photoshop.

Open a new file in Photoshop at 72dpi, a white background, a width of 400 pixels and a height of 300 pixels. Please note, these are not the dimensions of a real DVD cover as this is just a tutorial. If we were going to get into serious DVD artwork we would be looking at using a much higher dpi for print quality or perhaps a vector based package like Adobe Illustrator or Corel Draw. But, we are here to learn more about Photoshop and have some fun while we are doing it ... and hopefully we will end up with an image something like the one below.

 cyber aspect advanced photoshop tutorial

The file I used for the background image above is called "Ranch House.jpg" and if you have Photoshop CS you will find it in the "Samples" folder (under Program Files, Adobe, PhotoshopCS, Samples). I pasted the image in, retained the original size and moved it around until I got the "look" I was after.

Lets add the text layers. Select the text tool and change the font to "Arial", the size to "160 pt" and the colour to "Black". Select a spot on the canvas and key in the letter "D". Select your layer in the "Layers Palette" and then hold the CTRL key down and press the letter "J" to copy the "D" text layer. If you double click on the new text layer you can change the colour to "white". Using the "move" tool position the two "D" text layers where you would like them. Create a new text layer containing the letter "V" and move it to the desired location.

cyber aspect advanced photoshop tutorialSo now we have the large "DVD" text lets add in the smaller descrptive text. Select the font tool and change the size to "16", pick a spot on the canvas and key in "isc". Select the new text layer in the "Layers" palette then select the "move" and position "isc" next to the second large "D". It might be wise at this point to "link" the two layers together, so that if you move them they will move together. Repeat this process for "igital", position it next to the first "D" and link the two layers together. Create a new text layer using the colour white and the "versatile" text. Click on "Edit", "Transform" then "Rotate" and rotate "versatile" until it is lined up on the curve of the "V". Link the two layers together.

Now onto the title of the DVD "the gunslinger". Select the text tool again and change the size to "30 pt", the colour to red, pick a point on the canvas and key in "the gunslinger". To make it stand out more ... select "add a layer style" from the bottom of the "Layers" palette then select "drop shadow". Change the distance and size to "2" and the opacity to 100%. Now it stands out.

Notice there is a rectangular box behind the "controls" text? Lets create that now. Create a new blank layer called "black box" and select the "rectangular marquee tool" from the "tools" palette and draw a rectangle similar to the one in the image below. Press the letter "d" to change the colours back to the default (black and white), select the "Paint Bucket Tool" and click inside the rectangular selection with your mouse. You now have a black rectangle to put your DVD controls on.

 cyber aspect advanced photoshop tutorial

Create a new Type layer using the Arial font in "20 pt" and in "white". Keyin the text "play movie | scenes | trailers". Select the "move" tool and position your new text over the top of the black rectangle you created above and we're almost done.

To create the "lined" effect which overlays the whole image I used "pattern overlay" layer style on a brand new layer. Create a new blank layer called "overlay". Click on this layer in the "Layers" palette and move it to the top of all the layers. Type "x" which will reverse the colours so white is now on top. Select the "Bucket Fill" tool and click on the canvas. You should now see just a white canvas. In the "Layers" palette again click on opacity and key in 32%. You should now be able to see the image again. Click "Add Layer Style" at the bottom of the palette and select "pattern overlay". Now the lined pattern I used is one that I created myself so this won't be available to you. We'll try this with one of Photoshop's standard patterns. With the "layer style" menu visible click on the arrow next to the pattern which will display the "pattern picker". Select a pattern you like. If you want to load more patterns click the arrow in the top right corner and select "load patterns". This will enable you to select patterns from the Photoshop folder. Once you're happy with the pattern you've selected, experiment with the "opacity" and the "scale" until it looks how you want it. I selected an opacity of 55% and a scale of 100% for my lined pattern.

And thats about that. How does your image look? Happy with it? You now know enough to experiment and move things around until you are happy. I'll accept jpeg or gif copies of images for grading purposes :) I hope you had as much fun running through this tutorial as I had creating it. I'm sure I'll have the time to do another one very soon. 

 
we recommend
Have a cutting edge, state of the art website today, with no large financial outlay. Rent a Website from fx digital @ www.fxdigitaltemplates.com