Photoshop For The Web

Designing websites isn't all about HTML, CSS and heavy coding - there 's a big emphasis on the visuals these days. Photoshop remains a key application that unites creatives of all kinds and the web ones are no exception

When it comes to the tools of the web design trade we all have our favourites. While some couldn't survive without the quick-fire code editing tricks of Dreamweaver, others might favour the ASP.NET and XML flavourings of Microsoft' Expression Web, the clean Mac OSX leanings of Coda, or just a simple old fashioned text editor. Different applications for different needs. However, with an increasing importance placed on a visually rich web experiencience, the front-end design phase often requires a much more sophisticated, all-encompasing graphical arsenal. Couple this with the likely pathway that sees designers of other disciplines migrate to web design and there becomes a common interest in a 'workspace for all seasons' as it were.

Photoshop, and indeed those graphics suites that imitate it, has become the industry standard for graphical web design from concept to completion. It is so intrinsically linked into so much of the visual digital world at large that "to Photoshop" has become an accepted verb that even non-users affectionately understand.Got some holiday snaps you want processed? Throw them into Photoshop. Everything from wedding invitations, advertising billboards, product design, logo productoin, comic book art, Web Designers covers- you name it, Photoshop will do it. If you're still not convinced then this feature promises to give a few practical reasons why web designers especially should take note. We've invited top freelance designer Radim Malinc to explain some of the core techniques synonymous with using photoshop for the web, while offering an insight into his own work. Divided neatly into sections for the production of web graphics, templating, and optimisation, we'll look specifically at crafting page headers, buttons, animated ad banners, badges, storyboards, mockups and more. With the help of associated resources and comments from professional designers, the feature is a unique insight into the role Photshop has within the modern web workflow.

Our guest expert: Radim Malinic, the creative force behind www .brandu.co.uk.

Maciej Hajnrich

Turning on Photoshop is obvious when I'm working with websites - from mockup to final design. For me it's the perfect choice for projects of any kind, starting from movie, entertainment and other high interactive sites to corporate portals at the end.

I have great control at every step of my work and it doesn't matter if I do code by myself, send it to a prgrammer or Flash developer - I have the same creative freesom as in every print project. Of course it's important to keep in mind all technical guidlines but the most important thing for me is designing. Swapping between Lasso, Brush, Eraser tool, changing brush size, skipping between layers, moving them up/down, changing opacity, blend mode or finally working with smart objects/smart filters turns this into even more powerful workflow. It's important not to forget about Bridge, which is indissoluble part of Photoshop - working with multiple files llike current resources, is easy and Bridge is very helpful in managing them all around.

Most of my designs are highly detailed where every pixel does matter. A few tiny squares may change the look of a button - is it rounded or not, or what letter is typed over August 04, 2009

Crimson Editor

photoshop.html

2 / 2

there- and Photoshop gives me absolute control over them. I'm combining photography with ilustraion- taking parts from one and putting alongside tanother just painted or retouched thing is daily bread. Fluency at this point is crucial since the client may ask for some tweaks like changing navigation, appearance or main character size.

I'm always saving project in several files. This allows me to do backups and compare progress in case I go too far. Also naming layers and groups is crucial for me - I hate mess in panels. Fianlly the client gets a .psd with my work so managing them helps a lot .

Loic Sattler

Photoshop is the cement that binds graphical elements together and enables one to give out a mood for a future web based project. It is also the main tool when it comes to produce an internet site. Photoshop will be used as long as there is a visible pixel! However, Photoshop is often used in parallel of illustrator and both tools are equally important, especially when it comes to produce a web in Flash - a technology that mixes both techniques. Fireworks is another solution thta mixes vector and pixel but I don't really use it. In this example for www.sonaom.fr I show how I first draw the elements in Photoshop with my graphic tablet (black and white). This primary step gave me the mood I wanted to go into (1).This is a rather simple step but it is the most important: the blank canvas begins to live!. As we were dealing with colours on this site, I decided to colorize the elements in Photoshop and make a composition that would help the client understanding where we wanted to go(2). Next is the draft that was sent to the client and that pleased him. (3). This final draft is really close to the online result. After concept acknowledgement, we build all the pages in the Photoshop file to show every template available. This is a process that is frquently seen in web production: creating all the template pages files, to validate the production and convey a design process.

1.    
2. Loic uses Photoshop to bring vibrant colour to his designs and convey energy to the client
3. Gradually the design gets more viusally complex as the Sonacom.fr project takes shape

Michael Heald< /a a>

If Photoshop didn't exist then I would be dead on my feet. Photoshop to me is like a brick to a builder. I work almost exclusively with the games companies these days, who on the whole require detailed, intricate and exciting imagery to surround and encompass their sites, so Photoshop allows me to amalgamate their assets, like characters with transparent backgrounds, environment renders, flat texture files and in truth, little else. It is usually my job to take all those loosely connected assets and create detailed interfaces, and complex surrounds for the websites. If you look at the natural selection2 example, I was given a render of the corridor, one of the hive creature and flat texture of the organic growth material. From here I spent many hours cutting bits out, adding additional lighting effects and creating a whole scene to thrust the user deep into a very atmospheric webpage, making them feel as though they were in the game itself. The core interface elements were constructed from pieces of the corridor render and far doorway.

So as you can see, without Photoshop, I'd be finished, as it is this tool alone that allows me to create these types of complex images and I would never consider using anything else. I think my favourite finishing and effects tools within Photoshop would be adjustment layers, layer effects and blending options, as these can create some awesome light effects to really tie a piece together.