The Basics of Photoshop

If you are a graphic designer or a web developer, you’re going to need to learn how to use Adobe Photoshop. It is an essential tool to create digital, print and online graphics optimized for their use. In addition to that, web designers can code website faster and more efficient if they are using a PSD file to design their project.

However, mastering Photoshop can take some time because it offers a lot of advanced features, shortcuts. But learning the basics can greatly improve your performance, knowledge and skills. Starting with the most basics is the way to mastering the world of Photoshop and digital design.

But wait, what did you say, you don’t have Photoshop yet? Creative cloud membership is cheap; you can get Photoshop as a single app on Adobe’s Creative Cloud. But of course, if you’re just starting to learn the bits and bytes, you can always get a free 30-day trial. That time frame should be enough to let you master the basics. Onwards to the basics!

The Toolbar

  • Move tool – simple as the name, it will let you move an object in a given layer around the Photoshop canvas.
  • Marquee – this will let you select part of the Photoshop canvas in a specific shape.
  • Lasso – This is a free form selection tool that lets you select anything that the lasso can cover around the canvas.
  • Magic Wand – clicking an area using the magic wand will select it and anything that looks like it. This is a quick way of removing a background, though not so accurate.
  • Crop tool – the crop tool is used to crop (duh) your pictures. You can specify size, proportions or any size you want.
  • Eyedropper – click any part of a canvas and sample the color on that part. It can also change your foreground color to whatever color it sampled form the canvas.
  • Healing brush – it can sample part of the photo and use it to paint over another part and once you’re done, Photoshop will examine surrounding area to blend the paint in with the rest of the photo
  • Paintbrush and pencil – straightforward tool that emulates real world tools, the paintbrush can be changed to a different type
  • Clone stamp – the same as the healing brush, except that it won’t blend in. It’s like copying and pasting an area to another.
  • History brush – just like a time machine, you can paint back in time into the current photo.
  • Eraser tool – it’s just like a paintbrush, though it erases things, shocking eh?
  • Paint Can and Gradient tool – it fills a specific area with the current foreground color, the gradient on the other hand, will create a gradient blending the foreground and background color.

Quick Guide to CSS

If you want to learn CSS, then don’t be afraid. It’s an easy language to learn. Learning CSS is essential if you own a website as you can do minor design and appearance changes to make your website unique, especially if you are using premade themes and templates. If you are a web developer or a server side developer, you can also benefit in learning CSS as it can be integrated to your development projects. There’s really nothing that can prevent you from learning CSS if you fall to at least one of the criteria above. If you have a computer, a notepad and a browser, you can start learning CSS at no cost at all.

CSS Tools

Before starting to learn CSS, you need to have the necessary tools. Don’t worry; you don’t need to purchase a software license or buy something online. One recommended tool for Windows users is Notepad++, a free programmer’s text editor and for Mac users, OS X’s TextEdit that comes bundled with the operating system. Both are free to use and download and they have advanced features that you’ll need to make your CSS learning experience better. If you already got those text editors or if you have a preferred programmer’s text editor, you can go ahead.

Oh, you also need to have the latest versions of popular web browsers so you can test your CSS code into different scenario to see if your design is consistent. The reason behind this is that each browser has its own way of displaying things. For example, a text may appear perfectly centered in Chrome but it’s slightly off in Safari. If that’s the case, you can adjust your CSS codes to match the look and feel as closely as possible for each different web browsers. That will make your user experience consistent among different browsers, systems, countries and devices.

CSS Terminologies

Now that you have the required tools to begin, we can start learning some of the basic CSS terminologies that will be your foundation towards learning more advanced CSS. We are going to learn the CSS Syntax.

A CSS rule consists of a selector and a declaration block. It looks like this:

h1 {color: red; font-size:15px;}

This selector makes all top level heading in your web page colored red and sized 15 pixels. The selector is the “h1”; basically, this is an element, id or class. The property, which is “color” and “font-size”, defines which particular property of the selector you want to change, and on our example, we want to change h1’s color and font size. The value, which on our example are “red” and “15px” are the property’s value that we want to assign. On our example, we want all h1 elements change their color to red and font size to 15 pixels.