So, What are we doing?
We are going to be placing a real world product inside a composition. This composition is going to be processed as an export for digital screen use.
Sometimes it’s better to have a generic shot of your product that can be placed as either the centerpiece of your product reveal, to be shown during your shopping experience.
Never to fear, I have found a free resource that can be used to follow along or test if your program also produces images similar to these results.
https://www.anthonyboyd.graphics/mockups/top-view-box-mockup-2/
And we are going to use photoshop to do just that.
While there are many choices out there these days, Photoshop is the program in which I am most familiar with. There are plenty of alternatives programs that may be used, although it may not be the exact same results. The reason for this is just the way the programs interpret and handle the data. The main one I can think about is GIMP, but I will have to explore if the results are the same or not another date.
If this is your first time reading about this topic, I would like to remind you that these results may seem extremely minor, but can add up to both the feel of quality and performance (due to file size) in how a website/app loads. Also please note that this is not a tutorial on how to use photoshop, so if you cannot follow along, this guide is not for you.
So, breaking it down.
We are going to duplicate this file so that we have a master source. This way we can make the image as small as we can without losing all that hard work from earlier; as this is a destructive process that can make changing or making multiple copies difficult. Also because of how image resizing is calculated, we want to always do it from the source file, as it will have more pixel data to leverage when modifying our product image.
So taking a look at this top view box I have as an example, the file has a dimension of 5000x3750 at 300ppi. This is great for print, but since we have to target digital screens, which are rendered at 72ppi, we need to rescale this composition.
To do this, we are going to go to image size in photoshop and uncheck the resample box. Then we are going to change 300 dpi to 72 dpi like seen below.
We then are going to resize the image, this time checking the resample box and setting the largest number between width or height to 1000.
Then save out this composition as a separate file/a copy as to not overwrite the original.
Now for the next step, we are going to resize this composition to fit an ad banner. A few common banner sizes are 320x100, 300x250 and 728x90. So that’s what we will place it. I like to resize my product by every 1000 pixels as it gives you some space to fine tune adjustments but not keep so much data inside your composition. So we are going to check the resample box, and set the dropdown box to Bicubic (Smooth Gradients).
We don’t technically have to do this, as we are going to be placing this inside our image export as a smart object anyway. When they get exported, they are going to render the file and spit out our small but perfectly sized image. But trust me, when you start putting twenty of these high resolution assets in your composition (like if you had two colors, or different logos, etc), the file sizes can add up and get really insane in the long run.
Now we are going to create some artboards that are 2x our intended size, this is so you can make finer adjustments before everything is finalized when we export. If you are working with images that will have a 2x and 1x version when displayed on a higher resolution display, stay, or If you cannot make artboards since you have an older version of photoshop, start from this double resolution on your main composition(artboard).
I’ve went ahead and filled out my artboards for a mockup ad. My composition looks like this. The lines across the screen are a 2 pixel grid.
The setting for this 2 pixel grid should be set like this in photoshop (color can be whatever).
As you can see, the box we just resized was placed into the composition. If for any reason you put it in there (larger dimensions, like a wallpaper or much larger header image) and you need to size it up, just redo the steps from resizing the image until you meet the balance of more pixels than what you need so you can manipulate the size to match what you want, but not so much that you waste local space having oversized assets inside your photoshop files.
IE. if you are transforming your newly resized image, lets say 3000px along the longest edge, between 100% and 50% of the smart object of the product is ideal for your compositions data balance. More than 100%, and your computer is making up data by upscaling. Smaller than 50% and you can step your size down to 2000, since you have too much data that photoshop will just average the same (if already at 1000 just leave it alone).
If you can’t make an artboard, It’s fine to have smart objects that are sized to the dimensions of your banner if you want to keep them all within one photoshop file.
The most important thing is that your objects are aligned properly on a 2 pixel grid. The reason for this is that because we are working on a 2x image, 4 pixels will be averaged to make our 1x image, and depending on where things are placed, you can have this really interesting visual bug happen.
If you look very closely, you can see that the box on the left has our Logo cut off on the right side a bit like a small wall is forming. Whereas on the Right, the logo circle is more smoothed out.
It may seem really minor, but we are trying to create the illusion that the product actually exists within the screen. Since many other companies are able to produce images that do give this perception, it can seem fake or like a bad product subconciously.
The annoying part, it could be very arbitrary as to where things need to be placed
The placement of this box was on a whole pixel on the x axis for example, but by shifting it .54 pixels in photoshop on the x axis was able to create this drastic effect in the export.
Sometimes it needs to be quite a bit more, sometimes not as much.
It is advised to work from these while trying your best to align these to a 2 pixel grid, so you have the best chances of getting right the first time (even though for this one I did not.)
And this means for text, the baseline of your text is on said pixel grid too, and that your line spacing is even so that it never falls outside the pixel grid if you have copy text in your image. If it’s already baked into the object, like the MASTER DESIGN BLOG text on the box, If you have the ability to manipulate the position in the smart object beforehand, like this mockup, then feel free to manipulate it inside there as well to make it render better when you export it.
Speaking of Exporting it.
Using Export as…
You should see a box with all your artboards ready to export.
There will be a preview window that can show you individually, with a 2up function that lets you compare different settings.
These are my default settings I use for each image.
By setting the scale to 50% instead of having it export as a .5 size on the left of the export window, you can have it set to Bicubic Automatic, which just makes sure it’s not doing some other form of resampling as it processes your image.
If you are wondering why 85% image quality, here you can see the difference between 85% and100%
The difference is barely noticable, even when super zoomed in. (maybe some artifacting, play with it as you need in case it’s really bad.) But for 25% smaller image size, I find that the tradeoff is acceptable. This of course only covers JPG exports, but the method is the same for PNG by just toggling PNG and checking transparency if it is needed. Ideally you don’t need to use PNG instead of JPG, but everyone has their use case.
Here are the exports with ideal exports vs images that are just a little funky, due to poor placement.
I’ll stop here for this blogpost, as it’s reaching an extremely lengthy read time. There’s actually more that can be done for different situations, but that can be written more sparingly now that the general method has been covered, and that those minor things are shorter to cover now that we know what our end goal is.
As I discussed before, this is all in the attempt to bring the highest quality experience to the end user when they are attempting to use your site or application. Even though devices are getting more and more powerful, they can still be bogged down if they were confronted with large amounts of data. They after all, will have to do this process on the fly if you just left the whole product, like our box here, at max resolution. Even worse, if they have to download this through slower connections, these images can end up taking so much time, and that can cost your performance, $$$.
So this is (the super generic and basic) how to make it so that people can both enjoy your new product filling their screens, without it being anymore of a burden to their devices than it has to be.
Have fun pushing these pixels.
