I’ve written before about Girl Develop It (the organization is one of my top suggestions for women who are interested in learning web skills), but this last week I taught my first “real” class for the local chapter and also led my second Project Day.
In this post, I’ll share some materials and resources from the two clsases in case they’re helpful for the class attendees and others more generally.
Photoshop for Web Design
Thursday night, I taught my first official class through Girl Develop It, a class I designed myself on Photoshop for web design. Here we are in the very nice room Zivtech kindly provided for us:
The class came about after the first project day I did, where we discovered that the PSD-to-code leap is a mysterious one for many people, and one that isn’t explicitly covered in the courses GDI already offers on a regular basis. The Photoshop class was our effort to remedy that, and I’d say it was somewhat successful and somewhat not, but certainly was a learning experience for me about how to best support people in learning that part of the web workflow.
All of the slides for the workshop are available on GitHub, or you can download a PDF version. If you’re interested in the GitHub version but not familiar with the format, all you need to do to view the slideshow is download the zip file and then open the index.html file in your browser.
We covered a range of topics in what ended up being a primarily lecture-based class, including:
- Setting up Photoshop for web work (units, tools, workspaces)
- Tips and tricks for pixel-perfection (grids, guides, smart guides, clipping masks)
- Working with and organizing layers and layer groups
- Slicing images and saving for web, including file type considerations
While I think most students found the class helpful and learned a good amount, two main suggestions or areas for improvement came out of the class, both of which I really agree with:
- We should split the class into a “total beginners” version, for people who are completely new to Photoshop, and an “intermediate” version for people who have some familiarity with the program
- There needs to be more practice time with short exercises built in, and less lecture
I will definitely need to do some research into the second item, as I’m having some difficulty coming up with ideas for useful quick practice exercises and I think it may mean creating some test/ practice files and finding some guinea pigs to try them with (let me know in the comments if you’re interested in such things).
So that’s the story on our first foray into Photoshop for Web design!
Resources Related to Photoshop for Web
- Photoshop Etiquette guide to organizing your files (and much more)
- Comprehensive Guide to Saving Images for Web from SixRevisions
- My screencast on strategies and techniques for slicing PSDs
- My post on the basics of prepping images for the web
- Stop the Save For Web Color Shift
- Photoshop vs Designing in Browser
- Photoshop Grid Systems
PSD to HTML Project Day
In contrast to the Photoshop class, Project Day is a more workshop-focused program where we bring together a small number of students with a relatively high number of helpers and work on an actual sample project. It’s meant as a sort of guided practice opportunity to reinforce the skills taught in the basic HTML and CSS classes (and may eventually be offered for other topics as well, such as WordPress).
In Saturday’s workshop, we worked on this website, which is a made-up site based on a real business, Occasionette here in Philadelphia:
We did Project Day once before but it didn’t quite fit the workshop-focus we wanted that time around (too much time on Photoshop, not enough work time for coding practice), so this time I made sure that the site we worked on addressed a wide range of HTML and CSS techniques without being overly complex, and I also made sure to provide resources that would reduce the time spent in Photoshop and maximize time spent coding.
I’d say that thing that everybody got the most actual practice in was identifying small errors and fixing them. While that sounds like a negative thing, I actually think it’s the most useful thing to take away from a workshop like this, since it allows participants to go home and keep working while troubleshooting independently. It’s also not to say that lots of correct, functional code didn’t get written – it certainly did, and all the ladies in attendance actually got as far or further with their code than I expected.
It’d just that even the “pros” are constantly making small errors in syntax (those damn semi-colons), or running into small bugs in their code and having to troubleshoot them. Speed in writing code comes with practice, but quality comes with continually building technique and with learning to find and correct bugs, and I feel confident that the workshop helped in both those areas.
Resources Related to Project Day
- Since I think it’s silly to start from total scratch, here are some HTML Layout Frameworks from Foundation/ Zurb
- CSS Resets are also a great starting tool: CSS Reset from Eric Meyer, or perhaps a better option, Normalize.css (thanks, Stephen for the Normalize suggestion)
- HTML Dog has a weird name but is a great HTML/ CSS reference
As a final set of resources, we talked a bit at the end of Project Day about other resources for PSDs for practicing these skills. I did some Google research and came up with a few different options that aren’t too terrible ugly – click through to check them out and jump over to the various download pages.