As I’m currently working on a new masterpiece, I thought you might be interested in a small guide for creating and designing desktop wallpapers. The guide is very basic and contains quite a few tips which shall help you to get a better look at wallpaper design. It’s kind of a checklist I’m always following when creating a new piece, so here are the facts:
- Have a clean vision of your artwork in your mind (how it shall look like)
- Try to sketch the interesting parts on paper before working in Photoshop (just rough)
- Prepare materials (take photos, create 3D-renderings, illustrate lines or shapes in Illustrator)
- In Photoshop: work in greyscale (colors will follow)
- When importing 3D-renderings: beware the resolution and try to prevent crisp edges (you may add more sharpness later via filters)
- Try to keep every reasonable layer in order to undo steps or remove elements later
- Group and name your layers because there might be up to 500 layers (in complex pieces)
- Save your file in a 10-minute interval
- Add details and keep an eye for an aesthetic composition
- Use as less filters as possible (standard-filters which can be easily recognized)
- Colors: play around with colors as much as you can (colors are the most important part of an artwork so experimenting with Photoshop’s possibilities is absolutely essential)
- Try reducing layer groups and adding blur/sharpener filters in order to get a more interesting atmosphere
- Take a deeper look at every pixel of your artwork to find artifacts or bad composition overlays (which may result from heavy transformations)
The list is my personal tutorial for creating detailed artworks. The way things work is just the technical side — having an eye for design and details is another part. Try to work out new techniques but don’t lose your view for aesthetic imaging. It’s easy said but you will get to a higher level if you are self-critical and open-minded. Inspiration is an important part so don’t forget to look what others are doing. There will always be trends and you can always define a new trend (e.g. by using unusual techniques). Having your own style is vital and I think this is what it’s mainly about when creating an artwork.
Today, I’ve found out a small trick accidentally. The trick is very useful because you can do more stuff with layer masks. You may already be familiar with the trick that you are able to activate/deactivate a layer mask by holding down the SHIFT-key and clicking on the layer mask-icon.
The new trick works similar: hold down the ALT-key on your keyboard and click the layer mask-icon in the layer palette to show/hide the alpha channel of the layer mask (black/white image).
This gives you great possibilities because you could even render clouds on your layer mask in order to create a complex mask effect. In Photoshop CS4, there are new layer mask features which allow you to do edit the layer mask separately (including its transparency). But so you have a “kind-of-CS4-feature” in your Photoshop CS/CS2/CS3.
I’ve just figured out a small trick that may help you when dealing with many layers and layer groups. As you know, the layer order is an important thing when creating/editing website layouts because you usually have many different layer kinds like text, graphics, dummy content and so on. Normally, I’m duplicating layers by pressing CTRL-J and then I’m moving the duplicated layer to the right position in the layer window by dragging it to the desired position. These two steps can be combined in one step. Here’s the trick:
Select the desired layer in the layer window and hold down CTRL and ALT. Now, drag the layer to the new destination in the layer window (not the layer in your workspace). Release the mousebutton (and the keys) and the layer will be duplicated and positioned in the right position in your layer window.
Another useful trick is the following:
Hold down the CTRL-key when creating a new layer via the “Create new layer”-button in the layer window to create a new layer below the selected layer.
This may speed up your work with layers a bit.
When designing websites in Photoshop, you’re mostly working with pixel accurate boxes and distances. A small “feature” in Photoshop that may get annoying is the subpixel calculation when creating/resizing vector shapes in a zoomed state. For example, if you create a vector shape with the retangle tool at 300% zoom, you may get something like this:
In most of the cases, this calculated subpixel is not wanted because you want a clean, sharp edge. The current workaround is adjusting the anchorpoints with your mouse or your the arrow keys on your keyboard. Both methods aren’t that quick and may get annoying if you have many shapes.
So there’s no real solution for this but a better workaround. It’s very simple if you know about it.
To get a sharp, pixel accurate vector shape, you’ll just have to create/edit it at a 100% view. In this view, Photoshop won’t calculate subpixels so you’ll get a sharp edge on your vector shape. Take a look at the screenshot for a better understanding:
That’s all. With this trick in mind, you may work faster and more accurate. You just need to check your changes in a zoomed view once again.
Since Photoshop CS2 you are able to use ‘Smart Objects’ in your Photoshop projects.
Smart Objects are very useful if you want to perform nondestructive layer editing because Smart Objects preserve the source content and all original characteristics of an image. There’s only one disadvantage when working with Smart Objects: you can’t link Layer Masks to them so if you apply a Layer Mask to a Smart Object and move the entire layer around, the Layer Mask won’t be moved.
When designing website drafts in Photoshop, you may have noticed that you need to measure pixel accurate distances, make exact selections or transform shapes pixelwise. In all cases you’ll have to move the cursor (mostly a cross) very accurate to preserve the design guidelines or mathematically distances. For example, I’ve always drawn an accurate selection by zooming in (using CTRL-SPACE), selecting the most left edge of a shape, zooming out, adding an area to the selection (by holding down SHIFT), zooming in to the most right edge of a shape and finally refining the selection by removing a selection area (using ALT). This can be an annoying task if you have to determine some hundreds of distances a day.
So I’ve crawled the web for an improved magnifying tool (the standard ‘Windows magnifier’ has problems with refreshing in Photoshop) and there’s one impressive (free) tool called ‘Magnifier’.
The ‘Move Tool’
in Photoshop has some nice advantages you may not know yet. With the Move Tool selected, you are able to do some handy operations that could speed up your current workflow a lot. This also applies to the other tools which enable some nice features when rightclicking
with the tools activated. But the Move tool enables the most useful features so I'm showing in a small video how to use those features.
Sometimes you have created some vector shapes
in Photoshop and later you want them to be one connected vector shape
in order to change their color or to transform the entire shape. Of course you could just create many vector shapes in one layer
so that just have to connect the anchorpoints. But when you're in a hurry (or if you're building up experimental shapes) you'll have more
than one shape. So I've created a small screencast that demonstrates how to connect vector shapes that are located on different layers
If you are working with keyboard-shortcuts in Photoshop, you may use the M-key very often to make a selection or to determine a distance. You may also need the horizontal and vertical selection tools (called “Single row” and “Single column”) in order to select 1px of the entire width/height of your document. By default, these selection tools aren’t included in the Photoshop shortcut-list but you can assign keys to them by using the “Keyboard Shortcuts”-dialogue which is accessible through “Edit -> Keyboard Shortcuts…”. There, just select the dropdown-box at “Shortcuts for:” and choose “Tools”. In the following window, you can assign any key to the horizontal/vertical selection tools so if you assign the M-key, you are able to switch through all selection tools by pressing “SHIFT-M”.
Sitepoint is currently providing the download of a free 278 page Photoshop ebook called "The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques" which is available for download. The download will be online for a limited time (unitl Friday, June 13th) so go get one if you’re interested.
The book adresses webdesigners who want to know about techniques and inspirations for their webdesign (e.g. how to make aqua buttons, seamless backgrounds, diagonal lines and so on). The book covers Photoshop basics (images, layers, vectors, transparency, text) and goes on with advanced techniques and specials like image effects, CSS rollovers, graphics optimization, creating animated GIFs and designing entire websites. So the book contains lots of useful examples, techniques, tips, and tricks that you can apply to your own designs.
« Previous articles