As the title indicates, this tutorial is intended to provide a guideline for using windows-based Photoshop 6 (or newer) to create an automotive-related signature for use on various online forums or webpages. While there are more advanced techniques within Photoshop that offer more options and versatility, I've attempted to write the tutorial using the utmost basics so that even the most novice of users can follow along with older versions of
PS without being overwhelmed or intimidated by this powerful program. There is no reason why the techniques within could not be applied towards creating similar graphics for websites geared towards other hobbies or interests. All of the images intended to support this tutorial are included in the attached "sig 1.zip" file.
Judging by the fact that you're even reading this, I presume that like myself, you want to do everything possible to make this signature something that both you and the owner can be proud of. In my years of experience, I've found that the limiting factor most often winds up being the quality and variety of the images that are available to work from. For this reason, you should take some time before starting your signature to carefully select the images that you intend to work with. Look for interesting shots such as the wheels, key design features, custom modifications and/or paintwork that set the subject vehicle apart from the rest of the crowd. You also want to look at the photos themselves for their overall quality (i.e. lighting, foreground, background, detail & clarity). All of these are factors that, if they ruin the photo, they'll ruin your signature.
The last thing that I try to do before beginning is give some thought about what I want this signature to show off. For example, if the subject vehicle is custom number with a theme to it, how can I best capture that vehicle's "personality"? In this case, the subject truck was built with a focus on flames, so I decided to use these three photos:
"glamour shot.jpg"
"side shot.jpg"
"steering wheel.jpg"
Once Photoshop fired up, I opened all three of the above files and created a new fourth file from scratch.
"file new.jpg"
The 500 pixel width x 150 pixel height are my own personal preferences for creating signatures for the forum that I'm a regular on. You should check your signature's destination forum to make sure that your dimensions comply with any limitations that may have been set for that forum.
72 pixels per inch is the best that most monitors can handle. If I were looking to make something printable, I'd go to 300 ppi or better. But I know that these are only intended for the web so it's all I need.
The background color is entirely up to you.
So, with my blank canvas ready to go, I copied the full size pics into the sig. With the selection tool chosen in Photoshop and one of the source images active, I use Ctrl+A to select the contents of the source image, followed immediately by Ctrl+C to copy them. I then click on the new file and use Ctrl+V to paste the image into the new file. Repeat this step for the remainder of the source images.
For Photoshop newbies, you can keep tabs on each element in the new signature file because they're on different layers as shown in the toolbar below.
"layer control 1.jpg"
To keep even better track on something that you know could be huge, it doesn't hurt to right click on each layer in this toolbar, go to properties and rename them since the thumbnails are so small.
With all of the pics in one master file, I went ahead and stretched out the workspace by clicking and dragging on the borders. You could also just optimize it so that this file is the only thing you see rather than all the files being tiled. This extra space around the sig comes in handy as you'll soon see.
Next thing up... resize and layout the pics in the position you want them. Handiest tool for this is the Free Transform. Make sure that you've got the layer you want to work with active (check the toolbar mentioned above), then right click on the sig and go to Free Transform. Now you can rotate, scale and move the pics. Here I've already started to scale the steering wheel down:
"resize layer.jpg"
Note: If you hold the Shift key on your keyboard while you scale the pic up or down (by grabbing and dragging the corners only -- it will not work if you grab the middle of one of the sides, top or bottom!!), it will keep the height and width proportional. Or you can click the chain-link icon in the toolbar at the top of Photoshop between the height and width percentage settings.
I went ahead and did this for all 3 layers. I planned on having the full pic of the truck as the top layer, followed by the steering wheel, then the flames down the side, so I went ahead and reorganized them in the Layer Control toolbar. Just click and drag the icons or layer names in the Layer Control toolbar to do this. Here the elements are in their final size, orientation and order from top to bottom:
"glamour.jpg"
"wheel.jpg"
"side.jpg"
Starting from the bottom (the background) and working up (towards the foreground) I decided I wanted just a little bit of a blur on the flame layer. So, with that layer active, I went to Filter => Blur => Gaussian Blur...
"blur.jpg"
Since I wasn't quite sure yet what I wanted to do with the steering wheel, I decided to move on to getting the original background out of the truck pic. Zooming in by pressing Ctrl++ allowed me to pay closer attention to the details. This is something that really requires a steady hand and some good hand-eye coordination, especially as you get nearer to the truck. I normally use a small round brush with hard edges. Here are two key things to keep in mind:
- For straight lengths, hold the Shift key, click at one end, then the other. Photoshop will connect the two points. Same thing works for the paintbrush and pencil tools.
- If you're not using the "dot-to-dot" type approach I described in #1, don't try to erase it all at once freehand. If you do and you spend the time on all the intricate details as you go around the truck (mirrors, etc.) and you slip up at the end, you'll have to redo all of it. Always move in short manageable lengths.
Here I've already cleared out around the front suspension and I'm starting on the nose of the truck:
"erase detail.jpg"
Another thing I normally do is take care of what can be seen through the windows. No need erasing all of the background around the truck if you missed the guy giving you the finger through the truck. I went ahead and erased the windows on the opposite side of the truck, but used the smudge tool to create a bit of a reflection on the near side windows.
Since the truck layer was active, I decided to set it off using the blending options. Right click on the layer in the Layer Control to get there:
"blending options.jpg"
And I thought an outer glow would be pretty cool...
"outer glow 1.jpg"
But wait... I don't want the halo to be visible where I erased the windows on the far side of the truck. If the Blending Options window is still open, cancel that blending option for a minute. Of if you've already hit "Accept" to close the window, you can use Alt+Ctrl+Z to step backwards and undo the blending options.
I changed the tool to the Polygon lasso like this:
"polygon lasso.jpg"
This lasso allows you to select an area in a "dot-to-dot" manner like holding the Shift key does for the other tools. Just click where you adjacent lengths of the selection to end, and when you get back to the beginning, look for a little circle to show up next to the lasso to close the loop:
"window fix.jpg"
Instead of doing a regular copy, I went to Edit => Copy Merged so that the void I had created when I erased the windows would be filled with the corresponding section of the flames from the background layer.
Edit => Paste to put this on a new layer. It lined right up with the area I copied it from.
Now, back to the truck layer and the blending options. I didn't want a pale yellow outer glow and I wanted to change the size too. So I clicked on the little yellow box to change the color, and used the sliders below there to adjust the size and spread of the outer glow.
"outer glow 2.jpg"
Now that it was coming together, I realized that I couldn't see much of the dash behind the steering wheel. So I erased it, leaving only the steering wheel. And in the blending options, I gave it a bit of a drop shadow.
To finish it off, I copied in the FSC logo from a separate file that I made up and I added the owner's username with the text tool. I toyed around with the font style and size a bit before I started experimenting with the blending options.
So, after about 2 hours (on a slow computer and including the time to take all the screenshots) here's the end result:
"cbraga.jpg"
The final steps are to save the PSD file just in case any future revisions are needed and to either "Save As" or "Save For Web" to create the image that will be used on the forums. I personally prefer JPG format so that I don't have to worry about transparency issue or file sizes too much. Here again, it's not a bad idea to check with the destination forum to determine what formats are considered acceptable.
As mentioned at the beginning of this tutorial, there are plenty of ways to achieve any given outcome. For example, if you wanted to erase an area or at least make it invisible in the final work, you can use the basic eraser tool, you can select the undesired area with a lasso tool and delete it, or you can use layer masks and paths to simply hide it. Don't be afraid to experiment with different tools and methods, blending options, filters or layer styles as you work through Photoshop. The worst that can happen is that you have to start over from scratch if you haven't saved your work along the way or at least set restore points.
Happy photoshopping and if you have any questions, please don't hesitate to ask.
Bob
aka Chuggs