I feel like I’m really getting confident with Photoshop since completing this last training course. It’s surprising how much you need to know even to knock out something as simple as this. I suppose if you do know Photoshop then it’s worth the effort to produce a quality mock up!
Check out my cheesy mockup, it uses an embedded smart object for the picture, layer styles all over the place, a ‘subtle pattern’ in the background and is based on the static 960 grid template 😉
Photoshop has a slice tool so you can export parts as images ( or use layer based auto generating in fact) The idea is that you keep the parts that can’t be done in HTML and CSS as images.
In the course he shows how you can use the Layer Comps. feature to mock up the different pages and switch between them.
This work flow process is not ideal when designing responsive sites that change with the screen width. I believe Adobe have various other products to assist with this though if you have the $$$ I guess.
The internet is a great resource for learning of course, however I’ve stumbled across a couple of particularly amazing courses recently. Online training is still getting better and better but it requires effort to locate the best stuff from the best instructors.
Firstly, I discovered ‘Creative Live’ where I did a course on Logic Pro. It’s *3 days* long and was filmed in front of a live studio and web audience ( hence the name of the site DOH ).( Did I mention before how totally awesome Logic Pro is ? ) The element of liveness, really creates a sense of occasion and brings the material to life. For me it kind of harks back the fun days of classroom based training !It’s called an intro course, however providing an intro. to Logic Pro is never going to be a trivial affair.
I’ve also found a great course from Infinite Skills on Photoshop. In my quest to become a PS guru I’ve read a few books and sat through a fair few YouTube ‘tutorials’ . Andy Anderson seems to be able to teach PS with his brain in neutral though, rattling off 18 hours of Photoshop goodness, all whilst not putting you to sleep. This guy says he once taught an entire University course on Blending modes in Photoshop… ! Amazingly you also get a whopping great 400Mb of sample files to ‘play along’ with. Time for that Hardrive upgrade perhaps !
I think you can become seriously dangerous as a Web Developer once you get the hang of using Emmet and Bootstrap !
Check out this practice demo that I did, the general idea with bootstrap seems to be ‘look at the examples and modify as required’, although you can look into the CSS to see what the helper classes do.
Simon’s Bootstrap Site