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.