Illustrator Tutorial

Here's a tutorial that is good for those looking to get quickly acquainted with Illustrator:

http://vectips.com/tutorials/create-a-cute-panda-bear-face-icon/

Rounded Corners for Arbitrary Shapes in Photoshop (and Gimp)

There are many tutorials for rounded boxes in Photoshop. Photoshop CS includes a rounded box drawing tool even. You can position a rounded box over an image, use the magic wand to select the box, invert selection, select the photo layer, and use edit>cut to round the edges of the photo.

But if you have an arbitrary shape, what do you do? The select menu contains "smooth", which sounds appropriate. Except that the smoothing doesn't work very well at all. The corners come out jaggedy and make any edge effects applied afterwards look terrible. Blurring the corners doesn't help.

The oldest method works best (I've used it since Photoshop 3.0). Create a channel, make a selection, fill it with white, apply gaussian blur (in CS, I sometimes have to convert my shape to a smart shape to apply the gaussian filter), and then apply levels (CTRL-L) set to 130 1.00 165. You can now use magic wand to select the resulting rounded shape. Switch back to the layers list, create a new layer, and fill the selection.

More detailed steps here:
http://www.stockvault.net/tutorials/photoshop_smooth_your_edges.php

"Harmonious" Colors

Some colors just seem to go together. If you've got an eye for those harmonious color choices, you can pick them out manually. Otherwise, here are some pages that will do it for you.

There's a huge list at
http://veerle.duoh.com/index.php/blog/comments/colors_part_ii_the_color_calculator/

with lots of different color pickers. These are basically color wheels for colors that go together, usually using different (selectable) methods to choose colors. I went through the entire list are here are my favorites:
Best: http://wellstyled.com/tools/colorscheme2/index-en.html#
OK: http://www.sessions.edu/ilu/#/
Simplest: http://www.colorschemer.com/online.html

Another technique that I have found to work well is to grab colors from a pleasing photograph. Here's a quickie on using colors from good pictures of nature:
http://www.boxesandarrows.com/view/natural_selections_colors_found_in_nature_and_interface_design

And a quote:

"Thanks for the comments… on the topic of background colors… Cool colors (blues, greens) work well as backgrounds because they recede. Have a small room in your house that you'd like to make seem bigger… use a light blue. Got a big room you'd like to make more cozy… go with a warm color like red (warm colors come forward.) Color psychology also plays a role here. We associate blues with the sky and oceans (lots of depth in both), hence its calming effect and associations with depth and dependability.

Some color characteristics:

Red: Vibrant, passionate, love, war. A very strong and attention-grabbing color, red is charged with emotions.

Violet: Regal, sacred, sensual. In deep shades, violet is luxurious. When lightly tinted, it is aromatic and spiritual.

Blue: Cool, dependable, sophisticated, sky, water. Blue is full of depth, constant yet dynamic.

Green: Fresh, relaxing, earth. Green is very balanced and calm, a natural color.

Yellow: Sun, energy, warmth. Yellow is welcoming and full of life, a happy color.

Orange: Strong, vital, hot. Orange is the warmest of colors, a healing and playful hue."

Web 2.0 Style Guide and Some Photoshop Links

About a year ago I read a Web 2.0 style guide and was very impressed with it. What advice I remembered I implemented on my projects at work. Now, planning a redesign of my personal site, I tracked the site down again.

http://www.webdesignfromscratch.com/web-2.0-design-style-guide.php

Along with that guide I found a few links to help on the photoshop end of implementing the style recommendations. Photoshoplab's Web 2.0 Design Kit takes you through some of the common procedures in making graphics for sites.
http://www.photoshoplab.com/web20-design-kit.html
http://www.photoshoplab.com/web-20-design-kit-part-2.html
http://www.photoshoplab.com/website-design-mockup-tips.html

Another page talks more about masks (which are covered somewhat in the last link above):
http://www.photoshoplab.com/the-masks.html

Want to make an image that looks like the Apple iPod ads?
http://www.graphic-design.com/Photoshop/ipod.html

More CSS Styling

the format for styling elements is

element.class { property: value; property: value /* comment */ }

either element or class can be blank, but one of them has to be present, and if class is missing omit the period. this applies the properties and values you list inside the curly braces to all HTML elements which have class attribute set equal to the class you put after the period (if class is omitted, then it applies to all elements of that type).

For example

tr.poo { ... }

applies to all table rows which have class="poo" attribute on them.

tr { ... }

applies to all table rows, regardless of the class you set. Many CSS stylesheets you inherit style all elements of a certain type. You should be able to override the default (you probably don't want to screw with the default because it will screw up the rest of the stylesheet) by creating your own classes of elements.

There's one other variation on the element.class { .. } which is you can use a pound sign (#)

element.class#id { .. }

(you can even omit element.class and just have #id)

This applies the style to just elements with an attribute id equal to the name you put after the # sign

so tr id="fun" ... /tr (sorry I can't put the greater than or less than since it will be interpreted as html) could be styled with #fun { color: #775544 }

Look up w3schools on google to get a list of all the css properties. Common ones I use are:
font-size, font-face, font (this one combines all the font-... properties into one, the syntax is hard to remember though), padding (sets padding around a whole box), padding-left, padding-right..., margin, border (border: Xpx linestyle color), color (sets foreground text color format is hexadecimal #rrggbb), background-color and background (the one gotcha with background is if you want a background image, use the function url(...) but don't enclose the argument to url in quotes), width, height

if you want to understand padding, margin and border look up css box model. I believe padding is the space between the border and content inside a box; margin the area between the border and any neighboring content; border is just like word, you can set the thickness and dashed, solid, etc.

One other thing different from old school html is DIV and SPAN elements; a DIV is a box that can contain anything, a SPAN is an inline element, meaning its primarily intended for styling sections of text (like if you wanted to make the first few words of a paragraph bigger span style="font-size:20pt; color:grey" In the beginning /span there was nothing, OR, another handy one is to put an indent in a paragraph, use a span with a padding-left of like 15px that contains just some whitespace); a lot of the properties don't apply to SPAN. My products template mostly uses tables though because they are a lot easier to work with but I think the spans are really handy.

That's pretty much all I know. you can access the CSS properties using JavaScript via document.getElementById('

idofyourelement').style.propertyname

Quick and Easy Aqua Button

If you search Google for "Aqua button tutorial" you will get back a truckload of tutorials. Many of these come out looking very pretty. Most, however, have 20+ rather involved steps and the pill part of the button is very much linked to the graphic you are placing within the button, so that making a bunch of buttons is very time consuming since you have to go back to step 5 or 6 for each new button. Also, if you don't use the dimensions of the tutorial, figuring out what tweaks to make to step 8 of 20 is a little hard to gauge.

The following tutorial makes a roughly square button that you can just dump an image or text into. It's fairly simple so different sizes should be achievable without much work.

Couple of tips:

1. Have a color in mind for your button; write down the hex value for this color. Then create a darker version (this will be used for shading).
2. Ideally, make the image much bigger than you need and scale it down later. It ends up looking better. I *didn't* do this in the tutorial unfortunately.
3. The button consists of a body which has an inner shadow applied, another two layers that make the bottom part of the button "glow", and yet another layer above your text or image that adds highlights (a white colored reflection) to the top of the button.
4. Use "Save for Web" to save the pill, and save it using either GIF-128 or PNG format. PNG looks better but is not supported by older browsers.

Ok, lets get to the step by step instructions:

1. create a box with rounded edges by using the pencil tool, size 17, in the 4 corners use the box marquee selection tool and paint bucket with a dark version of your color (fill with #636363 for me). I call this the "pill body"
   
2. if you're fancy, fill the pill body with a gradient from a lighter version of your color or the color itself to the darker version; #636363 to the dark version #484848 worked for me
3. add inner shadow via blending properties. Use the dark version of your color, in my case, #484848 (make sure to set "global light" to off on the shadow! or further steps will break this step)
4. the inner shadow should create shadow at bottom and sides only (not the top); so adjust the light angle to be vertical up and down and adjust the "size" parameter until it looks good for your size of button
5. create a new layer, this will be the first glow layer (the bottom of the button glows)
6. create a radial gradient within the boundaries of the pill body, centered at the bottom, white to black. Transform width by 200% to make it wider
7. set blending mode to color dodge, 10% opacity (screen and overlay also work, though overlay gives a more pronounced effect)
   
8. transform by 200% again, this will create a new layer, glow layer #2
9. set blending mode to linear dodge, 10% opacity
10. select the original pill layer boundaries with the magic wand; select>invert and switch your layer selection to the two glow layers on top and delete their content outside the pill boundaries you selected with the magic wand
11. change primary color to white, and create a new layer-- this will be the highlight at the top of the button
12. select the original pill body shape with the magic wand and then switch back to highlight layer in the layer list
13. fill the highlight layer with a linear gradient; white at top, to transparent at about 75% down the height of the pill body
14. use the elliptical marquee (making a circle much bigger than the pill itself) to select the top half of the linear gradient, losing off a bit at the left and right side within the boundaries of your pill; then select>invert, cut the lower half of the highlight layer off, and about another quarter off the sides (you just want the top half to have the white reflection, and having a perfectly horizontal cut in the reflection doesn't look as good)
15. shrink the highlight layer to 93% width and 98% height, move the layer down a little so it doesn't touch the edges of the pill body
16. gaussian blur 0.5 the highlight layer to give it fuzzy edges
17. add your image or text below the highlight layer, but above the original pill and the glow layers
    

You may or may not want your button to have a shadow. I tried using the blending properties drop shadow effect, but it never looked really good. Measure out how much room you have and then follow these steps:

1. select the original pill body again with the magic wand
2. create a new layer
3. fill with a very dark version of your color (I just used black since my button is dark grey)
4. distort the top left and top right corners inwards so the shape has perspective-- the guides Photoshop shows should be a trapezoid shape
5. gaussian blur by 3.0
6. set opacity to 50 to 70 %, whatever you like
7. voila
   

That's all! The best part is you can reuse your button without much effort.

The following tutorial looks better but is more time consuming: http://www.webdesign.org/cat/photoshop/tutorials/aqua-style-button-with-photoshop.35.html

Aqua Button Tutorial

http://graf-users.edu.ats.dk/maryus1/Aqua%20Button%20Pro%20(Photoshop%206%20or%20higher).htm

Select pill layer (not layer 2)
Add mask
Load selection from pill channel
Fill with white
Gaussian blur value: 20
Select the area you want to have a reflect. For pill buttons, this is like the tutorial. For boxy or circular buttons, you will want about half of the button, then use ALT and the circular selection tool to cut out some of the middle/bottom, so the button looks rounded. Skew the pill like in the tutorial.

Gaussian blur should be 5, not 10.

levels..

Load selection

Screen

Opacity

Drop shadow: make it the same color as the button, should drop down a good deal, then have decent spread

Quick HTML Form Field Overview

Forms are enclosed in form tags. Arguments to a form are action, method, and name.

Inside the form, the following types of fields can be placed:

textarea
Ex:

<textarea> value="hi" onClick="alert('test');" onChange="alert('changed');"
hi
</textarea>

textfield

<input type="textarea" value="hi" onClick="alert('test');" onChange="alert('changed');">

checkbox

<input type="checkbox" name="check1" id="check1" value="hi" onClick="alert('test');">
<input type="checkbox" name="check2" id="check2" value="hi" onClick="alert('test');" checked>

Use the word checked inside to have the default be checked.

radio
Radio buttons are a strange-- they are inputs with the same name but different ids.

Ex:

<input type="radio" name="radiogroup" id="radiogroup1" onClick="alert('selected #1');">
<input type="radio name="radiogroup" id="radiogroup2" onClick="alert('selected #2');" checked>

select
Selects can have multiple options selected. There are two types, the drop down and box with a list of values.

Drop down: (don't set a height)

<select name="select1" id="select1" onChange="alert('value may have changed');">
<option value="opt1">option number one</option>
<option value="opt2">option number two</option>
</select>

Box with a list: (set a size for the box, can also use the word multiple)
<select name="select1" id="select1" onChange="alert('value may have changed');" multiple size=3>
<option value="opt1">option number one</option>
<option value="opt2">option number two</option>
<option value="opt3">option number three</option>

hidden
Hidden fields are like textfields, except that they are invisible.

Hand icon when the cursor is over an image

This is actually more difficult than it ought to be, because IE and Netscape/Firefox have a different name for this cursor (which is also the most common besides the i-beam, convenient, eh?). But you can make it work in both cases by just setting the style of you element to:

style="cursor: pointer; cursor: hand"

Simple CSS Styling

create a .css file
for example
stylesheets/forms.css

include in it data with the following format:

prototype for an HTML object:

//TEXTAREA
//{
// FONT-FAMILY: Tahoma, Arial;
// FONT-SIZE: 10pt;
//}

-or-

custom style:

//.textareaBig
//{
// FONT-FAMILY: Tahoma, Arial;
// FONT-SIZE: 10pt;
// WIDTH: 400px;
// HEIGHT: 185px
//}

in your object you can use class="stylename" with the leading period dropped, for example: (replace curly braces with > and <)

{textarea class="textareaBig"}blah{/textarea}

Style properties are beyond the scope of this blog...