From Comp to Finished Page

See the amazing Greg Rewis at work! This video is awesome! Greg uses a combination of software programs (Photoshop, Fireworks, Dreamweaver) to take his designs "from comp to finished page." I've learned so much from watching this clip (found on AdobeTV) and feel quite inspired.

If you don't know who Greg Rewis is, he is part of the brilliant team of Greg Rewis and Stephanie Sullivan, both authors of one of my favorite books Mastering CSS with Dreamweaver CS3 (and yes as of this month, there is a new edition for Dreamweaver CS4 out already).

And have you heard the cutest news ever? Greg proposed to Stephanie on Twitter!

designm.ag

I love DesignM.ag! Each time I log into this website, something new and interesting always pops right up. Today I stumbled upon the 101 Awesome Portfolio Sites article. It showcases some of the most attractive portfolio sites out there. One of my favorites is JenGermann's site (screen captured above). Me love!

Here's Spicy Web Designer's interview with Jen Germann. It's endlessly interesting to hear from other designers. Especially the ones you admire.

Favorite Design-Related Sites

Will be updating this list often ... for my depleted memory bank.

Share yours too if you're in a typative, talkative mood today ... that's what the comment section is for. Though I have yet to get any comments on this blog, I'm not giving up hope. (The "Little Miss Sunshine" in me is talking, see?) :)

• A List Apart which naturally leads to some of the coolest design conferences at An Event Apart
• Listamatic on maxdesign.com
• Web Design Directory
• Adobe TV
• Khoi Vinh's Subtraction
  
• AIGA (I'm a member!)
• sitepoint.com
• About.com: Web Design (by Jennifer Kyrnin)
• DesignM.ag
• CSS Bay
• Design Meltdown (by Patrick McNeil)
• COLOURlovers
• Designer Taxi
• Freelance Switch
• Blind Text Generator (lorem ipsum)
• CSS Zen Garden
• jQuery
• 37signals
• Veerle
• Alltop (a one-stop shop you may say)
• The Grid System
• Tutorial9
• Think Vitamin (by the folks at Carsonified)
• Tizag Tutorials
• Smashing Magazine
• Vanderlay Design (great list of minimalistic websites that I love!)
• Blue Vertigo (stock photography grand central)
• Design Meltdown (by Patrick McNeil, author of The Web Designer's Idea Book)
• Zeldman.com
• You the Designer
• CSS Tricks
• The Do's and Dont's of Modern Web Design
• My Ink Blog
• Iconfinder.net
  

How to Install Favicon on your Website

It started snowing yesterday morning at the crack of dawn! Not enough to shut the whole city down like we've all been hoping, but at least enough to sprinkle some pretty winter sceneries around town. It took almost 25 minutes to scrape the ice off the car this morning though, that part of winter somehow always skips my memories. :)

Anyway, time to share some fun (and easy) coding!

I had to add a favicon to a client's site last night (very late last night). After much Googling and various failed coding attempts (as many as there are favicon tips on the internet), I stumbled across "the one" tip that made it all ok! It's a must share because it's so sweet and simple:

Just add these 2 lines of code to the "head" section of your (X)HTML:

And the favicon should appear like magic once you test the page on a browser. My problem was that I only added either one or the other of the two in my previous attempts, and that somehow wasn't quite enough. But with both, my page finally works as it should. If you want the favicon to appear on each of your web page, repeat this coding on each page. Also make sure that you save the favicon image in your local root folder (the folder where your index.html page is in).

Read more on Favicon on photoshopuser.com. This was where I found zee magic wand!

Have fun!

Fixed-Positioning & CSS Zen Garden

Got a tip from my teacher again. This time it's on "fixed positioning" as seen on this CSS Zen Garden site.

~~~~~~~~~~~~~~~~~

The css zen garden footer is positioned with "fixed positioning". There is a div at the bottom of the layout with the bottom.png footer image, positioned 0 pixels from the bottom of the browser. The z-index keeps the div on top of the other divs.

#extraDiv2 {
background-image: url(bottom.png);
background-repeat: no-repeat;
background-position: center;
height: 200px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 5;
}

Here are a couple articles on fixed positioning,

http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

http://annevankesteren.nl/2004/07/fixed-positioning

Advice on Freelance Web Development

For months now, I've been wondering how to get started as a newbie designer in today's world. Jennifer Kyrnin wrote a helpful article on this very same subject on about.com.

Here it is (copied & pasted) below in case you need a bit of help too.

I'm an antsy to keep the ball rolling ... it's a race against time for me.

~~~~~~~~~~~~

Advice on Freelance Web Development

Part 1: Tips and Tricks from Professional Freelancers

By Jennifer Kyrnin, About.com

How to Get Started

How do you get started in the field? The most common way is by creating a site or sites for yourself, volunteering to make sites for others, and then eventually finding someone who will pay you to make their site. "I attended a workshop and then volunteered to make my department Web site," Joyce W. recounts, and Suzanne started personal and then "was approached by someone to do a site for them. I was thrilled!"

Never think that because you're not getting paid the job is not worthwhile. Thomas sometimes volunteers his services and is "willing to give my clients more than their money's worth". It's important to earn money eventually, but especially when you're starting out, volunteering Web development gets your name out there.

The Technology

It doesn't take a lot of cutting edge high tech equipment to do Web development. Most of the developers don't have a high speed line, but it would be nice ("No - darn it!" Joyce D. said when asked). It also doesn't take a computer science degree, although Michael minored in it. Finally, you don't have to know everything about something that a client wants (CGI, databases, etc.). "I subcontract when I need Perl for CGI," says Joyce W. and Joyce D. has "two resident geeks" to help her with the technical parts.

The Business

Choosing your niche is vital, as Thomas says. So, the first thing you should decide is what types of sites you will focus on. Joyce W. does "no personal pages" while Joyce D. prefers "local clients so there's a neighborly touch." Some people focus on non-profit groups, while others target small and large businesses, it's your preference, but you should decide so you don't waste your energy on a site that you might not do as well with.

Once you've decided on your market, you need to decide how and how much to charge. The most common way to charge is by the project.

You need to find something that sets your business apart. Why should someone choose you to design their pages rather than another developer? Michael says, "a successful business must be customer oriented and prepared to bend over backward to meet the customer's needs and requirements." While Suzanne focuses on ingenuity, because she feels "sites need to have a unique feel to them in order to stand out."

Promoting yourself is important to get more business. Every developer stated that word of mouth is one of the best promotion methods. Make sure that your friends know you are doing this, that you are available and happy to work for them. Put your business information in your email signature, make sure your Web site indicates that you do Web development, and keep volunteering if you haven't found enough work yet.

Remember

It's not always easy to be a freelancer. You'll have to deal with people who ignore your copyrights, and once you've finally found what you think is a paying client, you'll meet people who "don't think it's worth their time to pay you." (Suzanne) Web development can be very technical, and when you're running your own business, you often have to do it all yourself, and often all alone. When you work from home, you'll have to deal with distractions like "my kids grabbing my arm all the time." (Thomas) Getting your site and your clients' sites promoted in search engines is very difficult, and doing the job can be extremely time consuming.

But It's Worthwhile

Most freelance Web developers work out of a home office. They set their own schedules ("[I can] get my teeth cleaned or sleep in if I'm not feeling well" Suzanne "I love being here when my sons come home." Thomas). Web developers are creative and get to combine technical accomplishments with marketing and design. I'm sure that most Web developers wouldn't change their job, once they've found the right mix that suits them.

If you are interested in meeting these developers online, let me know, and I'll see if I can set up a time when we can chat with them. Many of them are sometimes on the HTML Forum, and Michael, at least, is very active there. The following pages are a short description of their work and how they got started doing Web development, as well as advice for those getting started.

Relax With Some Fishies on Your Screen

The other night, Poco got on my lap while I was tinkering away at the Mac. Wanting to give her something to be amused with, I googled for "fish - aquarium - screensaver - mac" and found this really cute screensaver developed by the brilliant folks at Useless Creations. The water level goes up slowly to fill the screen as the fish start to swim in ... the sound effect is so awesome my friend thought there was a big leak in the house somewhere. It's mesmerizing and soothing for me, and Poco can't keep her eyes (and paws) off of those fishies!

There's free version for you to try so go ahead, test it out!

Image Slicing From Photoshop to Dreamweaver

I usually start the design process by sketching the design for each page in Photoshop before actually coding them in (X)HTML. Now that we are learning Dreamweaver, the Photoshop sketches can actually be sliced and imported directly into Dreamweaver.

Here is an article by Geoff Blake (published in both Layers Magazine and Web Design Library) on this process using Photoshop CS3 (copied and pasted as usual in case they ever go away). I heard the slicing feature is even easier with CS4 as you can see in this Adobe tutorial video.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Image Slicing in Photoshop CS3
By Geoff Blake | June 04, 2008 | Layers Magazine

No doubt you’ve heard about image slicing, but do you know what it is and how it works? Image slicing is a technique for creating a web page (or a component of a web page, like a header or navigation menu) visually in Photoshop (Fireworks and Illustrator also allow you to slice images, too). But how does it work?

Well, you’d first design a page in Photohsop exactly as you want it to look when it goes live on the web. Then you cut out all the page components—title bars, buttons, navigation menus, and so on—using Photoshop’s Slice tool. Then, when you save everything out, Photoshop saves each slice as an individual graphic, and (and this is the icing on the cake for the code-leary) all the necessary code will automatically be written as well. Sounds awesome, huh?

Finally, once everything’s saved out, you can pull everything into Dreamweaver and finish off your layouts with any necessary tweaks. It’s a very cool process, and one of the most popular methods for building web pages.

The following sections describe how to take a created layout, slice it up in Photoshop, save it out, and then pull the whole thing into Dreamweaver to finish it off. Ready? Lets get started!

Part 1: Designing Your Page ‘n Slicin’ it Up
So obviously, the first thing you’ll need to do is create a layout in Photoshop. In my example, I’m building an entire page, and because I don’t want any horizontal scrolling in my layout, I build for the most common monitor resolution, 1024×768. There’s quite a bit of debate as to how wide one can design inside a width of 1024 pixels, but I personally go with 990 pixels as my maximum width. This means that starting off in Photoshop, I create a new file with a canvas size of 990 pixels wide. As for the height, that’s usually determined by content, so you might want to give yourself lots of space to work inside.

Now in the case of creating a page object like a menu or header, you’d have to know the dimensions of the object before creating it in Photoshop.

Once your dimensions are set, it’s simply a matter of building your design. Design and lay out all your buttons, background graphics, logos, and so on, building up your page’s design. Use whatever tools, commands, and options you’d like. Often times, I’ll even cook things up in Illustrator, then drop them into my layered Photoshop layout as Smart Objects, just to make the process go faster.

If you’re building a page as I am here, don’t worry about actual page content—the text and other objects that would appear on the individual pages of your site. Imagine instead that you’re building a template. What you’re after is the overall look of all the pages in your site. Later on in Dreamweaver, you can drop in the content. Once your page design is complete, you’re ready to begin slicing it apart.

Slicing up your design is the fun part. What you’re doing is taking your overall layout and cutting it into smaller pieces. This means you’ll be isolating buttons, logos, and background areas on your page by slicing them away from the rest of the layout. There are a few different ways to slice apart layouts and page components, but I’ll show you my technique.

Here’s how to get started:
1. From Photoshop’s Toolbox, select the Slice tool.
2. With the Slice tool, click and drag a box all the way around your entire design.

This creates a single, large slice that encompasses your entire layout. I think you’ll find this to be the easiest and most accurate way to slice images.

3. Right-click (or Ctrl+click on the Mac) anywhere inside your design, and choose Divide Slice.
4. In the Divide Slice dialog that appears, decide how you’d like to break that single slice that you just drew. Turn on either Divide Horizontally Into or Divide Vertically Into (or both); then enter in the number of slices you’d like to create. Click OK when you’re ready.

This is where the craft of image slicing comes in. Look for natural breaks in your image. Remember, each slice will wind up being saved out as an individual graphic, so you may want to create slices for each button in a menu, for example. In my layout, I’ve divided the image into three slices horizontally: one for the header area, one for the main area, and a third for the lower, footer area.

If Preview is turned on in the Divide Slice dialog, you’ll be able to see where your slice lines will appear in the image. Don’t worry if they’re not exact, we’ll adjust them in the next step.

5. Next, if needed, adjust the slice lines that appear on your image simply by dragging on them. You may want to zoom in for a little more precision.

You’re now ready to continue slicing apart your layout. I find it easiest to work from the general to the specific—in other words, look for main areas to slice away; then start getting more refined as you go. Once you have the general areas of your layout sliced, you’re ready for the more detailed areas.

6. To continue slicing apart your image, single-click inside a “general area” slice; then right-click (or Ctrl+click on the Mac), and choose Divide Slice once again.

Notice that when you single-clicked inside the slice, all the other slices in the image deselected? Now this time, you’ll only be dividing up the currently selected slice.

7. In the Divide Slice dialog, set the number of slices you’d like to create horizontally and vertically, just you did earlier.

As before, look for natural breaks in your layout. Remember, each slice is saved as a separate graphic, so you might want to isolate buttons, logos, and so on. Don’t get frustrated if you have to start over a few times. Image slicing does takes a bit of patience. Knowing where and what to slice is just a matter of practice.

8. Continue slicing apart your layout using the techniques described until you’re happy with how things are looking.

Things lookin’ good? Great, now you’re ready for the fun part!

Part 2: Savin’ Er Out
Once you’ve sliced up your layout, you’re ready to save everything out of Photoshop. And remember, not only will Photoshop save all your sliced images in one shot (meaning that you don’t have to save each of them individually), but it’s also going to build your page’s underlying code structure for you. So when you save your slices, Photoshop will also save an additional HTML file. That’s the file that you’ll want to open in Dreamweaver. Awesome is an understatement here, folks—it doesn’t get much sweeter than this!

Here’s how to save it all out:
1. Choose File > Save For Web & Devices.
2. In the Save For Web & Devices dialog, set optimization settings for your slices.

If you’ve never used this dialog before, I’ll give you a quick run-through on how it works. Holding down Shift, you can select the slices that you’d like to set certain optimization settings for—that is, compression options when you’re saving an image (or in this case, a group of images) for use on the web. Next, on the right side of the panel, you can set your optimization settings.

Depending on the file format that you choose, different options will appear. For example, in the case of JPG, you’ll see options for compression, quality, blur, matte, and a few others. Unfortunately, we don’t have the space to go through all the options, so you may want to read up on a few of these.

3. Once you’ve optimized your slices, click Save.
4. In the Save Optimized As dialog, name your file in the Save As field; then navigate to the folder where you’d like to save your slices. Don’t click Save just yet.

The location where you save your work will most likely be your site’s local root folder, as you’ve defined it in Dreamweaver (You may need to read up on defining a site in Dreamweaver if you’re not sure what I’m referring to).

5. From the Format menu at the bottom of the dialog, choose HTML And Images.

This ensures that Photoshop will not only save out your slices, but also all the background code needed to render your layout.
If you’d like to explore some of the other options available, choose Other from the Settings menu. You may want to experiment with a few of the commands found here.

6. When you’re ready, click OK.

Photoshop saves out all your slices, and the HTML needed for your layout. Pretty easy stuff. Now lets go take a look at what happened.

7. Minimize Photoshop; then navigate to the folder where you saved your work.

Notice that Photoshop created an HTML file, as well as an images subfolder. Inside the subfolder, you’ll find all the individual slices from your layout.

8. To see your completed layout, open the HTML file in your web browser.

Your layout looks exactly as it did back in Photoshop. Cool!

Part 3: Throwin’ In Some Dreamweaver
Now that everything is saved out of Photoshop, Dreamweaver takes over the formatting duties. In Dreamweaver, try opening the HTML file that Photoshop created, and you’ll see right away that everything’s been created with tables. In Photoshop’s Save Settings (Step 5 in the previous section), you can set whether to use tables or div tags.

Notice too that all the slices sit within the table’s cells. You can drop additional page content on top of your images using a clever technique: Remove the slice from the table cell; then set the cell to the slice’s original dimensions; drop the slice into the cell’s background; and finally insert new text or image content into the cell. This creates the illusion of the content floating above the graphic, as you can see in the screen shot.

Now you can begin making any adjustments you’d like. For example, you could center the layout, add in a background color, create any necessary CSS rules, begin dropping in your content, and set your hyperlinks.

From here, it’s all tweaking—adjusting CSS styles, text, and other page elements within your design. If you want a graphic to appear behind the text in a table cell (which you can see was done in the sample page design, which uses a crater background behind the text), remove a graphic from its table cell and set it as the cell’s background image, just as you did earlier in this chapter. Then insert your text in the cell as you normally would.

As you work, don’t forget to preview your page to see how your design is looking. And here’s one more trick: With your page working well in Dreamweaver and previewing nicely in those target browsers, use it as the basis for the other pages in your site by resaving it under a different file name for each page. Even better, you can use your page as a Dreamweaver template.

So there it is, a quick guide to getting started with image slicing in Photoshop. Experiment and try out some of the different options, and most importantly, have lots of fun!

The Art of Frames

We are wrapping up the Dreamweaver class, and the last lesson is dealing with frames. I personally am not fond of frames as a web user, but it's good to know in case we ever need to design a site with frames. Piper gave me a Web Monkey link which should help make frame designing a bit clearer. Also, this w3.org article sheds some light on the basic frame tags.

I've tried copying and pasting both of these articles, but the frame tags were not accepted in the Blogger configuration. Hopefully, these links won't be obsolete for a long long time. But then again, hopefully we won't have to use frames much going forward.

The Mysteries Behind Colors

No Better Way to Ring in 2009

The holidays have scrambled my schedule so much ... there was no time for anything else. But now I'm getting back into the swing of things. And with that as a goal, I can't ask for a better present on the first day of 2009 ... just found out (purely by chance) that one of my designs was nominated and chosen to be featured on the school websbite. You'd think they'd notify the lucky students, right?! I could've missed this one brief shining moment, but I'm not complaining. Thanks to my teacher Piper Nilsson ... for nominating my work, and to Sessions for choosing to feature it. I'm on cloud 9.

A Happy New Year it is already! :)