If you have any questions or comments about this tutorial, please post them here.
FIRST PART SECTION - Banner
This is a lengthly tutorial and I will break it down in sections. Our first section we will be making our banner in Adobe Photoshop 7. Second section we will be slicing our banner in Adobe Photoshop ImageReady for our links. Third section we will add our banner to our website. Note that the wavy image that I am going to explain to you how to make, I had already learned that from another tutorial from Voidix.
LET'S GET STARTED!
Open up Photoshop, and go to File/New and make a new image 385 X 150 pixels. Choose the Paint Bucket to fill in your new image with the color black, #000000 (HINT - If you left click you have the option of using the Gradient Tool, and vice versa)
Now if you do not have your layer window open, you can open it up by going to Window and clicking on Layers. Now that you have your Layer window open click on the Create New Layer button, and create a new layer it will looks like this:
It's best if you name your layers so you know which layer is which, to do this, right click on the layer you just made which will be named Layer 1 and then click on Layer Properties and name your layer. I named mine Wavy Image. Now that you have your new layer made and named, go to you menu and select the Polygon Lasso Tool (HINT - If you right click you have the option of using the Lasso Tool, and the Magnetic Lasso Tool and vice versa), looks like this:
Now using your Polygon Tool, go over on your left hand side of your image and make a design similar to mine, use your Paint Bucket Tool and fill it in with a color of your choice, I used #2C837E:
Anytime that you have the squiggly lines and want to stop them, go to CTRL D once you have Deselected your image, then go back to your menu and choose the Airbrush Tool (HINT - If you right click you have the option of using the Pencil Tool, and vice versa) looks like this:
Using the Brush tool, you can set your size to any size you like but I used a bursh size of 5 px and mode set to normal and opacity set to 55% and flow 25%, also I set my color to black and brushed around the edges a bit and in the middle. Then I followed using the Dodge Tool (HINT - If you right click you have the option of using the in the Burn Tool and the Spnge Tool, and vice versa) from the menu that looks like this:
I also zoomed my image up to 200% to work with. Minelooked like this:
Then go to Filter/Distort/Wave. I have mine settings to look like below:
Now go to your layer window and right click on your wavy image and choose to Duplicate Layer, then go to Edit/Transform/Rotate and rotate your image around a bit (HINT - after you have it rotated to the way you want it then click on the Enter key on your keyboard) Then go to your Layers window and you can set your mode, to screen for a different effect.
Mine ended up looking like this:
Now go to Layer/Merge Down. What this done was combined both wavy images into one. After you have done that then go to Filter/Distort/Wave Then go to Edit/Fade Wave and set to 30% On each layer go to Edit/Free Transform to widen and move your images around.
Repeat the steps above a couple of times to get your own desired affect mine looked like this:
Then go to Layers/Flatten Image. Then go to Edit/Adjustments/Brightness-Contrasts and play around with the settings to get your desired effect. I set mine on brightness -17 and +21. Now save your wavy image but don't close it out, just minimize the wavy image screen and then you want to make a new image (FILE/NEW) this time make it size 750 X 150. Choose the Paint Bucket to fill in your new image with the color black, #000000 Now minimize that screen and bring up your wavy image, this time using your keyboard you want to hold down the Ctrl and A at the same time, this selects all of the wavy image, then hold down Ctrl and C, then minimze the wavy image and go back to the solid black image and then hold down the Ctrl and V. What we just done was first selected the wavy image then we copied it and pasted it over to the black image. Now as you can see the wavy
image is taking up quite of bit of space, so what we are going to do is go to Edit/Free Transform and make it smaller and move it over to the left a bit. To clean up the area around the wavy image, use the Eraser Tool and the Dodge Tool a bit around the edges. Here is what mine ended up looking like:
Using your Eyedropper Tool, (HINT - If you right click you have the option of using the The Color Sampler Tool and The Measure Tool, and vice versa) you want to choose a color from your wavy image, once you have selected a color go and make a new layer and get out your Pencil Tool and draw a line across the top of the banner, leaving a bit of space at the top. (HINT - When using the Pencil Tool, hold down the shift button while you draw your line for a straight line) I also added a white
line right above the color I chose. With that empty space at top, use your Rectangular Marquee Tool, (HINT - If you right click you have the option of using the Elliptical Marquee, Single Row Marquee and Single Column Tools and vice versa).
Once you have your Rectangular Marquee Tool Selected, then make a new layer. Draw a box above the lines that you had drawn and use your Paint Bucket to fill in a pattern of your choice. If you have any questions about patterns, please refer to the pattern tutorial, Pattern Tutorial
Now go over to your menu and select the Move Tool,
and click on your wavy image, then go back to your Rectangular Marquee Tool and make a box somewhere in the wavy image, the hold down the Ctrl C and then hold down the Ctrl D to deselect. Then hold down the Ctrl V to paste the little box, and with your Move Tool, move the box over to the far right a bit. Duplicate this layer a couple of times and arrange the boxes around to your own liking. (HINT - If you select the Move Tool in the menu and click on each box at a time, this will select that box and you can change the colors a bit by going to Image/Adjustments/Hue and Saturation or Brightness/Contrast) Also you can go to Edit/Stroke and set your width to 1px and changing the color to what you want, puts a border around your box. My images ended up look like this thus far:
Making your navigation menu:
Now choose your Rectangular Tool and draw a box at the bottom of the banner and then add a new layer. Use your Paint Bucket and fill it with a lighter greyish color, I used #D6D4D4 Then make a new layer and use your Pencil Tool using the color black and add a line near the top of the greyish box you made leaving a little space of grey at the top. Now over at the bottom right hand corner use your Rectangular Marquee Tool again and draw a decent size box covering about half of the banner, this is where you menu will sit. (Refer to my image as a demonstration to what I am talking about) Once
you have drawn your box then make a new layer then you will want to use the Paint Bucket and fill it in with the color black. Click on Ctrl D to deselect. Using your Polygon Lasso Tool (HINT- Keep your shift button held down when using the Polygon Tool to make straight lines), draw a triangle like I have shown below in the black box:
Then on your keyboard, hit the Delete button. Then Ctrl D to deselect. Then go to Edit/Stroke and set your size to 1px and
then your color to white. Add your text for your navigation in there, you can refer to what mine looks like below to get an
idea.
***Before I go any further, I feel like I need to give you a crash course on nudging. Nudging will help you out TREMDOUSLY when you are trying to position layers. Example of what I am talking about is you menu for instance. Say you have your menu all typed out and you are finding that it is a little too high or too low for where you would like it. Well with nudging, you can position the way you would like your text to be. Make sure that you have your Move Tool selected in the menu and then
click right click the layer you want to move in the layer palatte and choose Rasterlize Layer, then with your up, down, right side or left side keys on your keyboard, you can nudge your layer into position. If you find this doesn't work for you, make sure you have your Move Tool selected and the right layer selected.***
Once you have your text done, then you go back to your wavy image and click on it, then use your Rectangular Marquee Tool and make a box around the center and make it the lendth of the wavy image and copy and paste the new image right above the text in the menu, use your Polygon Lasso Tool to clean up the edges so that it will fit. Also you will change the Opacity a bit, I set mine to 85%. But play with your settings to get a desired effect. I also used my Pencil Tool and added a white line just
below the new image. To get a better understanding where I am at, refer to the image below:
Now you have this grey space over on the left hand side, I suggest adding more patterns or lines or text there. And of course you will need to add your website's title in the empty black area. When you are finished with your banner, make sure to go to Layer/Flatten Image before you save it. Just play around with it, mix and match your own ideas!with what you have learned here! Here was my finished product, the next step is to slice it up in Photoshop Image Ready to use on your website! Go to Step 2 below ...
No comments:
Post a Comment