Always keen to push the boundaries, today I decided to test whether or not it is humanly possible to teach people about Photoshop without sharing a screen. The experiment was a semi-success, with lots of really useful tips and some handy resources emerging.
I’m referring to the latest in our Talk with the Experts series of free online chat sessions. The subject today was (fairly obviously) Photoshop, and the expert was the very interesting Nuria Zuazo (who you’ll know as molona if you’ve spent any time around the SitePoint Forums in the last decade).
If you don’t have time to read through the entire transcript, below is a list of the resources that were mentioned.
creativelive.com – a great Adobe training resource
Photoshop resources on Learnable
An inspiring self-portrait of a 14 yo done using Photoshop
The Adobe Education Exchange
Adobe TV
Adobe for Academics
Level Up for Photoshop
Next week’s session is timely – we’ll be talking to SitePoint Group designer Peter Bakacs. Pete is the design genius behind the shiny new sitepoint.com. He’ll be chatting about arguably the most important aspect of designing any website – User Interface Design. Make sure you don’t miss this one!
If you missed the session this week because you didn’t know about it, you can sign up for email reminders of future sessions.
If you’d like to see exactly what went down this morning, here is a full transcript:
[21:29] <HAWK> So we may as well kick things off.
[21:29] <NuriaZuazo> I’ll try to be as specific as possible in my answers… it is a bit of a challenge for me trying to teach photoshop… without sharing my screen Image may be NSFW.
Clik here to view.
[21:29] <HAWK> I don’t know how much Photoshop experience the rest of you have, but I feel like I use about 1% of its capabilities
[21:29] <HAWK> And I’m in awe of people that make it look like magic
[21:29] <SizzleMonkey> I am an intermediate beginner
[21:29] <Kwayzi_digital> Is photoshop still useful for responsive web designs?
[21:30] <NuriaZuazo> Hawk, I don’t think that even the greatest artist uses all its potential!
[21:30] <HAWK> Good questions Kwayzi_digital – can you start with that NuriaZuazo?
[21:31] <NuriaZuazo> @Kwayzi_digital. I guess the answer to that is yes and no. Yes, in the way that if you use it to compress images, or to design layouts and mockups it is still good… Now, the slcing toll…
[21:31] <NuriaZuazo> if you use that one, that’s something else, and I would say that the slicing tool is not good
[21:32] <johnlacey> It blows my mind a little that people still use Photoshop to design web pages.
[21:32] <NuriaZuazo> But then, slicing a design was never the best way to get the best results
[21:32] <HAWK> Rather than another product johnlacey?
[21:32] <HAWK> oh – to design the pages you mean
[21:32] <HAWK> yeah, agreed
[21:32] <NuriaZuazo> johnlacey, I agree with you… I understand the some people need to see it first… before is coded though.
[21:33] <johnlacey> Yeah I mean unless your page is 100% images (and if it is, that’s pretty terrible for accessibility / SEO)… @hawk
[21:33] <SizzleMonkey> It does make a good visualisation tool
[21:33] <NuriaZuazo> That’s true.
[21:34] <johnlacey> Mind you I am pretty in love with Illustrator. But I’ve reached a point where I only use it to create mood boards rather than page designs. Gotta prototype in HTML/CSS for the magic to really happen.
[21:34] <NuriaZuazo> SizzleMonkey (chuck for me now) If you use it like that fine, even for inspiration! Photoshop is soooo cool! Image may be NSFW.
Clik here to view.
[21:34] <johnlacey> Nuria I was wondering do you use actions often, and if so for what kind of tasks?
[21:35] <NuriaZuazo> @johlacey Illustrator is my second love… but as you know it should not be used to design web pages (more that Photoshop)
[21:35] <SizzleMonkey> Question
[21:35] <SizzleMonkey> WHY should photshop not be used to design?
[21:35] <Kwayzi_digital> Photoshop still rules for digital art, mood boards, airbrushing, UI design, poster design and much more. Illustrator work better for responsive design because you can have multiple artboards in one file!
[21:36] <NuriaZuazo> @johlancey I do use them! They come handy. I use them with any task that require works and that I do step by step (as an example, resizing images)
[21:36] <johnlacey> Oh and in case @Hawk doesn’t remember to mention it, check out the Photochop entries at the Sitepoint forums. (You’ll need to be logged in to get the full effect.) http://www.sitepoint.com/forums/showthread.php?1153179-*****-THE-GREAT-SITEPOINT-PHOTOCHOP-CONTEST-*****
[21:36] <NuriaZuazo> If I can automate something and it is a regular job, I do it. It saves time.
[21:37] <Amjad> can i start using Adobe Ps CC is that a better option? As right now i am using CS5
[21:37] <Jerry> One terrific resource for Adobe training (as well as photography and other creative stuff) is CreativeLive.com. Free classes live during the day, repeated until the next morning, then you can purchase the recordings if you like it. They have a number of different PS and Illustrator classes Next week is Creative Cloud design week
[21:37] <HAWK> Sounds awesome Jerry
[21:37] <SizzleMonkey> Again, why is PS not a good design tool?
[21:38] <HAWK> And I guess I wouldn’t be doing my job if I didn’t mention our resources on Learnable https://learnable.com/topics/photoshop
[21:38] <NuriaZuazo> @SizzlMonkey It is not that Photoshop shouldn’t be used to design. If you’re a visual person and needs to see the design you’re coding, then it is fine. What’s not so great is that you use tools like slicing
[21:38] <ralphm> Amjad, that’s the question I was thinking of, too. I’m a little wary of CC … really don’t like the concept at all.
[21:38] <Jerry> Looks like today is the first of a 3 day Painting with Photoshop course. Sounds interesting
[21:38] <johnlacey> I want to put my logo on a bunch of photographs I’ve taken. Though I’m not sure if I’ll be happy to have it appear on the same place on every image (thus you know making my life easier / using actions) or if my inner artist will one want to tweak every last one. lol
[21:38] <NuriaZuazo> Automated code is (always) something that needs to be improved
[21:39] <SizzleMonkey> as opposed to what other tools?
[21:39] <Amjad> @Admin can i start using Adobe Ps CC is that a better option? As right now i am using CS5
[21:40] <NuriaZuazo> Adobe CS5 is fantastic… you can stick to it… The advantage of CC is that is updated constantly (no more versions anymore) but it is pricey, in my opinion
[21:40] <Jerry> ralphm: I understand the CC concern. One big advantage, though, is the cash flow. If you own any CS apps (even one) you can get all the apps on CC for $30/month for the first year
[21:41] <ralphm> My take on SizzleMonkey’s question is that web pages are flexible in many ways, and respond to user behavior, and so on—none of which you can capture in a static, fixed image that yu’d get with Ps. If the Adobe tools want to keep up with web design, they’ll have to account for this in some way. Personally, I prefer designing in the browser now.
[21:42] <NuriaZuazo> @ralphm That’s a good point Image may be NSFW.
Clik here to view.
[21:42] <HAWK> So what would be your number 1 tip for a PS beginner NuriaZuazo?
[21:42] <SizzleMonkey> But if you desgin in the browser, and your client does not like it, you have to go recode
[21:42] <ralphm> Thanks Jerry. Because I don’t use Ps, Ai or the others much, $30 per month is too much for me.
[21:43] <johnlacey> The Adobe Photoshop twitter account just posted this image apparently a self-portrait created by a 14 year old: https://twitter.com/Photoshop/status/367763038973079552/photo/1
[21:43] <NuriaZuazo> @hawk for me? if you control your layers and your masks…. you’re half way there!
[21:43] <SizzleMonkey> or ar you working strictly in DW?
[21:43] <HAWK> Now THAT is incredible johnlacey
[21:43] <HAWK> Ah yes – I struggle with masks
[21:43] <Jerry> ralphm: If you use only one app, there is a much lower price for that
[21:44] <NuriaZuazo> @sizzlemonkey I rarely use DW (only sometimes). I use Vim or Notepad++. But if the structure is OK, then you don’t have to repeat your code… just to change the face (the look)
[21:44] <NuriaZuazo> And I would the mockup in Ps
[21:44] <SizzleMonkey> Ok….thank you
[21:45] <ralphm> There is a good article here about designing in the browser (sorry Nuria, this is a bit off topic!). http://24ways.org/2009/make-your-mockup-in-markup/ You still get to use Photoshop for images, of course, but you start with the content first, build up to wireframe, and add in visuals as you go. So it’s a different design process.
[21:45] <NuriaZuazo> It is a question of using the right images and colors
[21:45] <johnlacey> Supposedly you can run Photoshop CC and older versions concurrently on the same computer. So if all else fails I guess you could test out the Creative Cloud for a month and see if you thought it was worth it.
[21:45] <SizzleMonkey> Thank you ralphm
[21:46] <johnlacey> Oh and Adobe lets you use trial versions for a limited time. So that might be worth investigating too.
[21:46] <NuriaZuazo> @johlacey I would say that CC right now would be great for anyone that has CS3 and any other previous version… for CS4 and later version, it really depends on what you need
[21:46] <NuriaZuazo> But it is true, you can still keep your old version in your pc Image may be NSFW.
Clik here to view.
[21:46] <ralphm> I have always found the Adobe site really slow, also, so I fear that CC might be really slow and hard to access. How have others found it?
[21:46] <HAWK> We’re currently discussing Creative Cloud as a viable option
[21:46] <Jerry> johnlacey: That is correct, CC will coexist with older app versions. And you can try each CC app for free for 30 days (the free trials don’t have to be at the same time)
[21:47] <SizzleMonkey> Cc does not run on line
[21:47] <SizzleMonkey> it resides ON your computer
[21:47] <johnlacey> But you still have to download it. How big are those files I wonder… lol
[21:48] <ralphm> @SizzleMonkey—okay then, I’ve completely missed the point of it. I blame Adobe! Their site doesn’t explain it well enough.
[21:48] <SizzleMonkey> several gigs, so you would need a fast connection
[21:48] <Amjad> use StyleTile good for workflow
[21:48] <NuriaZuazo> @sizzlemonkey yes, it is installed in your computer but the updated are automatic and the version number does not “exist” anymore
[21:48] <Jerry> The files are big. Also, you have to have an Internet connection periodically for the license check to work. But this isn’t requried every time you use the apps
[21:49] <johnlacey> Like @Hawk, I’m not really adept with masking. What’s the most important thing a relative newbie should know about masks? NuriaZuazo
[21:50] <NuriaZuazo> johnlacey that’s a terrific question!
[21:51] <Jerry> NuriaZuazo: Have you used Lightroom yet? It’s between PS Elements and PS CC, but some of the functions seem much easier to use than in PS
[21:52] <NuriaZuazo> Masks allow you to apply effects, or paint, or do all kind of crazy stuff in part of the layer…. and then reverse the effect if you change your mind
[21:52] <NuriaZuazo> A maks is like the layer of the layer, if you know what I mean. It allows you to isolate (totally or partially) an area of the layer and work with that
[21:52] <ted> Hey! I have a question that might be totally unrelated to the whole discussion, but there’s no harm trying. How do you resize photoshop to a normal size on your main screen after having used it on a big-ass external monitor ? Still haven’t figured this out yet…
[21:53] <NuriaZuazo> @jerry Haven’t used Lightroom Image may be NSFW.
Clik here to view.
[21:54] <HAWK> Would you suggest that the best way to learn Photoshop is by doing a course, or by playing around – ie doing a whole lot of fun tutorials etc?
[21:54] <NuriaZuazo> @ted resize using the Image > image size menu?
[21:55] <SizzleMonkey> I find having a specific project for a client forces me to learn another aspect of photoshop….above and beyond tutorials…it gives me focus
[21:55] <Jerry> As a relative PS newbie, I’d say a class by all means. There are so many things you would never find on your own — and it’s easy to develop bad habits as well Image may be NSFW.
Clik here to view.
[21:56] <ralphm> I think ted means resizing the canvas (or whatever it’s called—the actual on-screen app).
[21:56] <HAWK> Yeah, that’s what I’ve found too Jerry – or I’ve done something the way I taught myself for years, only to see someone else do it WAY better another way
[21:56] <daisy> HAWK–very good question; I’m a total beginner trying to learn PS Elements…
[21:56] <NuriaZuazo> @hawk Practice makes you perfect so there will be never enough tutorials as Ps is really very rich application… but I would go for a course first. It can be frustrating if the information is not properly organizwed
[21:56] <NuriaZuazo> a course will provide structure and that will help your future learning
[21:56] <johnlacey> NuriaZuazo Do you have any recommendations on workflows with non-destructive editing techniques (like using adjustment layers, rather than adjusting an existing layer; using smart objects, etc.)?
[21:57] <Jerry> I started learning on my own, but didn’t know how inefficient I was until I watched a couple of the cL classes
[21:57] <HAWK> Yeah, that’s what I experienced as well
[21:57] <HAWK> Or when I did something in front of my bf and he laughed
[21:58] <HAWK> (we are talking Photoshop here)
[21:58] <SizzleMonkey> LOL
[21:58] <Jerry> Good thing you clarified that, Hawk Image may be NSFW.
Clik here to view.
[21:59] <NuriaZuazo> @ralphm, if it is just for adjusting the image to the screen size without chaing the real size of the image,double clicking the hand tool would do the trick
[22:00] <ralphm> Nice tip, Nuria. Will try that.
[22:00] <NuriaZuazo> @johnlacey Because you can do the same thing in so many different ways, I always apply non-destructive techniques.
[22:01] <NuriaZuazo> Do remember that not all filters work with smart objects though
[22:02] <HAWK> I find smart objects confusing
[22:02] <johnlacey> Ooh. I did not know that. NuriaZuazo
[22:02] <NuriaZuazo> Most of the regular filters do… but not all of them
[22:02] <SizzleMonkey> me too. Could we expound on that please?
[22:02] <johnlacey> I am actually doing an Adobe ‘Train The Trainer’ course right now. Just going to include a few links they gave me from that here.
[22:03] <HAWK> Awesome
[22:03] <NuriaZuazo> @hawk Smart objects can be confusing especially when someone is placing a Ps file in a layer as smart object.lol
[22:03] <johnlacey> Adobe Education Exchange http://edex.adobe.com/
[22:03] <johnlacey> AdobeTV http://tv.adobe.com/
[22:03] <johnlacey> Adobe For Academics http://www.adobeforacademics.com/
[22:03] <HAWK> Why would you do that NuriaZuazo?
[22:03] <johnlacey> Level Up For Photoshop http://success.adobe.com/microsites/levelup/index.html
[22:04] <NuriaZuazo> Basically, a smart object is an imported file inside PS. I keeps all the advanteges of the original format and the program where it was created but in Ps is just another layer
[22:04] <HAWK> So can you give me an example of when that would be useful?
[22:04] <SizzleMonkey> Can it be manipulated?
[22:04] <NuriaZuazo> so if I wanted to add some vector that I created in Ink or Illustrator and keep all its characteristics, I will import it as a smart object
[22:05] <NuriaZuazo> If I wanted to do a change in that particular shape, the shape would be edited in the original application that created, instead of using the vector tools that Ps have
[22:06] <HAWK> oh! got it
[22:06] <NuriaZuazo> So I keep the best of both worlds… all the power of Illustrator/Ink or whatever program… but I can apply all the bells and whistles that Ps can do
[22:07] <NuriaZuazo> @sizzleMonkey a smart object can be manipulated if you have the appropiate application… If you manipulated it in Ps, you’d be able to apply filters and masks and all that… but not able to edit
[22:07] <ralphm> Yes, that’s a great feature. Say you have layouts for a client in Ps, and then you need to edit the logo. Do it in the original logo file, and the Ps layout updates. Very cool. Image may be NSFW.
Clik here to view.
[22:08] <NuriaZuazo> Very often, raster images and mixed with vector shapes. Although the pen tool in Ps is great, Illustrator’s vector capabiliteis can’t be matched… so I’d rather work my vectors in Illustrator Image may be NSFW.
Clik here to view.
[22:09] <johnlacey> But then you have the dilemma… do you import the Vector into Photoshop, or the Raster into Illustrator. lol
[22:09] <NuriaZuazo> A especial case is when the smart object is really another PSD file. Why would anyone do that? One reason may be because the image can have 64 bits…
[22:10] <NuriaZuazo> Many filters will not work with a 64 bits image
[22:10] <NuriaZuazo> But if I import it as a smart object, those filters will work…. withouth forcing me to save the image as a 24 bit image (8 bit per channel)
[22:11] <johnlacey> This is a probably a bit of a tangent… but do any of you use graphics tablets? Could you recommend one? (I have an old, 10+ years, one… hoping to upgrade.)
[22:11] <NuriaZuazo> I will keep full info
[22:11] <NuriaZuazo> @johlacey that depends on the effects you want to apply… but since PS is much better than Illustrator creating effects… I would import the vector into Ps Image may be NSFW.
Clik here to view.
[22:11] <SizzleMonkey> I just got a new wacom intuos medium I loveit.
[22:12] <johnlacey> Nice SizzleMonkey
[22:12] <NuriaZuazo> @Johlacey I use an Intuos 3 and love it! working with a graphic tablet makes your life so much easier… and you work faster too. It gives you more precission
[22:13] <NuriaZuazo> Wacom is, in my opinion, the best company for graphic tablets
[22:13] <SizzleMonkey> a tablet really helps your workflow in my opinion
[22:14] <SizzleMonkey> I would avree
[22:14] <SizzleMonkey> agree
[22:14] <HAWK> How so?
[22:15] <NuriaZuazo> SizzleMonkey I agree with you. Also a graphic tablet provides another extra… you can take advantage of the pen pressure to control the flow of “ink”
[22:15] <johnlacey> Okay cool. I must admit the one I have is an old entry-level Wacom. And it is great. But it doesn’t offer a lot of pressure control etc.
[22:15] <NuriaZuazo> or the size of the brush
[22:15] <SizzleMonkey> Less switching of options for tools is one
[22:15] <NuriaZuazo> and things like that
[22:15] <SizzleMonkey> changing brush size is another
[22:15] <HAWK> right
[22:15] <ralphm> It’s more intuitive to use a pen than a mouse, and the pens have all sorts of useful functions that a mouse lacks … including light and heavy pressure.
[22:15] <HAWK> sure
[22:15] <SizzleMonkey> the new intuos has a center ring with assignable featurs…
[22:16] <NuriaZuazo> brushes don’t work the same when you use a tablet… they have even more options Image may be NSFW.
Clik here to view.
[22:16] <johnlacey> And I’m sure you’ll get more of a ‘human’ feel with a pen than you might with a mouse.
[22:16] <HAWK> Do any of you lurkers have a question? Image may be NSFW.
Clik here to view.
[22:16] <SizzleMonkey> also easier to control a pen I think…important for fine detail
[22:17] <johnlacey> I am particularly conscious of this at the moment because my mouse is dying. lol
[22:17] <NuriaZuazo> @johlacey even a Bamboo would do… what I like of my Intuos 3 is the size… it is A4 and that’s what I like. Bigger tablets take too much room… smaller tablets provide less control that an A4 size
[22:18] <SizzleMonkey> for the extra $150 the intuous has way more features….
[22:18] <NuriaZuazo> There’s an artist that paints using the mouse though… I love his work but I often think… are you crazy?
[22:19] <johnlacey> Back in 1999 I used to draw and colour little comics in Photoshop with a mouse. I didn’t really think about it the time but I don’t think I’d want to do it again in that same way.
[22:19] <HAWK> 10 mins left in the session people
[22:19] <NuriaZuazo> He’s style is kind of manga as he works in the gaming world ( and he’s Asian) but it can show you what you can do with PS and patience Image may be NSFW.
Clik here to view.
[22:19] <Katie> no questions, really, just enjoying the tips!
[22:20] <HAWK> That’s all good Image may be NSFW.
Clik here to view.
[22:20] <ralphm> @johnlacey—I know a graphic designer who never uses a mouse at all, just a small tablet.
[22:20] <NuriaZuazo> so if you’re curious… his name is Mario Wibisono http://mariowibisono.deviantart.com/
[22:20] <HAWK> On that note, any more tips NuriaZuazo?
[22:20] <HAWK> I know it’s hard without sharing your screen
[22:20] <HAWK> This topic is a bit of an experiment in this forum
[22:21] <NuriaZuazo> @hawk it would be fun to share the screen and do an exercise where people could tell me how to proceed… that would be crazy Image may be NSFW.
Clik here to view. and so much fun
[22:21] <SizzleMonkey> Perhaps go to meeting would be a better platform
[22:21] <NuriaZuazo> As for tips: Understand layers and masks firsts… then jump to blend modes
[22:22] <NuriaZuazo> Those three things by themselves will allow you to do great things
[22:22] <ralphm> HAWK, you’ve included a code panel here … so when is the interactive video coming??!!
[22:22] <SizzleMonkey> think layers, tools, options
[22:22] <NuriaZuazo> Then, practice selections, selections, selections
[22:23] <NuriaZuazo> Selections are probably the most important task we all do… and there are so many tools at your hands! You need to know what works best for you
[22:23] <johnlacey> I think my favourite thing about Photoshop is the Quick Selection Tool. I used to use GIMP for a lot of stuff but after discovering the Quick Selection Tool there was no going back. lol
[22:24] <HAWK> Yeah, I’m getting better at selections slowly. There was an awesome post about it on DesignFestival some time last year
[22:24] <NuriaZuazo> Sometimes there is not a best tool to do a selection… just a tool that you prefer to do that particular selection…
[22:24] <NuriaZuazo> For those who have CS5 and CS6, the perfect border tool has been improved so much! You really don’t miss the Extract Background filter! Image may be NSFW.
Clik here to view.
[22:25] <SizzleMonkey> perfect border tool?
[22:25] <SizzleMonkey> expound please
[22:26] <NuriaZuazo> I’ll try to do my best. A professional selection is hard to do… or it was…. most of us would use our fav selection tool and simply do it
[22:26] <NuriaZuazo> but of course pixels are pixels… so more often than not, borders had to be smoothed
[22:27] <NuriaZuazo> so the transition wouldn’t be so hard
[22:27] <NuriaZuazo> Since… well, I can’t remember when…. I think CS2 at least
[22:28] <HAWK> Last few minutes. Any last questions?
[22:28] <NuriaZuazo> there was an option that many people ignored or didn’t use… That was a tool to improve the border of your selection so details where not lost but transitions were smooth
[22:28] <NuriaZuazo> That was under the Selection Menu
[22:28] <SizzleMonkey> It no longer exists?
[22:29] <SizzleMonkey> I have not heard of it
[22:29] <NuriaZuazo> in CS4, CS5 and CS6 (and of course CC), every single selection tool has that option as a button
[22:29] <SizzleMonkey> I shall look more closely….
[22:30] <NuriaZuazo> So if you use the magic wand, in the control panel with all the options of that tool, you’ll see a tool to make that border perfect
[22:30] <NuriaZuazo> That options is really important. Your selections will be more professional if you learn to use it properly
[22:30] <SizzleMonkey> ok. Image may be NSFW.
Clik here to view.
[22:30] <HAWK> And… just like that the hour is over
[22:31] <NuriaZuazo> I do confess that I don’t know if it is called “perfect border” in English… This is a translation of my Spanish PS
[22:31] <SizzleMonkey> Thanks everyone
Clik here to view.