Module 6 - Working With Images
In this module, we are going to cover the basics of using Photoshop to create product images. Photoshop is a huge program and does hundreds of amazing things. I’m going to focus on only one topic; creating great product shots for your store. I’ll fine-tune the demonstrations to include only those actions you need to create product shots.
You can subscribe to Photoshop for $9.99 a month here. (This is not a referral link. I receive no commission for referring you.)
No matter which program you use, make sure it can do everything you need it to do. Take the time to learn the basics and use the tools you need to accomplish just one thing; good product shots.
Before you begin make sure your images are high quality. The product mockups you download from the vendor should be high quality enough to work for the web.
If you take your own photos of your artwork, read my blog post for more information on getting good photos.
Ideally you want your images large enough to be crystal clear, but not so large that they take a long time to load. Huge image files will slow down the loading of your store and your customers will click away. How many times have you just clicked away when a page loaded too slowly?
So remember this: no smaller than 1024 x 1024 at 300 dpi and no larger than 2000 x 2000 at 300 dpi.
Here’s a really good explanation from Helen Bradley (one of my favorite Photoshop gurus):
Sizing for screen
"When it comes to displaying images on the screen you need far less pixels than you do for printing. This is because the density of pixels on the screen is far less than what is required for printing. So, for example a typical monitor is 1920 by 1080 pixels in size so, to fill the monitor you only need an image that is 1920 by 1080 pixels in size. That’s about the same size image you need for a 4 x 6 print at 300 ppi, yet this size image displays perfectly on a 23 inch diagonal monitor." Article credit
Optimize all of your images. There is a good app in the Shopify App store that I use called: Bulk Image Edit by Hextom
Creating Product Shots in Photoshop
After you’ve reviewed the in-depth Photoshop Tutorial above, check out the Photoshop Shortcuts below. I’ve included some shortcuts that will make your work easier!
UPDATE: In PS 2020 scaling is constrained (staying in proportion) by default and you now hold down the Shift key to squish or scale non proportionally. I mistakenly show it the other way in the above video.
Photoshop Shortcuts
Free Photoshop Alternative Pixlr (online)
Pixlr is a free, online photo editing program that’s pretty darn good for making product shots. Below is a brief tutorial on Pixlr. My advice is to make a few sample photos and play with the program to see if fits your needs. Pixlr Blog with Tutorials
Creating Product Shots in Pixlr
Free Photoshop Alternative GIMP (download)
Gimp is an open-source free alternative to Photoshop. It has almost all of the bells and whistles that Photoshop has only it’s free. So why don’t I use it? Primarily because I’ve been using Photoshop for so long and it’s the industry standard for photo editing. Another reason is that until recently, Gimp was not available for the Mac.
I’m not providing any demonstrations for Gimp because they are widely available for free on YouTube. Below I’ve included a couple of great tutorials on Gimp.
Beginner’s Guide over an hour free tutorial on Youtube.
Gimp in 10 minutes free tutorial on Youtube.
A really good resource for getting nifty items to put in your product shots is CreativeMarket.com (affiliate link). You can purchase PNG photos and build your own scenes and product shots, just like the ones you see in my store.
Your homework this week:
Create at least two different product shots from your products using at least 3 layers with PNG items in each product shot.
Review the video tutorials above.
Review the Photoshop Shortcuts page here: bit.ly/diva-98
Review Photoshop tutorials here: Photoshop Tutorials. Pick and choose what you want to learn. You could spend literally weeks here!