It’s ubiquitous enough to be a verb. Adobe’s Photoshop has cornered the photo editing tool market so much that even your Grandma has heard about it. And if you’re around websites at all, you’ve almost definitely needed it at some point. Sure, it’s one of the most powerful tools on the planet - and that can be intimidating. But even a novice can take advantage of some of the simpler capabilities. In this beginners tutorial, we’ll give you a little background on Photoshop and then jump right into the things you can do with it… Like, today.
What is Photoshop?
Photoshop is Adobe's photo editing, image creation and graphic design software used on Windows or MacOS computers. It offers users the ability to create, enhance images and artwork, changing backgrounds, simulating a real-life painting or creating an alternative view of the universe. These are all real possibilities with this amazing software. Beyond static images, it’s also used for animation & video file formats.
Who created Photoshop?
Thomas and John Knoll created the first basic version of Photoshop In 1988. Did you know Photoshop was first called “Display”? Originally, it only used grayscale images on a black & white screen. It then moved towards image editing and later evolved into Photoshop. It wasn’t too much longer before it was purchased by Adobe systems. These days it’s easier to ask what it can’t do.
The latest version is photoshop 2022.
How is Photoshop used?
It’s an extremely power-packed tool for designers, web developers, artists, photographers, and creative professionals. Photoshop is widely used in multimedia and animation industries image editing, retouching, creating image compositions, website mockups and adding effects. Website layouts and PDF presentations can also be created within Photoshop. Various plugins and “brushes” can also be installed in this software.
What can Photoshop do?
Photoshop is only limited by your imagination - from social media posts to photo retouching, banners to beautiful websites, everyday image edits to total transformations - whatever you wish, you can make it better with Photoshop.
Some of the many amazing things you can do with Photoshop:
- Web, screen, & app design
- Photo masking, repair & restoration
- Color management & image transformations
- 3D & technical imaging
- Drawing and painting
- Video and animation
- Filters and effects
- Saving and exporting
- Printing
- Automation
Simple Image Editing - An Example
For website managers, one of the most useful projects in Photoshop is image editing. People always ask designers, “Can you change the background of this staff photo please?”. Or “Can you make this building's exterior look better?” :) Well the answer is, Yes!
Here’s how you do it:
Once the portrait image is selected (refer to the below image), the first step is to identify where the true quality issues stem from. Which means we should study the lighting, image quality, color & background that exists in the image, and then decide what replacement will be suitable.
Next, select the area using a pen tool and remove the background. Here, I’ve adjusted the exposure, highlights and shadows with Camera Raw (Ctrl+shift+A). I have used multiple blending modes and adjustment layers like: color lookup, vibrance, exposure, levels, selective color, curves to match the foreground and background image. In addition to that, I have added the lens flare which is available in photoshop (Filter>Render>Lens Flare), added a glittery effect (using SCREEN- blending mode to remove the black background). I also downloaded brushes for the white dust effect and added a suitable title (text) in the last step.
You can play with the varieties of adjustment layers and blending modes. They both play a major role in image editing. Initially you’ll stumble a bit with the options. Just like any software, it takes a little time for the tools to become second nature. But eventually when you realize the magic you can create with Photoshop, you might find it difficult to stop!
Photoshop Tools
Photoshop is a large suite-style software that has multiple tools and options in it. Each tool has its own powerful properties which helps to create designs with magnificent results. This is where the intimidation can come in. There’s just so much! Luckily, most of the tools have shortcuts as you can see in the below image.
Image Credits - Adobe
File Formats
Photoshop files are saved in the default file extension as .PSD, which stands for “Photoshop Document". Sometimes Photoshop files have the file extension .PSB, which stands for "Photoshop Big" (also known as "large document format"). The file will automatically get saved in .PSB format, when the maximum height and width of the artboard is increased. This software also allows you to save the file in different formats like JPEG, PNG, PDF etc.
Photoshop Workspace
It definitely takes time to become a pro in Photoshop, but its interface, while intimidating, is very logical and easy to learn. We can also customize the interface accordingly.
Creating Websites with Photoshop
Photoshop is not only limited to design or internet meme creation. Use Photoshop to create elegant UI/ UX designs as well. Website development companies often finalize their designs before moving on to the coding stage. Using the Rectangle tool in Photoshop, you can design buttons and drop down options. Take this website layout for example (see below): this was created using Photoshop only.
