Create Fire Text Effect

Creating a website banner with a logo using Photoshop

Simple step-by-step tutorial on how to create a web site banner and logo in Photoshop. The sample .psd and completed website are also included.

Let's start with our banner.

Follow the below steps to create the above website banner :

Step 1 : Creating the banner size
Open a new file by clicking on File>Open. Make the file size width of 780px and height of 120px. You can go till 140px for the height. You can make a banner flexible according to your design.

Step 2: Giving the background color
Create a new layer. Name it bgcolor. Give a background color by doing the following:

• Change the foreground color.
• Click on the Paint Bucket Tool seen in the tools panel on the right.
• Click on the canvas with your mouse. Your background color is now changed to the new color.

Step 3 : Giving the inside background color
Create a new layer. Name it insidecolor. Select Rectangular Marquee Tool seen in the tools panel on the right. Make the rectangle size width of 760px and height of 100px inside the background. Fill it with color using the paint bucket tool.

Step 4 : Creating the logo background
Create a new layer. Name it logobkg. Select Rectangular Marquee Tool. Make the rectangle size width of 120px and height of 100px. Put the rectangle in the left side of the banner. Fill it with black color.

Step 5 : Creating a logo using the custom shape tool
Create a new layer. Name it logo. Choose the custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Ornaments. Look for the ornament which is in the banner.
Drag it in the logo space and position it so it comes in the middle of the logo background. Now you have a temporary ornament as a logo which can be replaced with your company logo if needed.

Step 6 : Creating the vertical lines in the banner
Create a new layer. Name it band. Select Rectangular Marquee Tool. Make the rectangle size width of 7px and height of 120px. Put the rectangle in the middle of the banner. Fill it with color. Make four copies of the layer band.

Step 7 : Creating the dashed lines
Now select the Horizontal Type Tool (text tool). Type" _________" using the hyphen key. Place it on the top of the banner. Make a copy, right click on the layer and click on duplicate. Place it at the bottom of the banner.

Step 8 : Adding your Company Name
With the text tool type your company name or website name with the color.


"Your website banner with the logo is ready"

Photoshop Basic Tools

Rectangular Marquee Tool (M)
Use this tool to make selections on your image, in a rectangular shape. This changes the area of your image that is affected by other tools or actions to be within the defined shape. Holding the [Shift] key while dragging your selection, restricts the shape to a perfect square. Holding the [Alt/Opt] key while dragging sets the center of the rectangle to where your cursor started

Move Tool (V)
Use this tool to, well, move things. Usually you use it to move a Layer around after it has been placed. Hold the [Shift] key to limit the movements to vertical/horizontal.

Polygon Lasso Tool (L)
Ok, this should be the Lasso Tool, but I use the Polygon Lasso a lot more often. Use this to draw selections in whatever shape you would like. To close the selection, either click on the beginning point (you’ll see the cursor change when you’re on it), or just double-click. When holding the [Ctrl] key, you’ll see the cursor change, and the next time you click, it will close your selection.

Magic Wand Tool (W)
Use this to select a color range. It will select the block of color, or transparency, based on wherever you click. In the Options Bar at the top, you can change the Tolerance to make your selections more/less precise.

Crop Tool (C)
The Crop Tool works similarly to the Rectangular Marquee tool (see above if you have no short-term memory). The difference is when you press the [Enter/Return] key, it crops your image to the size of the box. Any information that was on the outside of the box is now gone. Not permanently, you can still undo.

Slice Tool (K)
This is used mostly for building websites, or splitting up one image into smaller ones when saving out. It’s kind of an advanced tool, and since you’re in here for the basics, we’ll kind of skip over it. Kinda makes you mad I made you read all that for nothing, huh?

Healing Brush Tool (J)
This is a really useful tool. Mildly advanced. You can use this tool to repair scratches and specs and stuff like that on images. It works like the Brush tool (see below). You choose your cursor size, then holding the [Alt] key, you select a nice/clean area of your image. Let go of the [Alt] key and paint over the bad area. It basically copies the info from the first area to the second, in the form of the Brush tool. Only, at the end, it averages the information, so it blends.

Brush Tool (B)
This is one of the first tools ever. It’s what Photoshop is based off of. Well, not really, but it’s pretty basic. It paints one your image, in whatever color you have selected, and whatever size you have selected. There’s a lot of options for it, but this is basic, so you don’t get to learn them. Ha.

Clone Stamp Tool (S)
This is very similar to the Healing Brush Tool (see above). You use it the exact same way, except this tool doesn’t blend at the end. It’s a direct copy of the information from the first selected area to the second. When you learn to use both of these tools together in perfect harmony, you will be a Photoshop MASTA! Not really, it’s just less irritating.

History Brush Tool (H)
This tool works just like the Brush Tool (see above) except the information that it paints with is from the original state of your image. If you go Window>History, you can see the History Palette. The History Brush tool paints with the information from whatever History state is selected.

Eraser Tool (E)
This is the anti-Brush tool. It works like an eraser (duh) and erases whatever information wherever you click and drag it. If you’re on a Layer, it will erase the information transparent. If you are on the background layer, it erases with whatever secondary color you have selected.

Gradient Tool (G)
You can use this to make a gradiation of colors. Gradiation doesn’t appear to be a word, but it makes sense anyway. It creates a blending of your foreground color and background color when you click and drag it. Like a gradient.

Blur Tool (R)
The Blur tool is cool. It makes things blurry. Click and drag to make things blurry. The more you click and drag, the blurrier things get.

Dodge Tool (O)
This tool isn’t as crappy as the car brand. It’s actually used to lighten whatever area you use it on. As long as it is not absolute black. Absolute black won’t lighten.

Path Selection Tool (A)
You use this tool when working with paths. Since this is all about the basics, I won’t go into details. It’s related to the Pen Tool (see below) though.

Horizontal Type Tool (T)
It makes type. Or text. Or whatever you want to call it. You can click a single point, and start typing right away. Or you can click and drag to make a bounding box of where your text/type goes. There’s a lot of options for the Type Tool. Just play around, it’s fairly straight-forward.

Pen Tool (P)
I mentioned this tool above. It’s for creating paths, in which you would use the Path Selection Tool to select the path. Paths can be used in a few different ways, mostly to create clipping paths, or to create selections. You use the tool by clicking to add a point. If you click and drag, it will change the shape of your path, allowing you to bend and shape the path for accurate selections and such.

Rectangle Tool (U)
By default it draws a Shape Layer in the form of a rectangle. It fills the rectangle with whatever foreground color you have selected. It’s pretty complicated, don’t hurt yourself with this one.

Notes Tool (N)
Like post-it notes, but digital. You can use this tool to add small little note boxes to your image. These are useful if you’re very forgetful or if you’re sharing your Photoshop file with someone else. I’m pretty sure it only works with .PSD files.

Eyedropper Tool (I)
This tool works by changing your foreground color to whatever color you click on. Holding the [Alt] key will change your background color.

Hand Tool (T)
You can really make short work of your job with the Hand Tool. It’s for moving your entire image within a window. So if you’re zoomed in and your image area is larger than the window, you can use the Hand Tool to navigate around your image. Just click and drag. You can get to this tool at any time when using any other tool by pressing and holding the [Spacebar].

Zoom Tool (Z)
Pretty obvious what this tool does. It allows you to zoom into your image. Don’t be dumb, it doesn’t actually change the size of your image. Hold the [Alt] key to zoom out. Holding the [Shift] key will zoom all of the windows you have open at the same time. Double-click on the Zoom Tool in the palette to go back to 100% view.

Foreground Color and Background Color
These are your color boxes. Foreground (in the front) and Background (in the back). Click on either one to bring up the color select dialog box.

Photoshop Indroduction

Adobe Photoshop is quite simply the most popular program being used for web design and other related tasks. Additionally, it is also the leader of the Photoshop digital imaging line

Overview
Photoshop is available on the three main platforms consisting of Windows, MAC and Linux. Photoshop has now started to be used largely in the internet industry because of the large amount of features and facilities that it has to offer, including vector based graphics which are very popular with web design. Photoshop allows you to save a file type relative to photoshop (PSD) which will allow you to edit all the existing properties of an image without you have to create the image again

Photoshop Uses

1. Graphic Artists
2. Web Designers
3. Print Designers
4. Visual Communicators

Photoshop is used for. Some specific examples are as follows:

1. Web Graphics
2. Internet Images
3. Photo Manipulation
4. Printing Publications

Photoshop Features

1. Batch processing
2. Color replacement
3. Shadow/highlight correction
4. Warping and brushing
   
5. Noise reduction
6. Special effect filters

Used Products

• Adobe Image Ready
• Adobe Premier
• Adobe Photoshop Elements
• Adobe Premier Elements