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.
As I'm a total fan of alternating row colors that improve usability immensely, I wanted to have these in the TextPattern backend (article listing). The article listing page of TextPattern is built up using table rows (tr) which are predestined to be color
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.
There’s a fresh Firefox extension out called Aardvark. This small tool is made for web development and CSS analysis. It can be seen as an addition to Firebug because it gives you some more features like colorizing blocks, removing elements live on a page, isolating elements from a page, viewing the source of a selected element and many more commands. Just take a look at it.
Make sure to check out the latest release of TextPattern: version 4.0.7. The new version of the best blogging CMS comes with some fresh features like a new tag parser (unlimited nested tags), WYSIWYG preview for all articles, a XML-RPC server (for desktop blogging) and an optional expiry timestamp.
TextPattern is a fast and lightweight content management system that is optimized for blogging but of course you can use it for every purpose. I’m using to run this blog. You should definitely give it a try!
Short and nice: the CS4 trials are finally available for download. Go get one to get an impression of the new creative suite!
In order to optimize the usability of your web project you may use the famous “To top”-link – a link at the bottom (or at the end of an article) of your page that scrolls to the very top of the website. To the very top? Usually, the top link jumps to the anchor position but this can’t be placed at the very top of your website. There will always be a header/logo above your top link anchor. But with a small trick, it’s quite easy to make the link jump the topmost position of your website.
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.
Don’t forget to watch the special CS4 web broadcast which starts today (September, 23rd) at 11am.
Also check out John Nack's CS4 feature blog post where he names some more details of the upcoming Photoshop CS4. There are some nice features, especially that Layer masks will finally stay linked to Smart Objects.
As you may have noticed the CS4 special web broadcast, which will introduce the upcoming version 4 of the Creative Suite, there has also been released a keynote of Photoshop CS4 (“CS NEXT”) on the Photoshop World 2008 in Orlando. Terry White provides the download (MP4-video) of the keynote on his blog. You should definitely check this keynote out because John Nack and Johnny L from Adobe show up some of the upcoming features of the new Photoshop. It’s just impressive what Photoshop will be able to do. Some feautres:
• realtime 3D-painting abilities
• 64-Bit/GPU-powered image transformations
• Spherical remapping of stitched panorama photos
• the ability to rotate the canvas
• Seam Carving (shrink/enlarge an image disproportionally without stretching it)
• a new zoom tool
• Hydra Filters (you can write your own or download free filters)
• Adobe AIR application that allows you to create your own floating windows with custom buttons/functions
If you watch the video, you’ll be bedazzled of the new Photoshop. It works very fast and looks quite awesome. I can’t hardly wait to upgrade.