Beginners' Guide to Adobe Photoshop

Ever wanted to learn how to use Adobe Photoshop, but had no idea where to start?

Most Adobe Photoshop tutorials (including my own) are for people who are already familiar with Adobe Photoshop. This tutorial goes right back to the DAWN OF TIME! :) ...and is designed for the Adobe Photoshop beginner.

It gives you the very basic features you need to know to start using Adobe Photoshop. From there, you'll quickly discover most of the other features of the program.

The images in this tutorial are from Adobe Photoshop 7.0, but they're very similar to those from earlier versions of Photoshop.

Umpisa..

Click File > New, and create a new image of any size you desire.


Introduction to Photoshop

1 – Setting Adobe Photoshop's Undo option
Press Ctrl+K to bring up the Preferences window. (In Adobe Photoshop 5.0, you'll need to click on the Settings tab, on the File menu.)

Change your "Redo Key" to Ctrl+Shift+Z. This enables you to press Ctrl+Z while working to undo your last actions. Remember this.



2 – Using Adobe Photoshop's Layers window
The Layers window shows the various layers that your image is made up of.

To make a new layer, click the New Layer button, as shown by the red arrow.

To work on a different layer, click on that layer. The eyeball will apear next to that layer.

You can drag layers up and down the list.

Remember – create a new layer for each part of your image. This allows you to go back and edit the layers individually. Every Adobe Photoshop novice at some time makes a masterpiece, only to find out that they did it all on one layer, kaya minsan 'di na nila mapalitan o mabago kung anuman ang nagawa nila dahil isang layer lang ang ginamit. o_o' *common mistake*



3 – Learning about Selection
One of the most important concepts in Adobe Photoshop is Selection.

This is the Rectangular Selection Tool.

Use this tool on your image to select an area of the image. This lets Photoshop know that that's the area you want to work on.



4 – Adding to a Selection and making a square
To add to a selection, hold Shift before dragging.

To make the selection exactly square, start dragging, then hold Shift.

You can press Ctrl+D to "deselect" and remove the selection at any time.



5 – Elliptical Selections and subtracting Selections

Hold down on the Selection Tool on the Toolbar, and choose the Ellipse.

To move the selection, just click inside it and drag.

Holding Alt while selecting subtracts that area from the selection. I've done that with the Ellipse Selection Tool.



6 – A Selection exercise
If you're following this tutorial in Adobe Photoshop, see if you can make these shapes.

Other relevant Adobe Photoshop tools

Lasso Tool – Allows you to draw a selection area with the cursor.

Magic Wand – Summons elves. (Also believed to select an area of one colour.) :P



7 – Choosing a colour
Now that you know how to select an area in Adobe Photoshop, we can look at some tools that can do something with that area.

Before we get started on colouring your selection, you'll need to pick a colour.

This part of the Toolbox is where you select your colours.

The top square is the foreground colour. If you use a brush or paint bucket, it will apply this colour.

The bottom square is the background colour. It has various purposes, but it's also a good place to store a second colour that you're using.

Click on either square to change its colour.
Click the arrow to swap the two colours.
Click the little squares to reset the colours to black and white.



8 – The Paint Bucket and Gradient tools
These two tools are on separate buttons in Adobe Photoshop 5.0, but share a button in Adobe Photoshop 6.0 and Adobe Photoshop 7.0. To select one, click and hold.

On a new layer, just click the Paint Bucket tool inside the area of your selection to fill it with the colour you've selected.

Click and drag from one area to another to fill the area. The point where you started to click will be the colour of your foreground colour, and the point where you took your finger off the mouse button will be the colour of your background colour. The area in between will gradually change from one colour to the other.

In this case, I went from corner to corner, with the default white and black selected.



9 – A colour exercise
With what you've learned so far, you should be able to recreate this piece of hippy history. :)

Remember to create each step on a new layer.

Other Adobe Photoshop tools of interest include

The Text Tool – Just click it wherever you want text to appear. Choose a font, colour, and size, and start typing.

The Move Tool – Use this tool to drag things around. If you have a selection, it will drag the contents of the selection. If not, it will drag the contents of the layer you're on.



10 – Adding Effects
Now that you know the basics, it's time to start adding some easy special effects.

To demonstrate Adobe Photoshop's special effects, here's an unembellished button for a website.

Each part of this image is on a separate layer.

11 – Key Adobe Photoshop Blending Options



In the Layers list, right-click on a layer, and select Blending Options (Adobe Photoshop 6.0 & Adobe Photoshop 7.0) or Effects (Adobe Photoshop 5.0.)

This is a picture of the left-hand portion of the Blending Options window that will appear. (The window is much smaller in Photoshop 5.0.)

Drop Shadow
Selecting this option will make your layer cast a shadow on layers below it.

Bevel and Emboss
Makes the layer like a block of gold bullion - raised in the centre, with edges that slope down. (This is a good effect for creating buttons.)

Texture
Makes the surface of the layer look like it's made of wood, stone etc. Use the "Overlay" setting.

Stroke
Stroke is just another word for "outline". A Stroke is useful to make an object stand out from its background. (In Adobe Photoshop 5.0, this option doesn't exist. Use Outer Glow as an alternative.)



12 – The end result
Other than using some of the Blending Options, nothing else has been done to this button.

It's really that easy.

A final few Adobe Photoshop features

Zoom: Press (Ctrl and +) to zoom in. Press (Ctrl and -) to zoom out. This is very useful if you're a bit of a pixel pirate :)

Transformation: To Transform (resize/rotate/distort) an object, press Ctrl+T. To Transform a selection, click Select > Transform Selection. Use the Shift key while transforming to stop the image distorting.


"Special Message"
I hope this tutorial has helped you get the idea of Adobe Photoshop. You can now face the "wall of random icons and palettes" with confidence. :)

Happy Photoshopping!
Ayayaykid.blogspot.com
Katanungan i-PM aq s YM: idontloveu2
~AYAYAY~

Creating a Web Page Header in Photoshop Part 2

7 – Making an uneven Gradient
Click on the Gradient Tool. Then click on the visual representation of the gradient (Adobe Photoshop 6.0 and Adobe Photoshop 7.0) or click on the Options tab and then click Edit (Adobe Photoshop 5.0.)

Put in an alternating series of about eight black and white tabs, as shown, and click Ok.



8 – Applying the Gradient
Create a new layer. If the blue area isn't already selected, Ctrl+Click the layer that the blue area is in.

Click on your new layer in the layer list, and apply the Gradient Tool across it. Change the layer from Normal to Overlay.



9 – Choosing a colour and texture
Press Ctrl+D to deselect your selection. Click on your blue layer again. Press Ctrl+U to bring up the Hue/Saturation properties. Play with the sliders until you've got a nice colour.

Although Adobe Photoshop 6.0 and Adobe Photoshop 7.0 have special texturing effects, I still prefer the old Sandstone texture. Click Filter > Texture > Texturizer, and choose "Sandstone".

Whenever you make anything coloured in Adobe Photoshop, always play around with the Hue/Saturation Properties (Ctrl+U) to see if you can find a better colour. Don't be afraid to reduce the saturation - your image may look drab at first, but you'll find it will add some realism.



10 – Creating a watermark
Click on your topmost layer in the layers list.

Click on the text tool and type "kj" in Wingdings font, with the colour set to black, and the font size set to 100 or more. Change the layer from Normal to Overlay. This is a simple way of creating some nice swirly watermarks.

You may notice, however, that parts of the watermark extend over the edge of the area and into the shadow.



11 – Cropping the watermark
Right-click on your swirly watermark layer in the Layers list. Render it (Adobe Photoshop 5.0) or Rasterize it (Adobe Photoshop 6.0 & Adobe Photoshop 7.0). It can now be edited.

Ctrl+Click on your gold-coloured layer to select it. Press Shift+Ctrl+I to invert your selection (this selects the white area) and press Delete.



12 – Creating a button layer
In the layers list, Ctrl+Click on your gold layer to select it. Create a new layer and drag that new layer almost to the bottom of the layers list.

Select a colour (I've chosen orange here) and fill the area with the Paint Bucket.

Select the Move tool and press the down key several times to move the layer downwards.



13 – Making notches with the Freeform Pen Tool

Press Shift+P to switch to the Pen Tool. Make a series of points as shown, simply by clicking to place the points. Photoshop will connect them with straight lines.



14 – Cutting the Selection
Right-click the line you've made, and select Make Selection. Press Delete to cut the selected area, leaving you with these buttons. Press Ctrl+D to deselect the area.



15 – Putting text on your buttons

Using the text tool, put in some black text on each button. With a short amount of text, you can just rotate it slightly (press Ctrl+T) instead of trying to use curve effects on it.



16 – Inserting some header text

Add in some header text, in white. It looks nice as it is, but due to the varying darkness of the header image, some parts of the text don't show up properly.

On the layers list, Ctrl+Click on the gold layer to select it, choose the Selection Tool, then hold Alt and drag the cursor across the top of the selected area, to cut the top off the selection, then do the same for the bottom, leaving just a band.



17 – Making the semitransparent band

Create a new layer at the top of your layer list and reduce its opacity to 30% or as much as you feel is necessary.

With the Paint Bucket tool, fill the area with black.

Save the picture For the Web (on the File menu) as a jpeg with quality 60. In your web page editor, select the Hotspot tool and draw an area over each button to turn them into links.

That's it! :)
Whew... hirap din mag-english englishan..
LOL..
Credits to: Speaking English. (hahaha)



Kung mayroon po kayong mga katanungan 'wag kayong mag-atubiling i-PM ako sa aking Yahoo Messenger(YM): idontloveu2@yahoo.com.ph / pulp_studio@yahoo.com
Kung gusto niyo magpadala ng liham, dito na lang: ayayks@yahoo.com

MARAMING SALAMAT

Creating a Web Page Header in Photoshop

Creating a Web Page Header in Photoshop
The most important graphical element of any website is its header image. It's the image that will be seen more than any other on your web site, so it's important to get it looking good.

This tutorial gives an example of how to use Adobe Photoshop to make a graphical header image for your web page, that has some button functionality too.




1 – Creating some curves with the Freeform Pen Tool
Open Adobe Photoshop and make a new image. Set the image's width to the width you'd like your header to be on your web page.

Hold down on the Pen tool, and select Freeform Pen. Draw a small line. (Make sure you have the "Paths" option at the top left of the screen selected.) You can hold down Ctrl and drag the points around, or you can manipulate a single point by dragging its "arms". Remember to always hold down Ctrl while you do it.

Use curves liberally in your web pages. A number of factors, including the easy use of tables, has made modern web design very straight-edged. By using curves in your pages, you can give your page a much more organic feel.




2 – Manipulating the Path
Hold down Ctrl and drag one point to each side of your image. Drag the arms away from the points to make the curves more gradual. To see outside the canvas, you may need to maximise the window you're working in, or zoom out (Ctrl -).




3 – Extending the Path
It's important that you form a whole shape with the Freeform Pen tool. Simply creating a line isn't enough.

Without pressing Ctrl, click on the line just next to the leftmost point. This will create a new point. You can then drag the leftmost point up above the top of the image as shown.




4 – Creating a full circuit
Repeat the process, by clicking just below your highest point, to make a new point and then moving your highest point way over to the right.




5 – Creating a selection and filling it with the Paint Bucket
Right click your line (you must right-click a part of the line that's inside your image.) Click Make Selection. This connects the last point on your line to the first point. (In Adobe Photoshop 5.0, you may have to right-click again and click Turn off Path, to make the line go away. In Adobe Photoshop 6.0 and Adobe Photoshop 7.0, it's automatic.)

Make a new layer, select a colour, click on the Paint Bucket tool, and fill the selected area.




6 – Creating a shadow and bevel
Right click on your layer, and select effects (Adobe Photoshop 5.0) or Blending Options (Adobe Photoshop 6.0 and Adobe Photoshop 7.0). Give the layer a Shadow and an Inner Bevel.