If you live in the digital world, you might already know that Adobe® is a creative industry standard when it comes to software. You might also know that Adobe Photoshop® is the one of the more popular programs, generally used for editing photography, creating digital assets, and optimizing images for the web. If you’re looking to pick up a new creative hobby, break into the field, or are just curious to know how the magic happens, you’ll benefit to learn a thing or two from this Photoshop 101 lesson.
In this post, I’ll be providing a high-level overview of Adobe Photoshop® CC and some of its features. I’ll cover topics such as how to resize images, change color modes and pick color values, use adjustment layers with masks, and save files.
Crop is one of the quickest ways to resize, change the resolution, and remove unwanted parts of the image all at the same time. The crop tool can be found in the toolbar or the keyboard shortcut is the “C” key. From here you can enter specific height and width dimensions or leave it blank. You can also enter your desired resolution (300 for print, 72 for web) and then position the brackets around the part of the image you want to keep. Once everything looks like how you want it to, hit the “Enter” or “Return” key to complete the crop.
Another way to resize your images is to use the Image Size Dialog Box. This option is great if you are looking to simply scale an image down in size or change the resolution. Find it with the keyboard shortcut (“Command + Option + I” | “CTRL + ALT + I“) or in the menu (under Image > Image Size). Once the dialog box is open, to scale an image down in size, make sure that the chain icon is linked (this keeps the aspect ratio in proportion) and that the “Resample” check box is checked. Enter either the height or width and the other one will scale accordingly. Hit “OK” when done. If you are looking to change the image resolution, uncheck the “Resample” check box, enter your desired resolution and click “OK.”
Color Modes and Values
Before you save an image out, you should always make sure that the Color Mode is set appropriately based on intended use. If the image will be used digital for a website or something similar, set it to RGB. For print use, set it to CMYK. You can find the color mode option in the menu (under Image > Mode).
If finding out a specific Color Value (HEX, CMYK, RGB) in an image is of interest to you, use the Color Picker tool. This can be found in the toolbar, by double clicking on the two swatches near the bottom. Once open, you can click on an area in your image and that color will show up via the color picker with all the values listed to the right. This makes it easy to copy and paste the values that you need.
Adjustment Layers & Masks
Adjustment Layers are great for taking an image that looks lackluster and giving it life. Commonly used ones are Levels (adjust the brightness/darkness), Hue/Saturation (adjust the saturation level of color), Black & White (remove color), and Color Balance (remove a color hue or dominance). These layers can be accessed from the menu (under Image > Adjustments) but will be permanent and non-reversible changes, so when possible, use the ones available at the bottom of the Layers Panel. These adjustment layers are different because they use Masks, meaning the changes are reversible at any time.
Masks not only give you the ability to delete changes, but they also let you erase certain parts of the adjustment layer. Take a look at the example below and see how we applied a Black & White adjustment layer, but then used the mask to erase the flower, creating a pop of color.
To do this, you want to select the layer mask and then the Paintbrush Tool (located in the toolbar or keyboard shortcut “B”). Also make sure that your swatches at the bottom of the tool bar are set how you want (black in the foreground will erase, white in the foreground will add). Then start brushing away on the image!
Once an image looks exactly how you want it to, it’s time to save it out, however you need to decide which file type you will be saving for first, which depends on the type of image or graphic you have open.
- JPG – Use for photography (applies to print and web)
- PNG – Use for images with transparent backgrounds, logos, and photos with text overlaid on top (web-only).
- SVG – Use for graphics or icons that are made up of solid colors and shapes (web-only).
Now, to save the image out for print, go to File > Save (“Command + S” | “CTRL + S“) and then select JPG from the dropdown. If you want to save for digital or web use, go to File > Export > Export As… and open up the dialog box. From here you will have a few different options to choose from. The most important ones being Format (do you want JPG, PNG, or SVG?) and Scalable Sizes. Scalable Sizes are typically used for icons and graphics on iOS apps or responsive websites, which means you can output multiple sizes (-1x, -2x, -3x) of the same image. When you’re done customizing your options, you can “Export All” and save out the file.
Now that you have a better understanding on some of the features available via Adobe Photoshop® and how to use them, you can put this newfound information to the test by editing photos and creating graphics in your daily life!
Want to learn more? Leave us a comment below or tweet us with what YOU want to learn about in a Photoshop 102 post.