Table of Contents
Learning Photoshop is fun and easy, if you’re willing to learn. Actually, that sentence can be applied to learning anything, but in this guide you’ll be learning Photoshop, as you did in Part I and Part II of our Photoshop series.
Just so you know, it is recommended that you read both of those earlier manuals before reading this one. They cover material that this guide builds on.
The best way to master any software is to practice while reading step-by-step tutorials. Don’t just read – do. As the saying goes “Knowledge is nothing without practice.” If you just read this, you won’t remember anything, so it’s important to practice as you read – then you will be familiar with the process and tools you used and you will be able to apply your knowledge later.
So don’t just sit there. Load Photoshop, find some photos to play with and follow these instructions as you read.
After finishing this chapter of the series, you will learn a bunch of Photoshop tools and techniques. If anyone asks, you’ll be able to say “Yes, I do know Photoshop”. You just need to keep practicing.
There are always several ways to do something in Photoshop; the most important is to learn the basics – the rest is limited only by your imagination.
So, what you will learn this time?
First, we’ll go through the most important Photoshop tips and tricks that will make your life easier and dramatically save you time. Then, I’ll show you how to create a YouTube banner with links (this requires a YouTube Partner account). After that, I’ll teach some basic techniques on photo retouching and how to quickly create a silhouette from a photo.
As I said before, the main thing is to learn how to use tools in different situations, so, as we proceed, try to imagine how you can apply certain tools for your needs.
One thing more, I really recommend downloading and printing the Photoshop Cheat Sheet (shortcuts) by MakeUseOf – it’s a great time-saver.
Just so you know, I am using Adobe Photoshop CS5 (and highly recommend it), but don’t worry if you are using an older version: almost all tools are the same, and I will point out the ones that are new.
Also note that I’m using Windows, not a Mac. These tips and tricks will work for Mac users, but they may require slightly different keystrokes. You’ve been warned.
2.1 Multiple Undo
In most programs, Ctrl+Z will undo actions you’ve taken, allowing you to go back in time as far as you want. In PS, Ctrl+Z only goes one step back, and repeating will only “undo the undo”. Want to go back further? Press Ctrl+Alt+Z.
2.2 Quickly Resize Current Brush
To quickly resize your brush: use “[" to reduce and "]” to enlarge.
2.3 Set Foreground/Background To Default
Default colors for the foreground and background are black and white respectively, both colors you will frequently need. If you’ve changed these two colors, but need black or white, just hit “D” on your keyboard to bring back the defaults: black and white. This is very quick compared to bringing up the color palette and changing the colors manually.
2.4 Switch Foreground/Background Colors
To switch between foreground and background colors, simply hit “X”.
2.5 Fill With Color
To quickly fill a selection or layer with the foreground color, use Alt+Backspace. Ctrl+Backspace will fill with the background color.
2.6 Reset Rather Than Cancel
Sometimes, when you use a filter or any other tool to edit an object or image, you may mess up everything. Not wanting to destroy your picture, you press Cancel in the tool dialogue box only to re-open the tool and start over. Is that you? Well, here’s a better solution. While still in the dialogue box, hold Alt and press Reset, which will appear where “cancel” was before.
2.7 Select Multiple Layers
To select two or more layers, hold Ctrl and click on the desired layers. If you want to select a number of consecutive layers, hold Shift, click on the first layer and (still holding Shift) click on the last one. All layers between these two will be selected.
2.8 Draw a Perfect Line With a Brush
To draw a straight line with a brush just click where you want the line to start, then Shift+click at the endpoint (works with 45° angles).
2.9 Re-use The Last Filter
Have you used a filter once, but think you need to do it once more? Use Ctrl+F. Remember, it works only if you have used a filter earlier.
2.10 Duplicate a Layer
There are a few different ways to do this, but the fastest is Ctrl+J. Make sure you have a layer selected.
2.11 Resize an Object While Keeping The Aspect Ratio
To resize any object without distortion, enter Free Transform mode with Ctrl+T, hold Shift and stretch or shrink the object with your mouse. Holding Alt+Shift will resize the object with respect to its center.
2.12 Quick Distort
If you want to distort an object or selection, use Ctrl+T (Free Transform) and hold Ctrl to distort it. The longer way: with Free Transform active, right-click on the selection and choose Distort.
2.13 Create a New Layer Below/Above an active one
Sometimes you need a new layer below or above an active one, so you press the New Layer icon then drag the fresh layer under or over the active layer, right? Here’s a quicker way: hold Ctrl or Shift and click on the New Layer icon to put a new layer below or above, respectively.
2.14 Fade Last Filter
Do you feel like the filter you applied is too much? Use Fade. Shift+Ctrl+F (Edit->Fade…), then play with options in the dialogue box until you get what you need:
2.15 Turn Background Into A Regular Layer
I hate the lock icon on the default Background layer, which prevents me from making changes to that bottom layer. If you do too, unlock it by dragging the lock icon to the trash icon . That’s right: just click and drag the lock to to the trash can at the bottom-left of the layers panel and you’re done.
2.16 Drag the selection
After a selection is made, you can drag it wherever you want by holding the Space key (without releasing the mouse):
2.17 Navigate the workspace left/right/up/down
To navigate to the left or the right, hold Ctrl and scroll down or up, respectively.
To navigate up or down, just scroll up or down without Ctrl.
2.18 Copy visible and paste into a new layer
Press Ctrl+Shift+Alt+E together and you will copy all visible elements and paste them into a new layer.
2.19 Quickly change the workspace Background color
There are two quick ways to change the workspace background color:
a) Right-click on it to choose from a few different colors:
b) Choose the Paint Bucket tool, select a foreground color and Shift+click on the background.
2.20 Quickly Load Layer Selection
To quickly load a layer selection, simply hold Ctrl and click on the layer thumbnail:
2.21 Switch Between Documents
Save time while switching between open document windows: use Ctrl+Tab to switch forward and Ctrl+Shift+Tab to switch backwards:
2.22 Quick opacity control
To quickly adjust Opacity of a selected layer, just press a number key to set a quick percentage (“1”=10%,” 2”=20%, “3”=30%,… etc.). If you have Brush Tool active, it will adjust the opacity of the Brush:
Note: if you press two numbers quickly, you will change the opacity to a precise percentage (i.e.: you will change it to 31% if you press “3” and “1” quickly).
2.23 Quickly Switch Between Tools
Some Tools have sub-menus. To browse through them, you don’t have to click and hold your mouse if you know this little trick: hold Shift and press the tool hotkey (learn hotkeys from the cheat sheet mentioned above). For example: for the Lasso tool, press Shift+L.
2.24 Panel Visibility
Sometimes you want to see the entirety of your creation, but all those active panels are getting in the way. Here are some tips: use the F key to switch between screen sizes, and then press Tab to make all the tool dialog boxes disappear (don’t worry: you can press Tab again to bring them back).
2.25 Precise Cursor
Turn Caps Lock on if you want your cursor to be precise:
2.26 Jump Through Blending Options
To quickly jump through the Blending Options of a selected layer hold Shift and press -/+:
2.27 Hide Other Layers
To hide all layers other than the selected one, hold Alt and click on the “eye” icon:
2.28 Show/Hide Consequent Layers
Want to show or hide layers in a row? You can just click on the starting layer’s eye icon and, without releasing your mouse, move up or down until you reach the final layer:
2.29 Zoom to 100%
This one is very useful. To bring the view to 100% just double click on the Zoom tool:
2.30 Adjust Numeric Values
Almost every dialog box and panel in Photoshop has a few adjustable numeric value boxes. You just drag and drop the icon adjacent to these boxes to quickly adjust the number. Just put your cursor over the icon to the left of the value box, hold it and drag to the right or left to increase or decrease the value. You can hold Shift while dragging if you want to jump by 10:
2.31 Delete Hidden Layers
This little tip helps you get rid of all hidden layers in a document, which is especially helpful when working with lots of layers. One click: go to Layers->Delete->Hidden layers:
2.32 Delete Empty Layers
Sometimes, in a high-speed chase after your imagination, you may happen to create a layer and leave it untouched. So it stays there – empty. What if you have 50 layers and some of them are empty? Go to File->Scripts->Delete All Empty Layers:
If you have a YouTube Partner account, you have more options to stylize your channel page than a regular YouTube user. One of the best options is adding a custom banner to your page, as you see on most channels in the header section.
Today you will learn how to create that banner in Photoshop. Even better: you will create a banner with links (for example to your social pages, like Facebook and Twitter, or to your website).
To start, create a New document (Ctrl+N) in Photoshop.
We are creating a maximum size banner so set width to 960 px and height to 150 px. Make sure that resolution is 72 px/inch and hit OK:
Now let’s add some graphics and buttons.
Of course you will want to put your logo there. Import your logo file into Photoshop. If it’s an image file, you can just drag and drop.
Align the logo wherever you like. I used the classic position: the top left corner.
Add some text, describing your occupation with the Text tool (T) just below the logo.
If you wish, change the background color. Add a gradient, or do whatever you like to. I will just add a gradient.
Use the Gradient tool (G) to fill the background with a gradient:
Ok, now we have a simple, almost ready to use banner:
But we need social buttons: that’s the main focus of this tutorial. So let’s fetch some icons from Google. Just search for RSS, Twitter, Facebook icons (or others if you want), copy and paste them into your working area in Photoshop and align them to the right side of the banner:
To add some depth to our icons let’s add some shadow. To do it, right-click on an icon’s layer and select Blending Options:
In the pop-up dialog box select Drop Shadow (default values are OK):
Apply the same effect to other icons (you can use right-click ->Copy Layer Style and then Paste Layer Style in the layers panel).
Add some text, like “Stay Tuned”, just above the icons:
Let’s say we got what we needed and now let’s save it for the web. Go to File->Save for Web & Devices, select PNG-8 (for better quality) from the drop down and save it somewhere:
Now let’s move on to uploading and coding.
Log in to your YouTube account and go to Branding Options/Banners and Image Maps, click on Choose file and upload your banner:
Put 150 into Channel Banner Height text area:
Now click on Save Changes in the bottom-right corner and go to your YouTube partner page and check your banner. It’s there, but the links don’t work.
Well, let’s add those links.
To add links to an image you will have to create a map-code for it. Don’t be scared, it doesn’t require coding skills, and almost everything is automated with the free online-tool at Image-Maps.com.
Go to www.image-maps.com, browse to your banner and click Start Mapping Your Image:
After that you will see a “help image-maps.com” page, wait 10 seconds and click Continue To Next Step.
On the right side, you will see a menu area, click on Rectangle:
Look at your banner, you will see there’s a rectangle with text areas:
Drag/stretch the rectangle to fit the first icon (don’t worry about the text areas for now, we’ll change them in the code) and click Save:
Do the same for the other icons.
After all the icons/buttons are mapped, click on Get Your Code in the right panel:
On this page, click HTML Code:
Here comes the tricky part.
Once you hit the HTML Code button, you will be taken to your code, which will seem very “busy”. In fact, there are many useless elements. Do not close it.
I’ve prepared a clean version (for three buttons on your banner); you can just copy it and follow the further instructions.
Explanations of marked (in red) values:
• full_path_to_your_banner – go to your YouTube page and right-click on your banner (that you have already uploaded) and (depending on your browser) find your banner’s full URL and copy it. It should be something like http://i2.ytimg.com/u/UcJ1c4V37ArMB8VDO33RhA/profile_header.jpg. Then replace full_path_to_your_banner with the banner URL.
• any_name – put any name there, like “my_mapcode”, or “johnsmap” etc.
• coordinates1 from image-maps.com – if you check the HTML code generated by image-maps before at Step 3.18, you will see lines like this:
Copy those digits (highlighted) as they are and paste them instead of coordinates1 from image-maps.com (in the right sequence, i.e. first coordinates instead of coordinates1, second – instead of coordinates2 and so on).
• first_button_link – the link where your first button will lead to. For example, if your first button is the Facebook page then your first_button_link will be the link to your Facebook page including http://. This is the same for the other button links (your links to Twitter, Google and other profiles/websites).
• title_text_for_first_link – title is a text that will appear when a visitor hovers their mouse over a link on your banner. So put a description there for each link, like “Join our Facebook Community”, “Follow us on Twitter” and so on.
Replace all values I marked in red with the values from your HTML code respectively.
Once you are done with the mapcode, you can close image-maps.com and forget about it. Go to your YouTube page again, Branding Options/Banners and Image Maps and copy & paste your finished mapcode into the corresponding area and click Save Changes.
That’s it. Refresh your YouTube page and check your links.
Whether you are a professional photographer or just taking pictures as a hobbyist, you still need to tweak photos to make them look better. You don’t need a lab, as it was before digital photography; all you need now is a computer and some photo retouching tools.
Photoshop, as always, comes in handy. And if you are using Photoshop only for quick photo retouching you don’t need to master everything about the program. You will only need the most essential tools.
These tools are the basics, and I will only show the basic usage for you to get familiar with them. All you will need for more advanced methods is practice.
So let’s say you have taken some nice pictures and want to make some changes, corrections and so on. Upload it to your machine and open it with Photoshop.
This one is the first tool I start to play with as I open an image. It gives you control over brightness levels with an image histogram. It is very useful when you want to make shadows darker, or the front object brighter, or the skies more vivid, and so on.
The controls marked in red circles can be moved to the left or the right. The drop down menu in the green circle gives you control over the color channels of an image. Play with it.
4.2 Photo Filter
The Photo Filter tool is very handy when you want to apply some color to the whole image, changing its “mood” (you will want to give a yellow-ish color for an autumn picture and a colder, blue-ish color for a winter image).
You can select from default filter presets in the drop-down menu or apply your custom selected color and adjust the density of the chosen filter. I’ve chosen Cooling Filter for my image to enhance the blue tone of the water:
4.3 Dodge and Burn
Actually these are two different tools, but I put them in one category since they do the opposite of each other. Basically, the Dodge tool makes affected areas lighter and the Burn tool makes them darker.
With those two little tools you can dramatically enhance an image, giving it a totally different look. Check the example below, which I made quickly to let you see the least of what you can do:
4.4 Spot Healing Brush
This one came with CS2, as I recall, and helps with digital “healing”, sometimes called “airbrushing”. Almost every girl will complain about her picture, saying “remove this spot” or “I don’t want this mole”. No problem: with the Spot Healing brush tool you can make her happy!
I’ve removed the famous Cindy Crawford mole with just one click:
The Blur tool is best used when you want to focus on an object or some area of a picture. There is a more comprehensive tool for blurring in the Filters menu, which has various blur methods. The one I am showing you is the basic tool.
This blur tool is used like a brush, meaning that it applies to the area under your mouse. Use it to change the focus of a picture. For example: making the background blurred gives some depth to your image:
4.6 Content-Aware Fill
Now this tool is not a basic one: it’s as powerful as Harry Potter’s wand, and it could easily be the subject of its own guide. It’s only in Photoshop CS5 and later, so if you have an older version…sorry.
With Content-Aware Fill you can remove unwanted things from a picture without leaving behind a black place: Photoshop will guess what should be there and fill in the gap. Before CS5 this was not an easy task, but now it is simple. Of course it is not perfect, and to get the best results you will have to make some adjustments, but this tool does the job remarkably well.
Basically, the tool calculates the surrounding area of a selection and then “paints” the area you fill with a guess about what should be there. You really need to play with this to believe it: just select the object you want to remove, leaving a little space around by expanding the selection. Then and apply the fill (Edit->Fill or Shift+F5):
With those 6 tools you can give your photos a fresh look in a few minutes. Play around with the values and settings and you will get more familiar with them.
What is a silhouette? It’s an outline of any figure filled with a solid color, typically a dark shade. You see a natural silhouette when you look at something against a sunset.
Silhouettes are very useful when it comes to graphics: they almost always fit the background, since they don’t have many details to interfere with the picture. Moreover, silhouettes can be used for creating custom shapes and brushes.
In this quick tutorial, you will learn how easily you can create a silhouette from almost any picture in Photoshop.
Keep in mind that the most important step is to make a nice selection – the more precise it is the better quality your final silhouette will be.
Open an image in Photoshop and make a selection. I’ve made mine using the Magnetic Lasso tool. It is easier to make a selection on images which have a background with few details:
Create a New Layer by clicking on the small icon in the Layers palette:
Fill the selection with black:
Now get rid of the background by simply deleting the original layer (in my case it is the “picture” layer):
That’s it. The silhouette is now ready to use. You can now put this silhouette in front of anything. Here’s some “art”:
If you are a website owner, or planning to be one, you will need a favicon. What’s that? A favicon is a small (16×16 pixels) icon or image that is shown in the address bar or tab of your Internet browser.
It is an important part of your website’s identity, just like your logo, so do not underestimate it.
You cannot just create a 16x16px image, change its file extension to .ico and use as a favicon. There are many tools to create a favicon, but I will show you how to do so in Photoshop.
1. Photoshop doesn’t recognize the .ico format by itself at all, so we need a plugin to make Photoshop “friendly” with it. The plugin is free and you can download it from Telegraphics. It is called ICO (Windows Icon) Format:
2. Now you will need to install it to your system:
Close Photoshop if it’s open.
Unpack the archive and copy & paste the ICOFormat.8bi file into your File Formats folder in the Photoshop directory (Program Files/Adobe Photoshop/Plugins/File Formats for Windows users).
3. Open Photoshop and create a new document 64px in width and 64px in height (it will be too hard to work with 16×16, so it’s more comfortable to use a 64×64 canvas).
4. If you have a logo, resize it to a square, open it with Photoshop and resize the image to 64×64.When resizing, choose Bicubic Sharper, since if you don’t, it will blur the image:
Tweak your image a bit. You will probably need to use the Pencil tool to correct things here and there, and maybe Sharpen a bit. When you feel it’s ready, resize your image to the final 16×16 and see if it looks OK.
If you feel that it needs more work, undo the resize and keep working. When it’s finally ready, resize it to 16×16.
5. We now need to save it in .ico format.
Since we have the ICO plugin installed, Photoshop can now save as an ICO. Just go to File->Save As… and choose Windows ICO from the drop-down menu (remember to name it “favicon”):
Now upload your favicon.ico to your website’s root directory using your favorite FTP client. It’s better to upload it into the root directory so that browsers will find it automatically, but I’ll show you some small HTML code that will help the browser find your favicon for sure:
Add this code somewhere between
header.php. You’re done!
That’s it for now! I hope this guide taught you something, and stay tuned for the next Photoshop guide from MakeUseOf.com.