Entra Italiano


Resizing and saving wallpapers using Photoshop, Ubuntu and ImageMagick

{22 Aprile 2011}

Resizing and saving wallpapers using Photoshop, Ubuntu and ImageMagick

I have been getting a lot of questions about the process of resizing and saving wallpapers in so many different sizes. This is no quick topic, so I thought I'd describe the whole process in a single article.

So, the problem: I want my art to reach as many devices as possible, which means I need to publish my wallpapers in as many sizes as I can support. At the moment of this writing, my saving process includes 97 sizes. This way, I can be sure my art will look good on almost every device.

On the other hand, I do not want to spend the rest of my life resizing my images - I'd rather draw new ones!

All sizes can be divided into groups:

When I start drawing wallpaper, I use my "blank" PSD file which is 5600x3500 pixels (download PSD file). While drawing, I always keep in mind that left and right edges will be cut on images with 4:3 proportions (or if needed, I create separate file for that, usually 2560x1920). After the artwork is ready, I prepare the following PSD files (flattened, without layers):

For each of these "source files", I often move elements of drawing around, to fit the target proportions.

When these 4 PSD files are ready, it's time to start saving JPG files.

Until maybe a year ago, I was using Photoshop "actions" to resize and save. This article is not about Photoshop actions, so I will not describe how to resize image using actions. This worked, but over the time, I got annoyed by the following drawbacks of this method:

I think I could start learning Photoshop Scripting (if you're curios - that's not the same as "actions", though the concept is similar). When writing a script, you use a programming language to tell Photoshop what to do (compare it with actions, where Photoshop directly records what you do with mouse and keyboard). But I wanted to exclude Photoshop from the process - so I would be able to use it while wallpapers are saved.

The solution I found is ImageMagick. I have another small computer which I use as files storage, and it runs Ubuntu. ImageMagick is a command-line image manipulation program, available for Windows, Mac and Linux (Linux being the primary platform, as I understand). When you install ImageMagick on Ubuntu, you get 2 new commands, "convert" and "mogrify" (actually one command with different output), which you can use in your "bash" files (some of you might learn couple of new words today :-) ). Bash file in Linux is simply a text file with commands. It is, in my opinion, much better alternative to using Photoshop actions, because of the ease of editing.

After reading ImageMagick documentation (and then reading it again :-) ), I wrote a bash file that saves all JPG files from 4 PSD files that I mentioned above. You can take a look at the entire file (it's quite long, because of so many files to save). So, the entire process now includes the following:

Let's take a look at what happens in this bash file.


You need this line so that Ubuntu understands this file is executable, not just text.

echo "Please enter wallpaper filename"
read filename

When I run this in Terminal, it asks me for wallpaper filename. For example, "frog".

convert src-5600x3500.psd -flatten src-5600x3500.psd

In case I forget to flatten PSD files in Photoshop.

convert src-5600x3500.psd -interpolate bicubic -filter Catrom -resize 3072x1920 -unsharp 0x0.8 -density 72x72 +repage temp-standard.png
convert temp-standard.png -gravity center -crop 2560x1920+0+0 +repage -density 72x72 +repage temp-standard.png
convert src-5600x3500.psd -interpolate bicubic -filter Catrom -resize 2560x1600 -unsharp 0x0.8 -density 72x72 +repage temp-wide.png

Here, I create temporary files temp-standard.png (2560x1920) and temp-wide.png (2560x1600). These settings looked best to me: -unsharp 0x0.8 -interpolate bicubic -filter Catrom. Don't be afraid to experiment with them, but be careful - results will change a lot.

convert sig.png -interpolate bicubic -filter Catrom -resize 74x23 -density 72x72 +repage -unsharp 0x0.9 temp-sig-74x23.png

… - preparing Vladstudio signature in various sizes (signature will later be added to bottom-right edge of images).

And then goes the loooong list of similar commands. For every size, the set of commands is:

# 800x600
convert temp-standard.png -interpolate bicubic -filter Catrom -resize 800x600 -density 72x72 +repage -unsharp 0x0.6 temp.png
convert temp.png -quality 99 high/vladstudio_${filename}_800x600.jpg
convert temp.png temp-sig-102x32.png -gravity southeast -geometry 102x32+12+28 -composite -quality 99 high_signed/vladstudio_${filename}_800x600.jpg
convert temp.png temp-sig-102x32.png -gravity southeast -geometry 102x32+12+28 -composite -quality 92 low/vladstudio_${filename}_800x600.jpg

What it does:

If you were patient enough to scroll the bash file till the end, you noticed there was something else, similar to:

cd ~/rack2/jpg_high/
folderlist=$(ls -d */)
cd ~/saver/
for folder in $folderlist ; do
mkdir -p ~/rack2/jpg_high/${folder}/
mv -f high/*${folder}.jpg ~/rack2/jpg_high/${folder}/

I guess I am the only one who might ever need it, but since I have these commands, allow me to explain. This bash file puts all saved JPG files into 3 folders: "high", "high_signed", "low". However, on server, there is another level of folders, f.e. "high/120x160/*.jpg" etc. These commands move our just born JPG files from their temporary folders to permanent folders on server.

While the length of this bash file may scare you, I find it much easier to understand and edit than Photoshop Script file. Linux bash itself is a very powerful tool!

Thanks for your time, and if you have any questions, ask them in comments! I'll do my best to reply fast.

[UPDATE 2012-07-05] I revised my bash script and published the new version in separate blog post.

← Only World Space Day! Lifetime registration for $9.99! Alice in Wonderland - my current collection →

Commenti {9}

Daniele 22 Aprile 2011
Great! As usual ;)

Stefano 22 Aprile 2011
(This is a comment on Blog article about Resizing and saving wallpapers.) Tech stuff is of course interesting but I'm more curious about process steps involving the artist's sensibility. We know that you often move drawing elements around to fit the target proportions: this means you may sometimes be forced a tradeoff between picture appearance and its content. Now that I know your white canvas is 5600x3500, I'll try to stick to the original proportions ot the artwork as much as possible :-)

Vlad Gerasimov 28 Aprile 2011
Upamanyu: sorry I cannot provide support for ImageMagick itself, also I don't know what OS you use.

Upamanyu 29 Aprile 2011
I use Ubuntu 10.10. But can you tell me which version is most suitable for this task and which version you use?

Pavel 22 Aprile 2011
It's a good tip. And publishing the whole bash file is very generous, thanks.

Roz 24 Aprile 2011
Wow, an artist who knows bash-fu as well. You have my respect, sir!

Andrew Cook 25 Aprile 2011
Vlad, your behind-the-scenes coverage continues to be fantastic. Thanks for sharing!

Upamanyu 28 Aprile 2011
I just tried out to use this process. I installed ImageMagick as per the instructions on http://goo.gl/LWYMf but when I press the convert or mogrify command i gives me the following error: convert: error while loading shared libraries: libMagickCore.so.4: cannot open shared object file: No such file or directory

Vlad Gerasimov 29 Aprile 2011
I use Ubuntu 10.10 too - but you don't need to install with command line. Simply open Software Center, search for ImageMagick and install it.

Aggiungi un commento

1 2 3 4 5 6