Introduction to Photoshop

To begin using Photoshop you must first understand how to navigate your work space. Once you open and load up Photoshop you will be greeted by a start up window and your work-space in the background. Even before opening a new document, go ahead and close that start up window so we get a clear look at our work-space. At the very top you will find the Drop Down Menu, on the left side you should see your Tools, and on the right side you should see Color, History, and Layers.Photoshop_01 If you don’t see these in your work space, you can go ahead and click on the “Window” tab in your Drop Down Menu where you will be able to turn on all the windows mentioned above simply by clicking on them.Photoshop_02 Now to create a new document simply Click on “File” in the Drop Down Menu and select new or click Control+N for the hotkey. Once you’ve done that you will get the following pop up window asking you to create the name, dimension, and aspect ratio for your document.Photoshop_03A.png Just change the background Contents to “transparent” and leave the rest as default for now. Now press “Ok” and now you have a brand new Untitled document with 1 layer.

Once you have a document to work in, you can begin testing out some of the tools on the left:

  • The Select Tool (V) is used to move select and move objects in your layer.Photoshop_04
  • The Rectangle/Oval and other Shape tools can be used to create basic shapes, good for a base start or with holding down Shift you can make uniform shapes like square and circles.
  • Type can be used to write out things and it allows u to edit the font and u cane use the select tool to place type instead of typing it as well.
  • The Eyedropper Tool (I) Lets you sample colors. Get the Hex values for any color in Photoshop by selecting the eyedropper and sample a the color you want to see the hex value for then double click on the color on the bottom left of your tool bar. Or you can simply right mouse click on the color with your eyedropper tool and select Copy Color’s Hex code. Now you can paste this value anywhere until you copy something else.

On the left you should  be aware of your Colors, History, and Layers:

  • Colors can be selected in your colors panel and even easier by double clicking on your colors on the bottom left.
  • History allows you to backtrack through any mistakes.
  • Layers are extremely important in Photoshop.
    You can turn visibility of your layers on or off by clicking on the little eyeball icons Just to the left of your active layer.
    turn off the invisibility of all the layers by clicking the eyeball at the top of your layer panel.Option + left click to eyeball to isolate layer
    You can lock any layers that you don’t want to accidentally work on by selecting those layers and clicking the little lock icon on top of your layers panel.
    You can merge layers down with “Command + E”
    You can also apply blending modes to your layers by opening the little drop down menu on the top left of your layers: Some of your options are Multiply which burns your white, the Screen which removes your blacks, and Overlay removes both your blacks and whites, just leaving your mid-tones.
    You can also apply Vector Masks to your layer by clicking on the little washing machine icon on the bottom left hand corner of your layers panel. When working in vector masks, you can hide sections of your layer by painting black on your vector mask and you can reveal things with white. Any grays will make the areas of the layer transparent.
    “Alt + Left mouse click” on a vector mask to isolate the mask from the layer that the mask is applied to or “Shift + Left mouse click” on the mask to hide it from the layer.

When it comes to saving a file in Photoshop you have two options at your disposal:

  1. You can go to your Drip Down Menu and open File > Save (Command +S) to overwrite your file or File > Save As (Shift + Command + S) witch will prompt you to choose a location for your new file. If you have no file on your system to overwrite then “Command + S” will go straight to Save As to prompt you to name and find a destination for your file. This method is good for preserve your resolution.
  2. Often it is a smart idea to export your image properly, especially if you plan on using your image for web where you want your files to be as small as possible. So to make a proper web image you can go up to File > Export and click on Export for Web in your Drop Down Menu or “Shift + Option + Command + S” on your keyboard. Here you can preview what your exported image will look like in a browser by selecting a browser on the bottom left of your “Save for Web” pop up window. You will then see another pop up window and ether search for your browsers individual or click “find all” to get all the browsers on your system. to preview it as a background on web you need to go to your drop down menu on the top right of your “Save for Web” window and click on “Edit Output Settings”. in this new pop up window change your HTML to background and press OK.

When choosing a format for your files, PSDs (Photoshop Documents) will preserve everything in your Photoshop document so you can edit it later if necessary. The downside to this is that the format is pretty much not supported anywhere outside of the adobe suite and the file size is absolutely massive. So if we want to post our image on the web or just simply to cut down on file size, we have the three major image extensions most commonly used online to consider:

  • JPEG/JPG (Joint Photographic experts Group):
    Supports Millions of colors
    Ideal for subtle tonal shifts
    Saved with a lossy compression (~10-1 ratio of how much information is lost)
    Data discarded with every save

    When exporting your images as JPEGs/JPGs, your file size as much as possible without ruing the quality of the image. Usually the quality sweet size is between 60-80 and since there is no transparency you can also change you background color by changing the Matte color.

    jpeg
    JPEGs/JPGs are ideal for large images and photos, just make sure to use your source graphic to make any edits.
  • GIF (Graphics Interchange Format):
    Supports up to 256 colors (8 bit graphics)
    Saved using lossless compression
    Limited animation support
    Ideal for solid colors / small images

    gif
    GIFs are ideal for thumbnails, icons, solid colors and are good for images that need to have transparency. But they are bad for gradient colors and the fewer colors you select the more dithering you will get.
  • PNG (Portable Network Graphics)
    Supports millions of colors (24 bit images)
    Designed to replace GIFs
    lossless compression
    supports gradient transparency (alpha channel)

    png
    PNGs are the best of both GIFs and JPEGs but they have a noticeably larger file size. They also have spotty older browser support like Internet Explorer 6, which doesn’t support the transparency for PNGs.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s