Photoshop Tutorial for UI design

15 Sep 2006 - 5:17pm
8 years ago
10 replies
3035 reads
Weiwei Li
2006

Hi IxDAers,

I'm a recent graduate (master). My graduate program is more HCI theory
oriented and now I'd like to improve my practical skills to fit better in
the real world.

I was wondering if you can suggest some photoshop tutorials especially
targeted for UI design. I started to learn photoshop on my own through
Photoshop CS2 Bible, but it's too generic. I would like to learn how
designers in the industry prototyping with photoshops.

Thank you very much!

Weiwei

Comments

16 Sep 2006 - 8:24am
Baldo
2005

Photoshop is just a tool to draw something on computer. I think that
every basic photoshop tutorial is good to learn to basic tools
(layers, selections, brushes and so on). But only experience can tell
you what is your path inside photoshop.

If you wanna start with some tutorial take a look here (it's a
tutorial about "photoshop and website" not UI, but the tools are the
same):

http://veerle.duoh.com/blog/comments/designing_a_css_based_template_part_i/

On 9/16/06, Weiwei Li <weiwei.li888 a gmail.com> wrote:
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> Hi IxDAers,
>
> I'm a recent graduate (master). My graduate program is more HCI theory
> oriented and now I'd like to improve my practical skills to fit better in
> the real world.
>
> I was wondering if you can suggest some photoshop tutorials especially
> targeted for UI design. I started to learn photoshop on my own through
> Photoshop CS2 Bible, but it's too generic. I would like to learn how
> designers in the industry prototyping with photoshops.
>
> Thank you very much!
>
> Weiwei
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss a ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists a ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
Baldo - baldus a gmail.com
www.sanbaldo.com

16 Sep 2006 - 9:07am
ldebett
2004

Weiwei,

Photoshop is a very powerful and very large toolset to learn. You may want
to start with the "lighter" version: ImageReady CS2 to get your toes wet and
then get into PS later. It is very useful in creating prototypes too.
Illustrator is also a significant tool for prototyping, and depending on
what you're doing, may be more appropriate.

Photoshop is a pixel-based application while Illustrator is more
vector-based. You'll likely work easier with text and objects in
Illustrator, while Photoshop will give you better tools to handle images and
graphics.

I use both on a regular basis.

But to answer your original question, lynda.com is a good resource for
tutorials. =)

Cheers,
Lisa

16 Sep 2006 - 9:33am
Dave Malouf
2005

In our upcoming workshop at UI11 (spots are limited; almost sold out), Bill
Scott will be teaching a technique he's developed for using photoshop to
design interactive elements.

Personally, (war bait),
Fireworks and Flash are much better for GUI design.
Fireworks combines the best of Illustrator AND Photoshop, so you don't need
to switch between them; it has a concept of a library and a style guide like
quark would have, etc.

Tools are very personal things. They are extensions of our limbs and mind,
so choosing tools is always a bit precarious. It would be though a false
assumption in today's GUI design environment that Photoshop is a standard
GUI design tool. Looking at the archives on this list alone it is clear that
various tools from Axure to Visio to Fireworks to Photoshop all make good
GUI design tools depending on your point of view, where you started and what
you have to do with your assets afterwards.

As Lisa said though lynda.com is quite excellent.

-- dave

16 Sep 2006 - 10:13am
Baldo
2005

I want to make some kind of collaborative test:

1. choose some kind of wireframes or UI images
2. find some experts in fireworks, photoshop, illustrator, visio..
3. create the tests (something like "do this wireframe" or "do this
wireframe and then make some changes")
4. submit tests to the experts
5. analyze results
6. discuss

> Personally, (war bait),
> Fireworks and Flash are much better for GUI design.

16 Sep 2006 - 3:07pm
Dave Malouf
2005

What are the criteria for analysis?
Speed? Aesthetics? Ability to use throughout the lifecycle?
Could one tool be better for consultancy work, while another better for
inhouse? One tool be better for software another for devices and another for
web (web sites vs. web applications)?

So many contexts, so little time. ;)

-- dave

> I want to make some kind of collaborative test:
>
> 1. choose some kind of wireframes or UI images
> 2. find some experts in fireworks, photoshop, illustrator, visio..
> 3. create the tests (something like "do this wireframe" or "do this
> wireframe and then make some changes")
> 4. submit tests to the experts
> 5. analyze results
> 6. discuss
>
> > Personally, (war bait),
> > Fireworks and Flash are much better for GUI design.

16 Sep 2006 - 4:01pm
Baldo
2005

It would be nice to explore criteria and working habits..
If someone is interested, we can discuss (maybe not in this list) about that.

We can also compare different working styles and help someone
reviewing our/yours processes.

> What are the criteria for analysis?
> Speed? Aesthetics? Ability to use throughout the lifecycle?

17 Sep 2006 - 5:03pm
Todd Warfel
2003

On Sep 16, 2006, at 4:07 PM, David (Heller) Malouf wrote:
> What are the criteria for analysis?
> Speed? Aesthetics? Ability to use throughout the lifecycle?

And what makes a better tool for doing UI/Interaction design? A
"better tool" could mean several things:
1. How easy is it to use from the get go? Or what's the learning curve?
2. Can it accomplish what you need to do to build sample screens?
3. How good is it for ongoing maintenance?
4. Can it produce a final deliverable/artifact that is appropriate
for the consuming audience?
5. How well does it work in a collaborative environment?
6. What are the initial costs (financially)? What about ongoing costs?

Those are the questions we (my company) asks when choosing a tool.

We have developed a framework using InDesign and Illustrator that
works well in a collaborative environment, allowing multiple people
to work on a wireframe deck at once. The learning curve of
Illustrator is high, but once you get up to speed it's very fast for
drawing, which is what we've determined is important. Additionally,
the framework we use is the best thing we've found so far for
collaborative environments and ongoing maintenance – and we've tried
Visio, Photoshop, Freehand, Flash, Fireworks, Illustrator, InDesign,
Word, PowerPoint, Dreamweaver, and a few others.

Cost? Well, it's not as cheap as OmniGraffle, but cheaper than Visio
(in many cases). The final output quality is better than Visio and
it's much faster to do what we do in ID/AI than in Visio. This is
based on us actually tracking and testing things like "mock up this
in OmniGraffle, Visio, HTML, and ID/AI and see which one is faster."
ID/AI continues to be a faster model. Now, for probably 70% of the
work, we haven't been able to measure an increase in speed between
OmniGraffle, Visio, ID/AI, but that other 30% sure pays off.

We've experimented with Fireworks a bit, but it doesn't work out as
well for the work we do. Additionally, we've run into color shifting
when taking things from Illustrator to Fireworks and that's
irritating - we have higher standards for quality. I think Fireworks
would work for most of what we do, but when ID/AI works for all of
what we do, then we'll stick with what works.

In other cases, HTML/CSS is a better option. So, some of our work
recently has been just moving straight to HTML/CSS prototypes and
skipping a PDF wireframe deck.

Cheers!

Todd R. Warfel
Partner, Design & Usability Specialist
Messagefirst | designing and usability consulting
--------------------------------------
Contact Info
Voice: (607) 339-9640
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
--------------------------------------
In theory, theory and practice are the same.
In practice, they are not.

17 Sep 2006 - 7:18pm
jbellis
2005

Todd, what's in your framework? Page and common interaction patterns?

Thanks, Jack
----- Original Message -----
From: "Todd Warfel" <lists at toddwarfel.com>
To: <discuss at lists.interactiondesigners.com>
Those are the questions we (my company) asks when choosing a tool.

We have developed a framework using InDesign and Illustrator that
works well in a collaborative environment, allowing multiple people
to work on a wireframe deck at once.

18 Sep 2006 - 7:52am
Todd Warfel
2003

On Sep 17, 2006, at 8:18 PM, jackbellis.com wrote:

> Todd, what's in your framework? Page and common interaction patterns?

The framework uses a combination of Illustrator and InDesign.
Illustrator is used to create all the pattern, tile, and screen
illustrations. Then we pull them all together in InDesign and add
behavior notes.

Here's the rough definitions we use:
Pattern - a regularly occurring item. Patterns may have different
instances that vary slightly (e.g. form submission and form
submission with required item)

Tile - a tile is an individual "block" that appears on the screen.
Tiles are typically formed from one or more patterns. An example of a
tile might be a the Shopping Cart tile on Amazon. The key difference
between a pattern and a tile is that a tile is what's implemented on
the screen. These are also sometimes called widgets, gadgets, or
portlets.

Screen - this is the collection of multiple tiles on the presentation
side - it's what renders in the browser window, or desktop
application. Screens are typically a collection of multiple tiles.

A final artifact built on our framework consists of:
* Version history
* Document index (more than just a TOC)
* Pattern library w/behavior notes
* Screens w/behavior notes

When needed, we'll even do storyboards for some of the screens (e.g.
working on AJAX or other RIA applications).

Cheers!

Todd R. Warfel
Partner, Design & Usability Specialist
Messagefirst | designing and usability consulting
--------------------------------------
Contact Info
Voice: (607) 339-9640
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
--------------------------------------
In theory, theory and practice are the same.
In practice, they are not.

18 Sep 2006 - 10:35am
Michael Micheletti
2006

Hi Weiwei, I'll address skinning UIs in Photoshop, since it's one of the
things I do. It is challenging to unearth tutorials on creating high-quality
application skins in Photoshop. You kind of need to search for specific
things, like how to create buttons or add metallic textures or create
reflective glass overlays or what have you. The Photoshop Professionals
association has a few good tutorials, others are available for free on the
web. Check also the websites of applications that encourage skinning. I've
got a pile of Photoshop books, each of which has two or three handy UI
techniques. But I have yet to find a really focused book on creating user
interfaces with Photoshop, and keep wishing that some capable person would
write one.

There is one thing however that many UI people do with Photoshop, and that's
to take an existing screenshot and adapt it so that it has a new button or
control or something. That might be a good thing to practice with as you
learn to use the tool. Be patient and good luck,

Michael Micheletti

On 9/15/06, Weiwei Li <weiwei.li888 at gmail.com> wrote:
>
> [Please voluntarily trim replies to include only relevant quoted
> material.]
>
> I was wondering if you can suggest some photoshop tutorials especially
> targeted for UI design. I started to learn photoshop on my own through
> Photoshop CS2 Bible, but it's too generic. I would like to learn how
> designers in the industry prototyping with photoshops.
>
> Thank you very much!
>
> Weiwei
>

Syndicate content Get the feed