I've just read a 37signals article "Why we skip Photoshop". It argues for the idea of designing sites in HTML/CSS right away skipping the "static mockup" phase. This reminded me of a thought I get every time I see some products, articles, demonstrations, etc. aiming at separating presentation from business logic.

In a typical small size web development projects there are 3 main roles of (implementation) participants:

1. Designer
2. HTML/CSS coder
3. Business logic coder

Now the 37signals article assumes that "Designer" and "HTML/CSS coder" are either one and the same person or at least inseparable pair. In my world (In small-to-medium web projects that I worked on during the last 10 years) I've seen projects where:

• each role was performed by different person (or a group)
• "HTML/CSS coder" and "Business logic coder" were the same person (or group)
• all 3 roles were performed by a single person

But I have never worked on a project where "Designer" and "HTML/CSS coder" were combined into one role and business logic coder was someone else.

Am I living in a different world? Probably. Cause you can see this tendency in tools too. In Microsoft's demos you can often see a pattern where developer works in one tool - "Visual Studio", and graphic design/HTML/CSS/XAML is done in another (single) suite - "Expression Studio". From my perspective this leaves only 2 major roles - presentation specialist and business logic developer. I think this is wrong. I've seen many good graphic designers who had basic knowledge how web works but had no idea about HTML or at least didn't waste their time learning quirks in CSS implementation in different browsers.

Probably for large corporations this is not an issue but if you take a small company with 3 technical employees (designer, html coder and developer) you can't get separate graphics tools for designer and HTML coder. You end up buying 2 copies of Photoshop or Fireworks or Expression Studio or whatever when designer only needs creative tools and HTML coder needs technical tools for cutting parts of the design according to his implementation.

Why do I have to get a Photoshop behemoth only to be able to cut (without compromises) what my designer has done in it? I want ImageReady separated back into a standalone product. But there's probably something wrong with me cause this seems to be a global trend.

Am I old fashioned or just crazy? What is your process?

It's time for some bitching and whining.

Some time ago I had a meeting with potential client who has ordered site design from a well known local ad agency and wanted my company to program the eshop. He showed me printed mockups of the site which were quite nice visually.

Later, as we talked further, he emailed me the same mockups in jpeg. I've noticed that content part of the site (a static width design) was 1300+ pixels wide. I informed the client that this is way too wide for a site and asked to make the design fit into 960 pixels. A couple of weeks later I've received new mockups where all that was done was the whole design proportionally resized to fit into 960 pixels.

When I pointed out that in some elements font sizes became unacceptably small (one button had text on it with 4px high font!) I got a few emails from the ad agency's project manager and then a call from a higher executive who in quite arrogant way tried to convince me that I can't make these judgements from JPG mockups but I have to get their magnificent CorelDraw file and everything will be fine. To my note that 4 pixels is 4 pixels and it's not enough for the text to be readable no matter how crisp it is, he responded with typical print designer gibberish talking about centimeters, 72 DPI, 150 DPI and other crap that has totally no relevance in web/screen design. He also noted that client has signed out on the design when they demonstrated it to him in their office (most likely on a shiny Apple's 30" screen with 500% zoom). I understood that I have no chance to convince these people to admit that they know nothing about web (after all they are well known ad agency!) and listen to my free advice. So I decided just to make a mockup web site with the design and show it to the client so he sees it in "field" conditions. We'll see how it goes.

After the conversation I was curious to find the origin of the 72 DPI tale so I googled it and found a perfect article - "Say No to 72 dpi" - which should be mandatory to every print designer before he or she is allowed to do anything for the web or screen. I suggest you read it even if you have a good idea what pixel is. It's hilarious. And definitely bookmark it so you can send it if you ever have a conversation like mine. After all since the web is total mainstream these days more and more people start designing web sites and print designers are leading the pack since the already know everything about design. And definitely more than those arrogant programmers!

Bonus design tip: Did you know that you can change black-gray-white-greenish site template to black-gray-white-bluish by simply swapping B and G values in RGB colors? :) This is what I did to convert the theme of my personal blog to this one.

Note: I'm not an experienced Photoshop user. I know next to nothing about Photoshop but I was presented with a task and this is how I solved it. There could be easier, faster and/or better solutions but this one worked for me.

The problem

There's no "single click" solution to create rounded corners for your photo (or some other image) in Photoshop. There are several ways to achieve this effect with "rounded rectangle" method being probably most popular. At least it is the most popular in Google search for "photoshop rounded corners". In short: you just draw a path using rounded rectangle tool, make selection out of it, inverse the selection and delete what's left.

This is all fine when you need to do it once. But what if you need to do it multiple times on images of various orientations and sizes? You can create a simple "Action" to repeat these simple steps but you will be stuck with a fixed size.

The solution

In short: my solution was to deal with one corner at a time, rotate the canvas and work with the same corner which is now actually not the same corner and so on.

Here are the "Action" steps in detail:

This is our original image

1. Open your image and select "Rounded Rectangle Tool"

2. Select "Paths" as drawing method

3. We select a desired rounding radius - 10px in our case. Now we want to work with only one corner so we have to make the rectangle larger than the image. And since we are recording an "Action" we need to make it fixed size. I made it 5000x5000px (picture shows "cm" but that's too much and I was too lazy to make another screenshot)

4. We place our rounded rectangle by the top left corner of our image

5. In the Paths palette select "Make Selection..."

6. In "Make Selection" dialog leave the defaults (unless you want something else) and click OK

7. Inverse the selection and we have our rounded corner selected. Now just delete the selected contents

8. Now we rotate the canvas by 90 degrees in your preferred direction

9. Repeat steps 4-8 three more times and you are done. Here's the result

Download

Here's the "Action" to automatically create 10 pixel rounded corners for images of any dimensions and forms (up to 5000x5000px). Download rounded.zip (0.5kb)