Note: All tutorials are the properties of their respective creators. This site does not claim ownership of these tutorials and merely providing documentation on the experiences of the user while attempting to follow these tutorials.

Designing a Simple Website Banner
This week's review involves entheosweb.com's Photoshop tutorial of how to design a simple website banner with a logo using Photoshop, aptly titled "Designing a simple website banner with a logo using Photoshop". Let's see how good this tutorial is.

Premise:

The tutorial explains that it's a simple step-by-step tutorial and provides not just a demo of the logo in action, but also a downloadable PSD file. The tutorial is broken down into 10 simple steps. I will go and follow each step while presenting my own comments on each step.

The Tutorial:

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."

The first mistake comes immediately from the first line. The tutorial asks that I create a new file by choosing the Open option, which is wrong. It should be File>New, but that's a minor thing. I think most people won't even be bothered by this. Assigning the width and height are as simple as it gets.

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 to #E4D1B8.
    * 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.

Another mistake is evident from this tutorial. Surprisingly, it's the first instruction again, although really, Step 1 is actually for blame. When creating a new file, the tutorial does not specify that the background be transparent. If someone had the background to be defaulted to White, then the new file created will start immediately with a "Background" layer, which will supersede other layers on top of it.

Of course, for this case, since it's just a background color change, it's fine. But if you happen to edit directly on the Background layer, you would have some problems later down the line when you realize the layer does not support transparency.

Let's pretend that we did not face this issue and things are still rolling smoothly. The tutorial is helpful in identifying what the Paint Bucket Tool by giving an image of the tool, so it's easy to find. Applying the tool to the layer is very basic too. It does assume that you should know how to change colors. And I agree. Photoshop is not a plug-n-play type of software. It is very powerful, and has a tough learning curve. Otherwise, people would not need to be making tutorials for others.

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 # C64866 using the paint bucket tool.

The tutorial keeps it vague on how to create a new layer and how to name it. There are two simple methods. One is to go to the top of Photoshop and under the Layer drop down menu, the first option is "New" and from there you can choose a new layer, which also pops open a window asking you to name the layer. The other easy way is to look at the Layers console normally on the bottom right of the Photoshop screen, and click on the New Layer icon which is right next to the Trash Can icon. This will quickly create a layer, but you will have to double click on the newly created layer's Layer Name to change it. That's if you even bother to name the layers. I personally am too lazy to name my layers.

The next step, although compressed into one line, could be quite complicated for the novice user. Assuming one knows the Rectangular Marquee Tool, the person may not be aware how to create a rectangle with a set width and height. When you select the Marquee Tool, under the menus is the Options bar, which displays some options. By default, the options for the Marquee Tool have the "Style" set to Normal. In order to create a set width and height, you would have to change "Normal" to "Fixed size". We will save "Fixed Ratio" for some other day. So when Fixed Size is chosen, then you are given the option to set the width and height of the rectangle marquee you are going to need for this tutorial.

After setting that up, things are again simple enough. Moving on.

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 # 000000.

This is basically a repeat of step 3. So there's nothing to comment here.

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.

My custom shape tool is actually on the left side. So some caution should be taken for both tutorial giver and reader to understand different people have different Photoshop layouts.

What this part of the tutorial fails to explain is that in order to create the shape, one must click on the canvas, and then with the mouse button down, drag the mouse in order to create the shape. Another failure is that it fails to indicate that this shape needs to be set to either create a new layer or fill in the shape with a color, not to mention a white color for that matter.

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 # E8B0BD. Make four copies of the layer band.

To make a copy, right click on the layer and click on duplicate. A screen named Duplicate Layer will appear.

Enter name of the layer as band copy. Click on OK. Do the same with band copy2, band copy3, band copy4. Place the bands properly in the banner.

This step is fairly simple and straightforward, and works well for the beginner/novice Photoshopper. However, for increased simplicity, a user can simply press CTRL+J to make duplicate copies of the current layer. Faster than right clicking and so forth. But, again, this is for the novice user, who would not have the experience yet to start using shortcuts.

Step 8 : Creating the Logo Border
Create a new layer. Name it border. Select Rectangular Marquee Tool. Make the rectangle size width of 20px and height of 100px. Fill it with color # A63D56. Put the rectangle on the right of the logo background. Make a copy and place the new rectangle on the left of the logo background.

I didn't make a mistake here. The tutorial did. There's no step 7!! But let's move on and see if 7 is actually missing, or this was just mislabeled. This step is simple as well. The only complaint is that it does not instruct the user on how to move the layer underneath the logo image. It's fairly simple to shuffle layers around in the Layer console, but may take some time to understand what it means to work in layers.

Step 9 : 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.

There are many ways to perform this technique, and I actually like this person's creative use of the Text tool to create the dashed lines. Again, very simple step.

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

This one is as easy as it can get really. The tutorial leaves it up to the user to decide the font, the color, the size of the font, and even the position.

The Results:

If I were to blindly follow the tutorial, I would probably make it to the end with a few roadblocks in the way if perhaps I didn't know how to fill in the shape of the logo or knowing the layer order/precedence of the layers. Of course, the provided PSD file would help a ton, if absolutely required.

Considering myself as a mid-level/slightly advanced user, it's easier for me to understand what each step of the tutorial was telling me. Advanced users probably would not need this tutorial to replicate the results, so this is definitely for the beginner user. My result matches the tutorial's quite closely.

The Conclusion:

A relatively simple tutorial. There are many assumptions that are made by the tutorial; some good assumptions, some not so good. Overall, with the visuals, the provided samples, and the thorough breakdown of steps, I would say 95% of people following this tutorial will be just fine. The leftover will probably run into the problems of lack of information and direction that I pointed out earlier.

So here's the breakdown:

Ease of use: 8/10
Thoroughness: 6/10
Tutorial Time: 9/10
Usefulness: 8/10

Recommended?
Yes, only if you are a beginner of Photoshop and just learning the ins and outs of the program.