Shape Shed

Screen Modes in Photoshop

2008-05-07T11:16:00Z

When designing in Photoshop there are a couple of options that allow you to review your design without noise around it. Here's a quick overview of how you can take a step back from the digital canvas.

Step away from the canvas

When you are designing you are probably using Rulers and Grids to layout your page. Like painters who need to step back from the canvas so do designers in Photoshop. There is a good deal of clutter around the page you are viewing too. Thankfully there are a number of view options that allow you to see an uncluttered view of the page.

Remove grids and rulers

If you are using grids and rulers you can turn these off For grids hit Apple ' on the Mac or CTRL ' on Windows. To remove rulers hit Apple ; on the Mac or CTRL ; on Windows.

Screen mode

Once you have remove grids and rulers you can cycle through Screen Modes and knock out the rest of your desktop. To do this simply hit F. You'll see there are four options:

Standard screen mode
Maximised screen mode
Full screen mode with menu bar
Full screen mode

At this stage we still have the tool menu and all of the option palettes though.

Remove everything else

To get to just our design we hit tab. This removes everything else from the workspace and you are free to gaze at your creation without anything else cluttering it up around it.

If you want to scroll around your design hold the Space bar and drag around. You can zoom in and out using Apple + and out using Apple -.

Watch the video below to see the full cycle of events in the very first Shape Shed video! Woo hoo! The SD version is below but if you want the HD version you'll have to visit the Vimeo site

Screen Modes in Photoshop from George Ornbo on Vimeo.

Camera RAW or JPEG?

2008-04-30T14:15:00Z

If your camera can shoot in RAW format should you be using it? Here's a quick overview of the difference and what you can do with the RAW format in Photoshop.

What is RAW?

RAW is an image format produced by cameras. All cameras shoot in RAW. The difference is that at the consumer end of the market most cameras convert the RAW format instantly to a JPEG for you. At the higher end of the market however you can access and manipulate the RAW image file. Many people like to think of RAW as a the negative format for digital photography. The file contains all of the information for the image but it needs to be processed before it can be used. RAW contains information directly from the cameras image sensor, most of which can be edited Photoshop.

Why not shoot in JPEG?

For many people shooting in JPEG is the better option. The camera will interpret the RAW image and convert it to a JPEG or TIFF. For casual photographers they are not interested in manipulating each photograph.

If however you want more control over your image however you should choose the RAW format. This will allows you to manipulate the image after it has been taken exactly how you want to.

JPEG and TIFF files are gamma-compressed so you are likely to have less control over lights and darks than if you use RAW. If you shoot in JPEG you have to accept what the camera thinks is correct and rely on your Photoshop skills to correct it.

In terms of a RAW file the settings that you can't change are ISO speed , fStop and Shutter Speed. Pretty much everything else you can manipulate after the shot has been taken.

Open JPEGs as RAW files

If you are using CS3 you can open JPEGs as RAW files via Adobe Bridge. Make sure you take a copy of the file you are editing first as this is a destructive method. Then right click the copy and choose Open in Camera Raw..

You can now edit the JPEG with all of the granularity that RAW offers. Pretty cool. You can save it and maintain the information in the image by choosing the DNG format.

What is a DNG?

A DNG file is an open source file format created by Adobe. In a nutshell it is an open source version of RAW. Many different versions of RAW exist for each camera manufacturer and some parts of these files are encrypted to stop thrid party software from accessing them. For extensibility this is a bad thing. DNG is a great format and I'd love to see more of it but to date camera manufacturers are keeping their doors shut.

Editing RAW files in Photoshop

I'm going to leave it to the mighty Mike Mchugh to explain what you can do with RAW files in Photoshop. I think "Bloody hell, wouldn't the bride be just pumped with that?" says it all. If you are reading this in a newsreader you can view the video here.

Illustrator 101 - Guides and Smart Guides

2008-04-26T07:33:00Z

Guides help you to line control objects and paths easily in Illustrator. Here's a short overview of the options and how Smart Guides can take it a step further.

Basic Guides

To show rules hit Apple R or Ctrl R on Windows. If you are working on the web you will probably want the dimensions to be pixels so right click on the ruler and chose pixels.

To create a guide simply click hold and drag (just as you would in Photoshop). To align your guides with a point in the ruler hold down shift and it will snap to the points on the ruler. Moving guides isn't always like Photoshop however. Normally guides are locked by default so if you try and click hold and drag on a ruler as in Photoshop it won't work. To be able to move guides you need to unlock guides. Go to View > Guides > Lock Guides.

If guides are locked then there will be a tick next to it. If not you should be able to move your guides around. Deleting guides is also different from Photoshop. If you want to delete a guide simply click on it with the Direct Selection Tool (Shortcut V) and hit delete. If it doesn't work the guides are probably locked so make sure you unlock them.

You can hide and show guides using Apple ; or Ctrl ; on Windows which can come in useful if you want to see your artwork without the guides.

Guides are not just limited to ruler lines though. You can use any pretty much any path to make a guide. This means you can use a rectanlge, circle or hand-drawn path as a guide. To do this draw the shape or path as you would normally do then go to View > Guides > Make Guide. The shortcut is Apple 5 or Ctrl 5 on Windows.

Smart Guides

Smart Guides are brilliant and if you aren't using them turn them on by hitting Apple U or Ctrl U on Windows. Smart Guides automate many of the tasks that the Align palette and normal guides perform. They take a little getting used to but once you are up and running you won't look back.

To line up an edge for example (ensuring Smart Guides are on) click on the edge of the object that you want to line up. Then hover over the shape you want to align to. It will snap to the shape and you can then move it up and down to position. Watch the video below to see it in action. In most cases this is quicker than pulling out rulers or using the Align palette (but if that works for you then great).

This video requires the flash plugin. You can get a copy of it for free from here

You can set preferences for Smart Guides by going to Illustrator > Preferences > Smart Guides & Slices on the Mac or Edit > Preferences > Smart Guides & Slices on Windows. The preferences pane allows you to decide what shows in Smarts Guides and angles and snapping tolerance.

IE6 not going anywhere soon

2008-04-24T09:36:00Z

I've been monitoring browser statistics on clients over the last few months in order to understand the effects of the IE7 forced update by Microsoft. Among corporate clients it doesn't seem to have had much effect and IE6 looks set to be around for a while.

The Sample

To perform the analysis I took data from two well know City of London firms. I wanted to assess IE6 usage within the corporate sector. I used Google analytics to complete this analysis. I wanted to see the effect of the Microsoft auto update to IE7 on February 12th was. Admittedly this a very small sample but I know that site visitors come from corporate environments. For this blog around 31% of visitors use IE and of that only 35% use IE6. I know that is not indicative of most of my clients so hence the analysis.

Findings

Firstly Internet Explorer is the dominant browser in the corporate environment. For the three month period IE dominates with around 88% of the market. This was much higher than I had expected.

Secondly Internet Explorer 6 accounts for around half of the visitors. In three months IE6 has dropped from 53% to 49% and this has switched straight to IE7 which has risen from 35% to 39%.

Conclusion

For corporate clients at least it seems that IE6 is going to be with us for a while. For this sample it seems that the forced update of IE7 has had no noticeable effect on browser usage. The 4% shift to IE7 can probably be accounted for from upgrades to Vista. For corporate clients it seems we will need to continue supporting IE6 for a while yet. I wonder what other people's experience of the results of the forced update are?

Mobile sites are more than mini-mes

2008-04-21T17:22:00Z

Mobile versions of websites can be better than their bigger, richer web versions. Moreover user-focussed, task-driven mobile sites can inform and improve their bigger brothers.

Task-driven on steroids

Mobile sites force designers to think more carefully about creating task-driven sites than otherwise. The space available to work with is minimal. The width of the screen can be anything between 150 and 320 pixels wide. This is significantly less than lowest resolution monitor. Furthermore the ratio of x to y on the screen is the inverse of a traditional screen. We are working with landscape rather than portrait.

From a design perspective this presents a number of challenges. User actions have to be presented first and at times navigation goes out the window.

I have been browsing the web with handheld devices for around three years and to start with it was clear that designers did not understand the limitations of the environment. In fact I would say that large content sites like CNN and BBC still struggle to get navigation and relevant content on a mobile screen.

Social networks succeeding

For me social networking sites are succeeding where large content sites are not. They have the enviable advantage of having a limited number of tasks that users can perform. Still though they are getting tasks onto the page quickly and in a usable manner. Here are a few examples:

Mobile design is sometimes better

I'm going to say something controversial. In some cases I prefer mobile versions to the full web version. If we take Twitter I tend to access m.twitter.com rather than the full site even with a full browser. There are several reasons for this:

The page loads more quickly
The tasks I want to perform are available more quickly
I can perform everything I want to on the mobile version
I get the job done more quickly

Design theory has made great strides in focussing on making a site user-focussed and task-driven. Mobile sites represent the ultimate incarnation of that. Increasingly I'm feeling that stripping a site back to its bare bones can help to understand the product better and can inform the full web version and sometimes even usurp it.

Saving time with Smart Objects in Photoshop

2008-04-21T14:34:01Z

Smart Objects can save you a great deal of time if you are designing for the web in Photoshop. Furthermore they allow you to manipulate images without destroying the original.

What are Smart Objects?

As of CS2 Web designers and photographers rejoiced with the introduction of Smart Objects in Photoshop. Smart Objects allow you to place objects on your page that can be repeated, edited in one place or even edited in other applications like Illustrator. Here's an example. Let's say we are designing a web page and we have created a simple search icon using Photoshop.

We are using this icon in the header to indicate a search but also further down the page to highlight a search feature. We could just copy and paste the layers that make up the icon here but it is much better to make it into a Smart Object (you'll see why shortly). To do this move all of the layers for the icon into a new folder. If you don't have the layers palette up go to Window > Layers or hit F7. Then create a new folder (at the bottom of the palette) and drag the layers into the new folder you have created. Now right click on the folder and choose Convert to Smart Object. You will see that the folder changes to a single layer with a new icon.

What's happened here? The layers have been converted to an object. This means that they stay there underneath but that you can reuse the layer without affecting the layers underneath. You can now copy this Smart Object layer as many times as you like.

If you want to change the object you only have to do it in one place and every instance of the object will be updated. This is an idea that many programming languages have so if you know anything about Object Orientated Programming the idea is very similar.

Returning to our example we send the comp off to the client for approval and they love it. Great! But they have a few small changes. They don't like the colour on the handle of search icon. Can it be a bit lighter? Of course you say.

The power of smart objects

Here is where the power of Smart Objects is. In this case I have two instances of my search icon on the page. If I wasn't using Smart Objects I would need to update both. But because I am using Smart Objects I only have to update this once. Imagine the time this could save you if you have 50 instances! To edit the Object in the Layers palette click on the Graphic on the layer. It doesn't really matter which layer you choose - it will update both. When you click you will see a message from Photoshop to remember to save your edits. Don't forget this or you will lose your amends.

I can now see all of the original layers from my icon and I can go in and change the colour of the magnifying glass handle to a blue / grey gradient. I'm happy with my edits so I go to File > Save. This updates every instance of the icon in my document so both icons are updated. The comp goes back to the client in half the time.

Not just Photoshop

If you prefer to do icon design in Illustrator you can also paste from Illustrator as a Smart Object. This allows you to repeat the Object as much as you like but if you want to edit it you return to Illustrator and do your editing there.

Good for photos too

Smart Objects are also great for photographs in that you can apply filters without destroying the original photo. When you open your photo in Photoshop convert the photo layer to a Smart Object as before. You can then apply Filters to the Smart Object without destroying the original. You can even go back into the filter settings and change things.

Since learning about Smart Filters I have used them heavily to improve my workflow and to accomodate changes from clients more efficiently. If you don't use them already I strongly suggest you do!

Make a photograph black and white in Photoshop CS3

2008-04-20T20:08:00Z

Until recently I'd been using desaturate to convert photographs to black and white in Photoshop. In fact there is a much better non-destructive method.

New for CS3

This method will only work on Photoshop CS3. In this example we are going to use an image taken by Steffe.

The Technique

Open the image that you would like to convert to black and white and open the layers palette by going to Window > Layers or just hitting F7. In the layers palette click the Create new fill or adjustment layer at the bottom of the layers palette.

Select Black and White. Hey presto! Not only is it a non-destructive layer (meaning your original photograph is safe) but you can also adjust the result based on the original colours.

You can use the sliders to get the photo to where you would like or apply a number of custom presets. As if that isn't enough you can also click and hold on any part of the photo and then drag the mouse to the left or right to change that colour. Pretty slick.

If you want to change the Hue or Saturation you can also do it at the bottom of the options.

Desaturation no more

Until I discovered this technique I was using desaturate to move colour images to black and white. No more!

Reflecting on FOWD ‘08

2008-04-17T20:56:00Z

I attended the Future of Web Design Conference in London. For me the conference did not deliver on ideas but did on meeting people.

Not far from home

As a resident of London, the Future of Web Design conference seemed a good choice for me. The venue was easy to get to and I liked the speaker list. With a focus on the design and user experience side I felt it would be a good introduction to conferences as well as a chance to learn some new ideas. I enjoyed the pre-party sponsored by Media Temple a litte too much though..

Well organised

Rising with a slightly fuzzy head I made my way to the conference. It was extremely well organised and even though the event was sold out I was able to get my pass with minimal fuss and settle in for the speeches.

This was the point at which I started to wonder why I had come. Worse is that I felt all of the speakers did a good job and almost all of them gave well structured, and well presented speeches. From Patrick McNeil talking about design inspiration, to Daniel Burka sharing his design experiences all of the speakers were open, honest and professional.

Was I stimulated? No. Did I learn anything new? Not really. This was a disappointment to me. Watching the excellent Jon Hicks was entertaining but I know how to set up a local site and code CSS templates thanks. Perhaps I was expecting too much but I had hoped to have my assumptions challenged and to go away wanting to try new things. None of that happened.

Even Paul Boag, who did a good job as compere of the event, didn't seem entirely convinced about some of the content. For me (and I suspect this was the wrong conference for me) the content was too cuddly and pitched at too low a level for it to be provoking or challenging. Perhaps it was just that my expectations were too high. Basically I felt safe and I really wanted to be moved outside my comfort zone.

Meeting people

The saving grace of the event, and probably the main reason I would return to a Carsonified event, was meeting people. Hanging out at parties or bumping into people in the venue was a great way of meeting like-minded designers and developers. I've made new contacts and that was worth entrance fee alone.

That said perhaps I should pick my conferences more carefully next time. Andy Budd, Paul Farnell and Patrick McNeil aside I didn't feel had any of the assumptions I had challenged. Sorry - I know you were trying your hardest...

Gmail and HTML Emails

2008-04-11T07:30:00Z

The Email Standards Project has posted a tongue-in-cheek video asking Google to improve standards support in Gmail. Yahoo have acted on Yahoo Mail and have achieved everything in the acid test. Gmail needs to follow suit.

Gmail is a great email client and it is being let down by a lack of support for web standards. If you have ever developed an HTML email you'll know that Gmail does not honour standards compliant code and you need to use tables and hacks to get it rendering properly. This isn't an acceptable situation and the Email Standards Project is lobbying to change things.

They have already had success with the Yahoo Mail team. Come on Google - it is time to put your house in order.

Designing with grids in Photoshop

2008-04-10T09:22:00Z

Creating a grid to base your designs on is invaluable for giving structure to the page. Here's a quick introduction to grids and how you can speed up creating them in Photoshop.

Learning from newspapers

Newspapers bear many differences to designing online. They are held in the hand, the print size is fixed and you can see the whole page at once. But they also bear many similarities. They are portrait, generally have a header and present large amounts of content in a small space. The skills of the designer here is to get as much as possible into the page without making it appear cramped.

How then is this achieved? Of course there is a large amount of creative flair but underpinning all of this is generally a grid. If you look at any modern newspaper you will see a grid behind the layout. Here's an example from the UK paper The Guardian.

The layout has five columns and content is arranged around this grid to give the page structure but also to highlight more important pieces of content. The headline for example spans all five columns which has the effect of dominating the layout. This of course is exactly what is intended. In this particular example the content is tightly aligned to the grid. Grids can also be used to break rhythm. In this example the footballer in the header breaks outside the expect columns. This is a design effect that is used to draw the eye to a feature.

Once you understand grids you will start to see them everywhere. They are on poster designs, TV graphics, identity design, product design, in fact pretty much everywhere.

Applying it to the web

Basing your design on a grid has many advantages from giving structure to the page to allowing users to learn the layout quickly. How though do you go about setting up a grid in Photoshop?

Here comes the maths. If you are designing to a fixed width design you need to decide how many columns your design is going to have and how much spacing you want between them. So say for example we are designing to a width of 1000px we need to work out how wide our columns are and the spacing between them. We are going to stick with a 5 column design here so our columns will be 180px with a spacing of 10px on either side. If you are designing to a fluid width you will need to pick a width to do your design in Photoshop. 1000px is not a bad idea as then you can convert your spacing to percentages by removing a zero.

Using patterns

Photoshop's ability to create custom patterns is perfect for this job. First let's create a column so we can apply it to a larger canvas. Create a new document of 200px x 10px. The height here isn't really important. Then set some rulers 10px in from each side and draw a rectangle of 180px using #ff9999 as the colour. It should look like this:

Next we need to merge the layers so we can use the pattern. In the layers palette (F7) highlight the two layers (hold down shift and click), then right click and choose merge layers. This merges the layers into one.

Now go to Edit > Define Pattern. Give your pattern a name and click ok. This saves the pattern so we can use it in future. Now create a new document of 1000px x 700px. Bring up the Layers palette and click on the New Fill or Adjustment Layer icon at the bottom:

From the menu choose Pattern... Then select the pattern that we have just created. If your maths and shape sizes are correct you will now see a perfect grid across your design. This is one layer so you can use it to create your design and change the visibility or opacity as you wish. Job done!