Designing in the browser is cool and all, but starting in Photoshop keeps me at my most creative when I need it the most: when facing the blank canvas. One way to fight against the painful glare of a white canvas is to toss down some texture. We do that here by picking a nice one off Subtle Patterns (they now ship in a @2x version for retina displays, nice!). We take this pattern and make a Photoshop pattern out of it and fill the whole background with it, getting rid of that intimidating whiteness.
The “Big Orange Square” was a fundamental exploration to this entire redesign. We plop it down on the canvas and go from there. We establish the branding in the header that lasts through the rest of the entire process.
I cant download this file
Could you be more specific and report the problem here: https://css-tricks.com/contact/ (I just tested the link above that said “Download Video File” and it works for me).
One issue may be that the page was left open too long. The links generated here expire after a short amount of time, so you may wish to refresh the page before trying.
Subtle Paterrns, very good resource that i didn’t know about.
Already knew about Subtle Patterns but never got to use it. It’s nice to see your way of introducing it in the design process. Also it’s nice to know about the @2x versions available.
Once again amazing Chris.
Loved this screencast. It really brought out your quirky humour. I also did not know about this texture site and was thinking about how I could possibly create a bit more interest in a site I’m building. I’ll definitely be checking that out.
Love Subtle Patterns, I use them all the time with my projects. Love the videos so far Chris! Nice to see the process that you go through to create a site like this.
Love the way you mocked up the site, I work the same way, simple shapes can really get the ideas flowing.
Great stuff. I usually start designing right in the browser, but this is inspiring me take the photoshop approach.
great stuff. Just out of interest, do you come up which designs just by playing on photoshop (and online inspiration) or does pen and paper scribbling have anything to do in your work flow.
Also (more important) your main wrapper is 80%, is something like max-width: 980px (and from there down, be responsive) still good (enough) or basically a responsive design must not have a limited container … hope you know what Im trying to say :)
Looks like Subtle Patterns went down earlier today. I’m loving this series though. This kind of screen-cast-style learning is a gem mine for people learning web dev like myself.
Loving the videos – kudos Chris? What happened to subtlepatterns.com?- It is still down today too. You can get png of all the patterns on Github – http://github.com/subtlepatterns/SubtlePatterns
Looks like their domain was stolen [just like this site’s was](https://css-tricks.com/this-sites-domain-is-stolen/) once. Bummer! I’ll be doing all I can to help them get it back.
I use Subtle Patterns a ton also, especially for responsive/mobile sites. I like that subtle little bit of texture that can really make a mobile site look polished on a handheld device.
I’ve tried doing the designing in the browser thing too, but I find it’s much easier for me to work in Photoshop also. Using a plugin like GuideGuide, I build out a grid, create layers for elements, and it’s just much easier to be more creative with positioning and design.
I’ve been trying to figure out how to detach the panels so they aren’t all inside a larger window (like it is in the video). Is this not possible in Windows Photoshop, or have I just been googling the wrong thing?
Hey Chris, doesn’t Subtle Patterns require attribution via link to the site? I’m wanting to use them for my client sites, but it’s not really feasible to put a link.