A student of mine recently asked for this, so I thought I'd just throw it out there just in case anyone else was having trouble with it. As usual there are a multitude of ways to do this. I just happen to like the way of least resistance. Of course, this technique works with any shape, including text.

1. Open the file you want to be a rounded rectangle instead of a square image. .
2. Choose the rounded rectangle Shape tool. You need to make sure you put in the radius of the rectangle you want before you use it. Say 15.
3. Go ahead and draw your rectangle to the size you want inside your image. (It will make a layer so if the size isn't right, go to Edit and Free Transform to change the size.)
4. Make sure you have the image layer chosen. You may need to double click it and give it a new name. Anything besides our locked-down default Background will do because nothing can go undeneath a locked down layer.
5. Take the Shape layer and drag it under the image layer.
6. Hold down your Option/Alt key and click once you see the overlapping circle symbol when your cursor is between the 2 layers. Then you should see the an arrow in the layers panel, and your shape in the image only when looking at the image.

This is a Clipping Mask. A clipping mask is always great because it is non-destructive to the image. It also means you can apply any Layer Effect to the shape, and both the image and the shape is moveable. A non linked mask.

Some of you may know I left Sprint (was in usability) not too long ago. It was only a 6 month contract. I was so excited to get out on my own again. Just to refresh, I teach Adobe products including: Photoshop, Illustrator, InDesign, Dreamweaver and Flash, and I forgot, Acrobat. I am also a web designer who specializes in XHTML and CSS and usability. Of course this is on top of being a user group manager.

Being back on my own has me working with others again and me not always being the designer. I am often the person making the designers work live XHTML and sometimes Flash. So in that sometimes frustrating process I've worked with too many designers over the years who seem to think that just because they design for print means they can design for the web.

Design is not universal! If you design for print, it does not mean you will be a good web designer without some serious studying.

This is for those designers who are previously a print designer:

• If you are using either Fireworks or Photoshop (don't get me started with the fact Fireworks should be in the Design Premium package; Keep your layers organized. Name your layers and put them in folders for like items.
• Put each object on a separate layer.
• Go ahead and put your content in the Photoshop file, so you can make sure all is going to fit in your design, just make sure you are using one of the fonts on both platforms (I prefer Verdana myself) and NO anti-alias and take leading and space after into consideration. I can change that in the CSS to whatever is needed.
• Do not use that font at 9.2 points and 80percent tracking. Use a normal size like 11 or 12 points.
• I do NOT use tables to lay out anything in CSS, so do not change the layout for each page to be different widths and think in print like columns of text like a newsletter. The web is not print.
• Along with no tables means I will not be "slicing" things up like we all did for tables. Think in background images. This is also the case for navigation. I would prefer to use live text anywhere there is text with the exception of the company logo.

  I may only need 1 image for each state in a button and it's rollover image because I can attach that to the state itself.

• Bring me into the decision making process BEFORE it goes to the client, not after. When in doubt, ask if it can be done.
• Keep things consistent. Don't change elements around on each page. Think of the user and will he/she be confused by your choices.
• Backgrounds: If the page isn't white take into consideration what you'd want the page to look like printed. I can make a style sheet to do that, but also take into consideration who your audience is. Will they be older and if so we'll need to be able to size things up easily so they can read the page.
• Do your research first before you design. Get inspiration from other CSS sites (I am not advocating copying a design). CSSBeauty.com is a good site to see what others are doing.
• The first page in the site does not have to look totally different and be like a cover to a booklet.
• The user, most of the time (considering on the content/usage of the site) should not have to scroll on the first page. Show them everything they need to know to make the decision where to go next in as little text as possible. On the other hand do not put so much imagery on the index page that they can not find their way around.
• Do not trick the user with a page that makes them guess what is navigation and what is not.
• Decide who the user is before you design the page. Are they Ad execs, or someone who doesn't always use the internet. What size font should you use, what size page do you use?

  If you decide on lets say, 1024X768, remember that isn't the size to make your Photoshop file. You need to take browsers into consideration. I like a 955 or 960 grid system. Like athttp://960.gs/.

Usability rules

Usability is important, do not kid yourself. There are some super simple things to consider:

• Along with the consistency thought, if your site is for the general public, do not put navigation/typical elements in odd places. Meaning, if you have a search, people are going to look for that in the upper right hand corner because that is where it is on most sites.
• Navigation names: Will I know what your navigation means? Is it something cute/thoughtful/inspirational? If so, I may not understand what you mean. Make your navigation something meaningful so the user isn't afraid to click on it.
• Do not put as much text on your main pages as you would in a print brochure. No one will read that much. If you need text, give them first a shorter page and tell them in as few words as necessary why they need to click a link to read more. Either take them to another page in the site, or if they might want to also print it out, make it a PDF they can download and print themselves.
• Flash: It is getting much better at being searchable, but ask yourself why you need Flash before you just automatically put it in. Splash pages are thankfully mostly gone. Consider you have just seconds to grab the users attention to keep them at your site. Do not "tap dance" for awhile first before you show them what the came for; your web site.

After you finish the site, make sure and do some usability testing. If you don't have deep pockets, grab 10-15 typical users and have them complete a series of tasks on your site. Take notes and you'll be surprised at how that will change how you design from then on.

So get out there and design some sites that everyone will enjoy visiting.

Dee

Our user group just had someone in for the Flex 3/AIR tour. We are having a special meeting Monday the 25th for all 3 of our user groups. This is partly to make up for bad weather on the actual tour date, but another meeting about RIA's.

By now you know I am a designer, but you may wonder why I would even care about Flex and AIR. I do classify myself as a designer who codes, but still, I am indeed not a full fledged developer. When it comes to needing CF on my sites, I can do some coding, but not in any other language like PHP, or any what I call heavy lifting on the back end of my sites. Would I like to be a developer? Only if I can still design.

So I made a big deal about Flex to our members about being at the Flex and AIR event Monday the 25th, because Flex and AIR can literally change our lives. With an increase my skill set, I'll be more marketable, and with an increase in my worth, it'll change my quality of living. Why wouldn't I want to learn this?

We'll start with Flex and why us designers should care.

With every Flex application built, someone will need to make it look presentable and have the look of it fit in with the clients web site. This is where we come in with Flex skinning. Adobe has made Flex skinning easy to do with some downloadable (is that a word?) extensions on http://labs.adobe.com. They have one for Flash (which makes sense) Illustrator and Fireworks (which is awesome). As a matter of fact, if you don't already, you should have Labs bookmarked for all the great information they have on there. There is also a fantastic article on Thermo. Thermo was showcased at MAX Chicago, and made my jaw drop to the floor.

Thermo is (of course that is just a code name at the moment) a bridge between the design world and Flex. You can either design inside of Thermo or bring in a Photoshop/Illustrator/Fireworks file. Once you bring in, lets just use a layered Photoshop file for an example, you can target specific layers and turn them into working Flex elements. Plus, it isn't like Contribute or some program that doesn't let you touch the code, it's more like a WYSIWYG, Dreamweaver like program that lets you design, but also lets you see the code you have just created. What it allows you to create is working sliders, visually wiring together events and bindings, and much more. Wow! Thermo isn't even in Beta yet, so we have to be patient for a bit. Visit Thermo's page at Labs for more info.

There will be plenty of opportunities for us designers there, but what about AIR? So lets say Actionscript 3.0 is still a bit mystical for you just yet. (I know you are trying to learn it) Even for us Flash designers, turning to AS 3.0 for our code, even the simple stuff, has a learning curve. Even for AS developers, making the switch to Flex has been... shall we say, at times frustrating.

Flex allows you to use either AS 3.0, or MXML. If that means nothing to you, that's OK too. Just know that there are some subtle difference between Flex AS 3.0, and Flash 3.0. What this info makes me do besides turn to Colin Mook's AS book from O'Reily is make me understand that only really good developers will be embracing Flex, AND that they will need a good designer to make their Flex apps look good.

Now for us designers who code, AIR is very exciting. I have taken a class in both Flex and AIR, and I had no problem following along. (it's weird but I "get" OOP better than Javascript, AS 2.0 etc.) But the most exciting part to AIR for me, is the ability to design AIR apps in Dreamweaver...yes Dreamweaver.

With Dreamweaver CS3 and Javascript, you can make AIR applications. Yep, no kidding. So first thing, you go to Labs and download the Adobe AIR extension for Dreamweaver CS3. There is a ton of good support info, so don't worry, I won't explain it all in one blog entry. Just know that it is an amazing opportunity for us Dreamweaver geeks to explore something as cool as AIR.

So have I given you enough reason to lean more about these new Adobe technologies? I hope so. If you are in the area Monday night, and it isn't icy or snowing (like the last time)we'll make it worth your while. We are (from Adobe)doing a raffle of Flex 3 Pro (when it is released) and a copy of CS3 Web Premium. Of course there will be plenty of swag as well. Jim says he has so many shirts now he could start a tee shirt shop. See ya later

Dee

Last time we took a look at some basics and I promised to show some more about how to do an effective liquid layout design, and how to make a good pod/bubble in CSS.

First off I'd like to make sure I clarified a few things because I found that there wasn't readily good information about this on the web. Fonts. I mentioned fonts last time, but a good friend told me he didn't know what they were, so I'll talk a little more about fonts here. I said there were 11 common fonts on both platforms, and I have a list below. Let me Break them into 2 categories. Serif and Sans serif.

Serif fonts: (in case you don't know what a serif is, we'll make it super simple. Serif fonts have tails, Sans Serif, no tails) Times New Roman is the most popular Serif font. Most popular for print that is, and some web sites use it as well. Because of screen resolutions, I personally like using Serif fonts for headers and subheads, not body content. Georgia is a great font instead of Times. Then Courier and Courier New.

San Serif: Verdana is my favorite to use for body text. why? Because it is a wide font, it is very legible on the web. Next would be Helvetica, Arial, Trebuchet MS, and Arial Black. (Please do not bold the already bold Arial Black.) Lastly comes Comic Sans. Yes, we've all seen this used way to much. Comic Sans is actually considered cursive or brush on Windows, but unless you are doing a child's website, stick to a normal font. What you say, I've forgotten Impact? OK, so I tried. Yes, it's common to both platforms, but not the most legible font now is it. To a designer, it's just plain ugly, but my old print self thinks Arial is ugly too.

So now I'll give you a nice reason to use Dreamweaver CS3. Dreamweaver already has these grouped nicely. How Dreamweaver does it is breaks them down to something like this: I'd like them to see Verdana. But if they don't have Verdana, then use Arial. If not Arial, then use Helvetica. If no Helvetica either, then any Sans serif font. In CSS it'd look something like this:font-family: Verdana, Helvetica, Arial, sans-serif;. I know you could write that in any text editor, but Dreamweaver already has things in groups of like fonts, plus it's easy to add your own groupings. Dreamweaver CS3 also does an amazing job with CSS, so just another reason to use it.

I do want to say this to the hard core developers about Dreamweaver; I love the way it handles code in Code View. Don't think just because it's a WYSIWYG editor, we designers can't use anything but Design view. DW just makes it so easy to code with code hints etc. that I typically write all my CSS by hand. Now that doesn't mean the Design View hasn't improved a lot of the years. Next time I'll show you how to code a page in CSS strictly by Design View, and it won't mess up the code.

One last comment about Dreamweaver here. On Scott Fegette's Blog, he talks about what they are taking out of Dreamweaver. Kudos to the DW team! Unlike Photoshop where they just keep cramming in features (don't get me started on what they need to take out of Photoshop) the DW team is taking out unused features like Flash Text and buttons. There are plenty more things, but I for one am thrilled they are taking this and more out, so they can make DW the best program it can be without a bunch of waste. Keep it up Scott, great job and great blog. One of the more useful blogs I read.

OK, now for the bubble. I recently had to make one for work, so we'll use that example, although I've had to do this a lot in my career. This one is different though because it is meant to go over top of a window, not inside, but the principle of making it is just the same.

First we'll start with the actual bubble, which I could have drawn in Photoshop or Fireworks. I just wanted it to be vector so I could change it easily before I decided on the actual shape. The great thing about fireworks over Photoshop is I have more control of what my end result over this bubble is, meaning I could just have it in CSS, or I could make a symbol of it and bring it into Flash. Can't do that in Photoshop. I, as many of you know, am a Photoshop Expert and Instructor, but Fireworks is by far the better program to use for web graphics. Maybe we'll do a blog outlining why. We'll see.

OK, so this bubble was a gradient, but IT couldn't figure out how to make it, so we changed it back to just a dark gray outline and lighter grey inside. More than likely, it would have some buttons in there too besides the X close one. Not that it matters right now. All we want is for it to be able to expand with text. IT wanted to have me give them 4 corners. Now, I don't mean to insult anyone here, so if that's what you would have done, let me just say, there is a better way. The 4 corner trick worked beautifully in the days of tables, and very early CSS. When we absolutely positioned things, which I try not to do except when I can't find another way.

So if not 4 pieces then what? 3 pieces. This bubble does not expand in width, just in height, but I would have done just 3 even if it was the width I wanted to expand.

Here are the 3 pieces: The top piece is just as far as the curve on the rounded rectangle. So is the bottom piece. This is why I then don't need to make a rule in my CSS for a space above my text. It can sit at the very top of the next DIV. My middle piece then is the only piece that expands. It has a repeat on just the Y and that's also where we put the text.

As far as the CSS goes, all I need is a container DIV to keep the other pieces together, and my 3 div's for my pieces. I did add the close button as an actual image though, so IT could program it, as the rest are background images so they don't affect any text I want to use. You can see the code and CSS in the example I've put up for you.

As far as a good liquid layout goes, I am of the mind that only certain things should be liquid. I can't stand the text area going liquid on me, but textures, headers etc. can be liquid. It has more to do with choosing the right textures that will look good when expanded on a large monitor. This is getting really long, so I'll finish up this thought tomorrow before we move on with the series.

Dee

Alright, last time I went on a bit of a tangent. I started talking about Fireworks for design elements, and ended up talking about CSS. It's hard though, because CSS is such an important part of design these days, it's hard to talk about one without the other. For this edition, we will just focus on design elements.

Fonts:
I want to start with fonts because there are too many designers out there using weird fonts for their mock ups. This throws developers off. I got an email from one today asking if non-standard fonts were the norm these days. NO, they are not! To many print designers are designing web pages these days. Designers who have never made HTML from one of their designs. To them... STOP IT. So I might as well start from the top and talk to designers and developers alike.

Everything that is text besides the company logo, and maybe some headers should be live. So, when someone puts together a mock up of what the page will look like, they should be using one of the 11 fonts that that are common to both a PC and Mac. Another thing to consider here, and this is indeed for the developers, is that all text should be included in your mock up. Why? So you can see how to design the page for more text. It could be greek text if you don't have real content, but the most important thing is not to have any anti-alias. For those who don't know what anti-alias is, it's where the program fills in the pixels to make it look like it's smooth. In a program like Photoshop, there is a setting in the Control bar to change it from Smooth, to either Crisp or none. That will make the text more like the text in XHTML.

Colors:
Colors are something us designers don't think anything about, but seems to be something developers find to be a foreign concept. My suggestion is to spend some time with Kuler. Kuler lets you easily pick from their favorites, or create on your own 5 colors that go together. So, you can have your main color and accent colors for your site super fast. No fuss, no muss. Of course, you will likely base those colors off a logo. Just think in terms of what will compliment the logo. Plus, all gray doesn't cut it. I've seen my share of sites that are just shades of gray. There are other colors you can use, not that an occasional gray doesn't work, just not all the time.

Backgrounds:
We'll start with a super simple background that looks great with fixed width sites. Take a look at MacCORE and you'll see a site that was made to go with a fixed width and has a background image that is 2100 pixels wide, by 20 pixels tall. In the CSS, the slice is first centered, then given a repeat of Y. We'll look at the CSS later.
This is a scaled down example of of a background color, with a white box centered. The box gets a drop shadow with zero distance, and about a 9 pixel size to make it stand out.

I'd like to take a second here and talk about other types of sites, and looks. We could have chosen an elastic or liquid layout for the page. Many developers like the look because the page expands with the browser. Sprint's site is designed like this. It is possible to make a site look good, and be liquid at the same time, but a little harder then a fixed width site. In my opinion, it's all in the content. If a site doesn't have a ton of content, but more graphics, a fixed width works best. It keeps the text from re-wrapping around graphics in an odd manner.

If a site has a ton of content, liquid works best. It is nice to use when a 1024X768 size is the target. For those with large monitors, they can decide how much text in on a line at a time. The design would be much different, so we can explore that next time.

Headers:
Some times, a header is just that, a header for the page with the logo in it. The one thing you want to avoid if possible is for the header to overwhelm the page. Not that you won't see many pages where it was a design element for the header to take lots of room, like on Pownce's site. It works for them because the login is also in the header and it's more important then the content to regular visitors. The initial pages information should always be visible above the page fold. That's when the page is viewed at the target size (800X600, 1024X768) in the browser.

On our sample site, MacCORE (a local Mac user group), I wasn't sure when I made it if we were going to put a login in the header, or on a specific page, so I know it was going to be a background image. The plus of that would mean I could use text over top of the image, have just the logo be on the page itself. That could allow for a better printed page because the logo would be the only graphic that prints. Keeping ink to a minimum.

Navigation:
This site called for a 2-column page with header and footer. Because I didn't want to take precious room for navigation on the side, our navigation is under the header. The main objective with the navigation was to make 1 button with an up, and an over state. The client wasn't sure what the wording would be, so it was important that the text be live text that could be changed at any time.

So I made them all the way across the page and experimented with width and text until I thought it looked good. The plan was to have the over state visible when the user was on that page to show them visually what page they were on. A easy bit of CSS makes that happen, which we'll show later in the series.

Breadcrumbs and secondary navigation:
With a set number of menu links, there needed to be secondary navigation on this site. I used a simple gradient for this. This could have been used for breadcrumbs instead of secondary navigation.

Content area:
For the content area the client wanted something more than just a white background. So, we had to include a gradient that went to white, which is our background color. This is a very important concept in design; allowing for longer pages. So we took a gradient and went from that color to white in a distance that would allow for a short page, or longer page. Our gradient here was just 350 pixels tall and 10 pixels wide. It was just a repeat of X, and not Y. We could have made it the same width as the page, but it would have been a much larger image, and the goal is always a fast loading page.

For the side pod this is just a colored box, so no graphic was used here. It is purely a CSS element, but next time I'll show how to make a good pod with rounded corners.

Footer:
The footer on this site is 100% CSS. No graphics here either. We decided on this just because we knew Apple needed certain legal information, and wasn't sure what else we might need in there.

Next time:
We'll look at some design choices for liquid layouts, and how to make pods. See ya next time.

Dee