People frequently ask me, “What should I invest in for my blog?” My response is always the same – Photography and Blog Post tools. You can have a beautiful site, but it is imperative that your visuals attract potential readers. People respond to beautiful images. One way to increase your site traffic is to ensure you are creating high-quality graphics. That’s why I’m a huge fan of the Photoshop-Lightroom Creative Cloud bundle because it offers everything a blogger needs to create superb graphics.
With the software, it can see overwhelming on where to start! The Blog Shop Templates are a great place to help you get familiar with using Photoshop while simultaneously maintaining a professional and cohesive identity.
If Photoshop has been on your computer, unused for a couple of months, have no fear! Today, I’m showing you five different Photoshop tutorials for beginners to help you get started!
How to Use Guides to Align + Space Your Content
Guides help you position images and elements precisely in the file. Guides can easily be moved and shifted, depending on how you need them. You can also lock them to prevent them from moving by accident.
Show or Hide Guides or Smart Guides: Guides can be turned on or off, by going to VIEW < SHOW < then selecting what you want to turn on/off. I like to have my GUIDE LAYOUT on along with SMART GUIDES.
A Guide Layout divides your canvas into even columns and rows. To create a NEW GUIDE LAYOUT, go to VIEW < NEW GUIDE LAYOUT. A window will pop-up where you specify the number of columns and rows you want your file to have. I usually split my templates up into 2-3 columns and then 4-8 rows depending on the template length.
Smart Guides are awesome tools that tell you the distance between individual features. When you are working with paths, Smart Guides will show the distance between the path on the same layer. If you are working with different layers, the Smart Guides will display the distances from the canvas. Smart Guides are ideal if you are trying to achieve matched spacing between certain layers or shapes!
How to Remove the Background From Images
When creating product collages for your blog, you will likely want to remove the background from the image. There are two different tools you can use to edit the image – Magic Wand and Magnetic Lasso.
Magic Wand is by far my favorite; it is the quickest and works best with images where the background highly contrasts the images.
- Open Your Image in Photoshop.
- Select the MAGIC WAND tool. In the top control bar, you should see “Sample Size” and “Tolerance.” I recommend using “POINT SAMPLE” and a tolerance level between 10-40. I use around 10-20.
- Select the main background areas. If areas are broken up into several parts, hold the SHIFT KEY as you highlight everything.
- Once you have highlighted everything, right click your MOUSE. Choose “SELECT INVERSE” from the popup. Now the product should be selected.
- Press COMMAND C to copy your selection.
- Press COMMAND N to open a new file. You will be able to choose your background settings, and I recommend using TRANSPARENT. The new file will automatically populate to be the size of what you’ve copied.
- When the new file opens, press COMMAND V to paste in your selection to the new file. You now have a product without a background.
Magnetic Lasso is the other option you can use. It works better for product images that do not have a sharp contrast with the product (aka Anthropologie and Urban Outfitters).
- Starting at the edge of the product, trace around the object you want to cut out. You will want to zoom in to m ake sure you are getting a good view.
- When the entire product is traced out, follow Steps 5-7 above to paste your product into a new file.
How to Create Smart Object Layers
Smart Object layers are very common in mockup and layouts. They allow you to embed contents of an image into a Photoshop document. You can also create Linked Smart Objects (external image links). Why use Smart Objects? You can transform, scale, rotate, distort, warp, or skew the shape without messing up the original image data. You can also filter the layer without damaging the original image.
- Create a new layer with the shape you want to place the layer.
- In Your Layers panel, select the Layer. Choose “Convert to Smart Object” from the toolbar.
- The icon next to your layer name will now change. Double click this icon.
- The shape will open in a new Photoshop file.
- Place Your Image in the file. It should appear as a new layer. Reposition it as you want.
- When the file is placed, save the file.
- The image should now show up in the new file as your original shape.
How to Use Clipping Masks in Photoshop
Clipping Masks are one of my favorite functions of photoshop, and I think they are a great way for bloggers to enhance their blog post graphics and collages. Some of the blog post templates in the blog shop use clipping masks.
A clipping mask allows you to use the content of a layer to mask the layers above it. For example, if I want an image to be cropped with a circle. I can create a circle shape at the bottom (base layer). Then, I place the image in a layer above the circle. When I create the clipping mask, all the other content of the clipped layer will be masked out. With clipping masks, you can use multiple layers, but they need to be successive.
How to Create A Clipping Mask
- Arrange the layers in the Layers panel, so that the base layer with the mask is below the layers you want to mask.
- In your Layers panel, right click the layer of your photograph. Select “Create Clipping Mask”.
- To add additional layers to a clipping mask, repeat step 2, adding one level at a time to the Layers panel.
How to Remove a Layer From a Clipping Mask
In the Layers panel, select the layer with the clipping mask. Right click and choose “Release Clipping Mask”. This command removes the selected layer and any layers above it from the clipping mask.
Clipping masks are super easy to use, and they allow you to clean up the arrangement of photographs and give unique shapes to your layouts!
How to Save Images for Web in Photoshop
Most people do not save their images down properly before they upload them to their website. This issue is so widespread. I see it with almost every single website that I’ve installed. When you upload huge images to your website, your website slows down, and it can negatively impact your website performance and SEO.
Since all of the Blog Post Templates are photoshop files, today’s tutorial show you how to save your images down in Photoshop.
Before we begin: A best practice is to setup your graphics to the actual size you want. You do not want to stretch your images bigger. Keep your photoshop files big, and then size down as needed. All Blog Post Templates are 1600 pixels wide.
Once you are ready to save your Photoshop file down for the web, first save the PSD of the file.
Then, go to FILE < EXPORT < EXPORT AS.
A window will pop up where you can select the format, size, and quality.
- File Settings: In this section you will select a FORMAT + QUALITY. For the blog post templates, JPG files work best! When saving down for the web, you only need your JPG to be at 60-70% quality. Do not go lower than 60%, and you do not need to go higher than 70%.
- Image Size: In this section, you will select the WIDTH you need your image to be. Because of retina-displays, you want this width to be double of what your full-width of your blog post. For example, if the width of your blog post is 700 pixels, you would adjust the width of your template to be 1400pixels wide. Let the height automatically recalculate so that the image retains its proportions.
- Canvas Size: The canvas size will automatically adjust as you change the image size. If you adjust canvas size, it will crop your image. So just leave this alone.
- Total Image Size: In the bottom right corner of the image preview, you will see the total size of the image when you export it. Keep this number in mind. You want this number to be under 200kb. Anything over 500kb is too big, and you should not upload it to your website.
When you are done adjusting your settings, select EXPORT. A new window will open where you save the JPG file. Make sure to use an SEO appropriate title for your image, such as “fall-favorite-finds.jpg”. Select EXPORT after you change the title of the image. Your image is now ready to upload to your website!
That’s it! You have all the tools to create beautiful blog graphics for your website and grow your audience. With these five tutorials, you should be set to use Photoshop with confidence!
Want more Graphic Design tutorials? Check out these posts! If you have any questions, leave a comment below.
Interested in working together?
I’d love to hear about your project!