Seriously: Just Build Applications and Interfaces that Work

Adobe Logo

Adobe Logo
The problem

So here I sit with a wonderful copy of CS4 running on my machine. I would love to scan something into my lovely version of Photoshop but unfortunately I can’t. Why is it, you ask, that I can’t scan something directly into Photoshop CS4? Well it seems that there is no official TWAIN support for 64bit in Windows so Adobe didn’t include it. I’ve never had trouble with TWAIN on my Mac so why should I install the plugin manually?

The Rant

Here’s the thing, I don’t care if there is no official support. I just spent hundreds (thousands if you bought a full CS4 package) on a piece of software and it doesn’t work. I don’t care about the reason I just want to be able to scan things directly into Photoshop. It worked in CS3 it should work now too. If there is no official support then write unofficial support for it. For the Mac have an extra check box that includes it by choice. Don’t make us dig through a disc image and manually install it.

This also made me think of Linux and Ubuntu and how I don’t care about their partially ‘holier than thou’ attitude towards flash and non-open technologies. Until Ubuntu just works with the web out of the box no one but nerds (I use it. I am a nerd) is going to use it.

My wife doesn’t care about some philosophical argument on how things should be open. She wants to get a new computer go to YouTube and watch a flash video. Sure she may have to update a plugin, but enable ‘restricted extras’, nope she might as well just toss the machine out.

Again we can relate this to the favourite philosophical argument of the web designer, dealing with IE 6. As I wrote a few weeks back, clients don’t care about the philosophical arguments. They want their site to work for their clients. So lets cut the crap and if the user base justifies it, support IE 6.

The Appeal

So here is my appeal to software companies, and web designers. I don’t want to hear the whiny crap about why things don’t work. I just want it to work. It’s not a big request to scan things into Photoshop. It’s not an out of touch request to want to watch flash videos without extra work. We’re not crazy for wanting to support the browsers our clients use. So do what’s right for your users and leave the crap for some other bad company.

The Resolution

This also means that as a web designer I need to cut the crap. Interfaces should make sense. You should look at it and it should work. We shouldn’t build craptacular philosophical arguments to justify bad interfaces. Things should be designed to make sense so just do it. The competition is only a click away.

Interesting Links: CSS trickery

CSS Image Trickery

Both of these articles come from the newest addition to my RSS feeds sohtanaka.com. First off is an article on adding effects to images with some CSS and HTML. Pretty neat and shows much of what you can do without encasing the entire effect in an image.

The second article from sohtanaka.com deals with a double repeating background image on a header. Another very good piece of CSS and image trickery to achieve a specific effect.

Photoshop Texture Brushes

A pretty cool set of Free Photoshop brushes is available from a friend over at Design by Firgs. Free to use but don’t distribute or sell them yourself.

Staying in Sync

Many designer use gmail and I also use Google Calendar cause I can sync it everywhere. Now google just released a cool tool to make syncing gcal and ical easier. Wish I had this last week when I synced up my gcal at work and my freelance and my mobile and my PC at home. Ah well the work is done.

Bring on the New: CS4 is out

A few weeks ago Adobe announced that Sept. 23 was the release day for CS4. Well today was the big day in the design industry…Adobe announced and is shipping CS4 starting now. I had opportunity to watch the live showing off of some of the new features of CS4 and wow. I answered my own question from a few weeks ago with a resounding yes. I’ll have to check the graphics card on my PC but I will own CS4 in a few weeks.

Lets take a tour of some of the new features. The one that really gets me is the content aware scaling of photos. You have to see it to really get the idea of what this is capable of for designers. Imaging having a picture that is landscape orientation for a magazine and strecthing it to portrait without affecting the quality of the image in the areas that really matter. Photoshop CS4 also improves greatly on the dodge and burn tools, it now protects the highlights and shadows as you use the tools. Effectively this takes some of the responsibility off the designer while dodging and burning photos and puts it on photoshop to only effect the correct areas. One of the final big things for Photoshop is the use of the GPU for rendering photos. By leveraging the power in the GPU Photoshop is able to zoom smoothly in and out of photos as well as render objects crisply at odd zoom number (33.3%). This should also make better use of your system resources and allow 32bit systems that can’t have huge amounts of RAM run the apps with less of a slow down if they upgrade their video card.

I am a web designer so I am most excited about Dreamweaver CS4. I have been using it since they released a preview version a few months back. I have used is as my only editor (reluctantly switching

Dreamweaver CS4 Interface
Dreamweaver CS4 Interface

back to CS3 now) and have had no stability problems. The interface is beautiful and easy to work in. Now the design view uses webkit as a rendering engine so what you see in the design view should render like it does in Safari and Chrome. Remember though this is still no substitute for actually checking your code in native installs of the browser.

Dreamweaver also comes bundled now with the .air plugin for application development. This really excites me as I move forward with my own plans for a .air app.

Code hinting now works for AJAX and JavaScript and the design view has support for Photoshop smart objects.

Another thing I am super excited about is the fact that Fireworks is now being bundled in the Design Premium version of CS4. I used to have to do without Fireworks because I do some print work and need InDesign. Well no more I can have my cake and eat it too. For those not familiar with Fireworks it allows you to draw both pixel and vector based objects. You can create hotspots on pages and essentially build yourself a working prototype of a site with no coding. Clients can see the site and critique it while your still working in a drawing program. Very cool. There is a great video on Adobe TV using Fireworks to prototype an .air app.

There are so many more things that are cool about the new CS4 release. To finish off here are some links to videos and other cool things in CS4

Making Brushes in Adobe Photoshop CS3

I started this tutorial with the intent of making some woodgrain brushes. The tree image I picked to work on yeilded better grunge brushes though so that is what we will look at today but stay tuned for some free wood grain brushes later this week.

Also remember to save your work regularly. I had Photoshop crash on my part way through writing this and lost a bunch of work. Don’t be stupid like me.

Today we will look at building some grunge brushes in Photoshop CS3. You can download the source picture and all of the brushes I created from here. It’s a big file with print quality brushes and fairly high rez photos. If you want to add these brushes to an existing set see the end for an explanation of how to do that. Also see the bottom for the licensing.

For things that naturally exist I like to start with some source pictures so for wood I obviously took pictures of wooden objects around my house. When taking thebpictures you want to make sure that you are getting as much detail as possible, so don’t be afraid to play with macro modes or different angles to get more contrast. For objects that are not shiny (like stucco which is useful in developing grunge brushes) using a flash to bring out more contrast can yield some amazing results.

Today we will start with a picture of a tree outside my house. Which can be found in the download at the beginning of the tutorial.

The first thing I do is to duplicate the layer and save it out as a native photoshop file so that I no matter what I do I have a copy of the original. Brushes in photoshop are based on gray scale. If a part of a brush is totally black then it will paint with 100% of the colour you have selected. If it is totally white then it will not paint anything at all. This also follows that any percentages of black will be percentages of the colour that you selected.

With that in mind we will start by using an adjustment layer with the black and white adjustment layer.

Black and White Adjustment layer
Black and White Adjustment layer

What we  are looking for now is a high degree of contrast. I just play around with the sliders till I get something that starts to look cool. Depending on your picture some sliders will have no effect on the image. You can see below the settings that I used on this picture.

Black and White Adjustment Layer Settings
Black and White Adjustment Layer Settings

With our adjustment layer in place select the image again and lets adjust the levels. This is found under Image/Adjustments/Levels (CRTL + L or Command + L). Again what we are looking for is a high degree of contrast between black and white. I just play with the sliders till I see what I want but look below to see the settings that I used for this particular picture.

Level's Settings
Level's Settings

Now we have the basis for a good brush or really many brushes. Before we can continue we need to select the adjustment layer and the tree and convert them into a smart object. This will allow us to come back and adjust the image later if we want. If you are in an earlier version of Photoshop that doesn’t support smart objects just merge the layers. There are a number of cool spots in this tree so I will make some selections with the marquee tool and layer them via copy (accessed with a right click or control click over the selection). I generally like to make a new group and put each brush in the group just to keep things organized. Try to keep your selections roughly square if possible as we will be making square brushes later. To constrain proportions hold the shift key while making the selection. The exact size isn’t as crucial as we will use Illustrator to vectorize the images in a second so we can make all of them the maximum of 2500px x 2500px at 300ppi. So layer away till you feel you have all of the parts you want. Also don’t forget to select the main layer of the image after each new ‘layer via copy’ action. Don’t forget that you can also turn off the main layer to see which parts have been used or not used for brushes.

Preview of Layers Panel
Preview of Layers Panel

Now we need to open Adobe Illustrator so we can make the brushes the maximum Photoshop size. In Illustrator just make a basic print document size is irrelevant.

New Adobe Illustrator Document
New Adobe Illustrator Document

Now we need to go back into photoshop and use the move tool (V) to drag a layer into Illustrator. Just do one layer at a time. To do this select a layer and select the move tool. Once you start moving the layer you can press ALT + TAB on PC (Command + Tab on Mac) to switch between applications and let go of the layer in Illustrator.

With the new object in Illustrator selected to to the Object menu and down to Live Trace/Tracing Options. Check the preview box so that we can see what is happening with the tracing. For my image I just used the stock settings but don’t be afraid to play with them till you have something you like. I always check off the ‘ignore white’ box as well because I feel it gives me a better idea of what the brush will look like in the end. Try it without if you want and let me know what happens or just keep along with us. You can see the stock settings I used below. Commit the tracing by clicking on the trace button.

Live Trace Options
Live Trace Options

Now lets copy the object in Illustrator which can be done with a key command (CTRL + C in windows or COMMAND + C in Mac) or can be accessed from the edit menu. Once we move back to Photoshop we need to create a new document. It should be 2500px X 2500px at 300ppi so that we are building a brush for the maximum size available in Photoshop. If you are planning on making brushes often as I do then I would save this document set up at a preset to save time over the long haul.

New Photoshop Document Preset
New Photoshop Document Preset

When you go to paste the object into Photoshop make sure you choose to paste it as a smart object. Use the handles on the corners of the object to stretch it to the full size of the new document. Now we are almost there. At this point if you are happy with the brush then we would continue. If you don’t like it then you can ‘paint’ on it with other brushes till you get what you are looking for. Remember that you need to paint in black to add to the brush and white to subtract from it. I like what I have so I will get ready to save it as a brush.

Before we can save a brush we need to make sure that it will be in the group we want. I have lots of grunge brushes already so if I was just doing this for myself I would go to the brush panel and select the grunge brushes I wanted to add to.

If you are starting a new brush ‘group’ then we need to clear the brush panel first. You do this by going to the edit menu and selecting the ‘preset manager.’ Once in the present manager select the first brush and then hold shift while clicking on the last brush. Now we are going to click on the delete button. Don’t worry we are not deleting these brushes from our system just from the brush panel

Once you are happy with the brush you need to save it. We do this by going to Edit/Define Brush Preset. Now Photoshop is going to ask you for a name for the brush. I’m not entirely sure why it does this. I can’t recall ever seeing the name of a brush again. If anyone know please let me know. I just save the brush out and don’t worry about it.

Once you have saved a new brush to the brush panel you need to save the brushes or you will loose them (I learned this the hard way months ago). To do this go to the fly out menu and click ‘Save Brushes’.

save your Photoshop brushes
save your Photoshop brushes

If you want Photoshop to automatically load the brushes each time you open it then you need to save them in the correct spot. On a PC you find it at C:/Program Files/Adobe/Photoshop/Presets/Brushes. On a Mac you find it at Applications/Photoshop/Presets/Brushes. I have slighly simplified the paths as ‘Photosop’ will usually include the exact version you are using and sometimes the name ‘Adobe’ infront. So that’s about it. If you make some more brushes pleaes provide links for the rest of us to download and use. Also if you make any artwork with the brushes I would love to see it.

To combine brush sets use the flyout menu and select the first set you want. Use the replace option that is offered. Then select the second set and click the append option. Now with both sets loaded use the flyout menu and save the brushes as whatever name you want.

Below is a picture of the 10 brushes I created from the 2 tree pictures.

Photoshop Grunge Brushes
Photoshop Grunge Brushes