Image editors and front end code have a rocky relationship at times. What’s easy to do in one can be difficult to do in the other. For years designers have created mockups for websites in programs like Photoshop only to have developers tell them parts of the design either weren’t possible or would take too long to code.
About 41 minutes into the most recent episode of Shop Talk Show, Chris and Dave were asked the following question.
Should you limit your creativity in Photoshop according to the abilities of HTML and CSS?
The question above comes from someone who wants to go all out creatively in Photoshop, but assumes he won’t be able to make it all work in code and wonders if he should limit himself creatively in Photoshop.
It’s a question that appears often in different forms. It usually amounts to does X limit creativity. Sometimes it’s a tool that’s questioned, Sometimes it’s part of the process. Sometimes it’s the end product itself.
I understand why these questions get asked. Unfortunately I think it’s the wrong way of thinking about what’s going on. It’s not that one thing limits the other. It’s that each comes with its own strengths and weaknesses. Each has its own set of constraints that you have to work within.
All mediums have different strengths and weaknesses. Consider print and the web. Print starts with a fixed canvas. The web doesn’t. A strength of print is the positional precision with which you can place things on the page. That’s a weakness of the web. On the other hand the flexibility of the web is something print can’t match.
You can still communicate the same concepts and information whether print or the web is your medium. You simply have to go about it a little differently in each. Your creativity isn’t limited. It just takes a different form.
From the moment you start defining the problem you’re adding constraints to the possible solutions. The choice of medium is one of them. As soon as you choose to put something online you’ve added all the constraints that come with designing for a canvas of unknown size. Your solution will be bound by these constraints.
The tools you use affect the way in which you express your creativity, but they don’t make you more or less creative
Existing code to produce web pages and websites is one of those constraints. There are all sorts of things that current coding practice doesn’t make easy. Equal height columns, for example, can be a challenge to implement. That doesn’t mean you can’t create a design with equal height columns. It does mean you should understand the challenges and decide if they’re worth whatever you get visually from having columns of equal height.
The code isn’t limiting what you do in an image editor. It’s informing your decisions. There’s absolutely nothing you can do in a graphics editor that can’t be turned into a web page. At the very minimum your image can be placed directly inside the html. That wouldn’t be a good web page, but it would be a web page.
You want to understand the strengths and weaknesses of the medium that will hold your final product. Not so it limits your creativity, but so you can make more informed creative decisions.
The tools we use also have strengths and weaknesses. Photoshop is great for working with bitmapped images. Illustrator is a better choice when working with vectors. Many prefer Fireworks for creating design comps.
Each can better help you do certain things and each makes certain things more difficult. No one ever seems questions whether any of them limit creativity for some reason.
The tools you use don’t define how creative you can or can’t be. They affect the way in which you express your creativity, but they don’t make you more or less creative. Is a guitar a more creative tool than a paintbrush? Will you be more creative if you’re shaping a piece of clay or moving a mouse around a computer screen? That depends much more on you than the tool itself.
Your ability working with a tool or working in a particular medium also come into play. Personally I don’t find Photoshop a good tool to express my creativity. Not because Photoshop doesn’t allow creativity, but rather because my own skills using it don’t allow me to express the ideas I want to express.
There are many things I can visually show in less than a minute with a couple of lines of code. Those same things could take me close to an hour to express in Photoshop and they probably won’t look quite as I intended. Again it’s nothing to do with Photoshop or the code. It’s to do with me and my skills using each.
The more skill you have working with any tool, any medium, or any part of the process from design problem to design solution, the more creative you can be working with them. Not because any of those things are inherently better for creativity, but because you know how to express yourself better using them.
If you think you have to limit your creativity in Photoshop because of what html and css are capable of doing, what you really need to do is get better working with code. If for you the limiting factor in the process not being able to control every px in a flexible canvas then learn more about what you can do with the flexibility and what you can and can’t control.
Most of the things we work with don’t limit our creativity. Our ability to work with them and express ourselves with them does. Did you know you an ordinary piece of paper and a sewing needle could be used to create a record player embedded in a wedding invitation? Neither did Kelli Anderson, but she and her friends had an idea and they figured out how to make it work. There’s nothing stopping you from doing the same thing in Photoshop. Create what you want in it and see if you can figure out how to make it work in code.
Ultimately the answer to the question isn’t about limiting what you do in Photoshop based on what code allows. It’s understanding as much as you can about everything your creativity goes through. It’s about understanding the medium, your tools, and your skills with each. The more you know about any of them, the more you’ll be able to express your creativity with them.
Download a free sample from my book, Design Fundamentals.