If you didn't see the link above here it is again:
JerryLow.com

The Design Aspect

I always tell myself and people who design for me to not worry about the design. I can always code it and optimize it for the web. Although this maybe true I don't always design with that mentality. I usually keep the user of the website in mind. I never try to overkill the design just because I want to, but this is coming from a developer's thoughts.

Regardless, if you are one who is highly concerned about the graphical load time then design with that in mind. You can cut down on size by using design elements that you know can be replaced by CSS 2.0 standard coding. So we're talking about solid boxes, solid lines and etc. We'll go further into that in the CSS section. Using heavy graphics and lots of blending will add up in size. Something like that looks like Crankberry will cost you around 700 KB in image size with the whole page loading around 1 MB. I cater to designers and developers so fairly average for today's standard.

With that, keep those thoughts in mind when designing because if you design first then noticed that the site bogs down then you'll be going back many steps just to make revisions to that.

Keeping the Balance

As mentioned in the beginning of the article that there are many things that dampens the load time of your site. The way your content is drawn onto the pages is also a factor that may affect the speed. Static contents won't pull you down much unless you're uploading novels and encylclopedias on one page but then you have other problems to worry about don't you. Anyways, if your website pulls a lot of content from your database per page with lots of joins and queries then your content is also factored in. In these scenarios I usually recommend keeping a balance to mitigate high load times. So if you have a lot of heavy database interaction I would recommend keeping the design and graphics to a lower end. On the contrary if you don't have a lot of database interaction I may not recommend super heavy design just means that you're more flexible. Refer back to the last section as to how to optimize your design.

JPEG vs GIF vs PNG

Now that you're done your designing its time to slice the images up and start structuring your HTML and CSS. When saving your image files you have so many options as to which file format to save it as. You've got JPEG, GIF, PNG, Bitmap, TIFF and the list goes on and on. Just to shorten your list down, I would stick to three primary formats: JPEG, GIF, and PNG. All the other formats for development wise can be forgotten. Now some people like to consistenty use one format throughout their whole website but I like to switch it up. I prefer to use JPEG, GIF and sometimes PNG. I'll go into further details about which I use and when I use it in a bit. First of all you should understand the difference between all these formats. There has been many articles written over this topic so it would be super redundant to do it again. I'll spare you the theatrics and give you the highlights.

JPEG

• Lossly compression
• Compresses colors and grayscale
• Used for complex images

GIF

• Lossless compression
• 256 Colors
• Good for line and simple drawings
• Supports animation
• Supports transparency

PNG

• Lossless compression
• Patent-free GIF
• Supports transparency with opacity setting

Which to Use

After reading the above part you maybe wondering how this infomation reflects on your files format and which one you should use. Here's how you look at it. Lean towards GIF and JPEG and if necessary then use PNG.

Lets start with why minimal use of PNG. PNG is a nice format format in replacement of GIF. When saving the same simple GIF file in PNG you can end up with a smaller file size as PNG does a better job in compression. The reason I still don't use PNG much is because some of the older, non-main stream and mobile browsers don't have a good support for PNGs. There are ways to go abouts for this but to accomodate for all browsers would be very timely. As I always focus to present a cross-browser compatible website I stay away from this format.

Now then, we're left with the JPEG and the GIF. It is very simple when it comes down to these two contenders. If the image you're saving has lots of colors and blending then go for the JPEG if it has simple lines and text and solid color go for the GIF. Your sizes will optimized this way.

Here I took a screenshot of my currently portfolio (top design) which should most of the images should be saved in JPEG due to the complexity of the images and colors. The second screenshot is of FusedEffects which should mostly be saved in GIF due to the simple lines and large blobs of solid colors.

Good Practice

Obviously if you've got all that down you can quickly decide which format to use and how much compression you may want to do. If you're lazy like myself and you have Photoshop the best thing to do is to use their [Save as for Web] setting. The window it popups up with will give you the image size before you even save it.

This way you can switch between JPEG, GIF, PNG and different settings until you get the quality and size that pleases you.

The Role of CSS

Ok ok ok, I mentioned a few times (at least I think) that you can replace certain elements with CSS to eliminate the use of graphics where necessary. I always prefer this method when possible as I tend to think a few lines of code is always smaller than an image size.

Now a days, developers have come up with many creative ways to achieve graphical effects with just a few lines of coding. Such as rounded corners. The trend right now seems to be using rounded corner boxes instead of plain old square. Since CSS 2.0 has no support for rounded corners on div tags people rely on images and positioning. As I have released months ago a script that is purely css, cross-browser compatible and image-less for rounded corners.

That's only one of the many examples in which graphical elements can be replaced by CSS coding. I will be doing a full article on this in the near future so stay tuned for that.

If You Can't Replace The Image, Work With It

In certain cases some pure CSS solutions aren't as stable yet such as gradient effects you can combine images with CSS to create the effect. So for a full stretch gradient instead of making an image 5000px x 10px just save it as 1px x 10px and use the background: repeat-x; This will save you lots.

In summary, how much can you save by going through so much optimization. This really depends on how heavily you designed your site. As you can tell by my style I like to go heavy with personal designs and light on business designs. Sometimes its not up to you. I work with a designer who over does gradients and shadows everywhere so its up to me to optimized the images. Sometimes I can save up to 500+ KB by doing the right optimization. You maybe thinking that with the advancement of cable internet and the cost of bandwidth going down it doesn't really matter. Remember its all about the user experience. There are lots of factors involved that contibutes to your site's load time, try to optimized everything so there's is minimal lag time. You should also understand that with the advancement of technology more and more people are surfing with their mobile phones or laptops tethered through their mobile phones. Its always a plus for your users when they get the things they're looking for, faster.

Step 1

Using the select tool create a circle for where you want the coffee cup to begin.

Step 2

Gradient it in with a colour of your choice in which you want the colour of the cup to be. Use a darker colour near the center going to a lighter colour.

Step 3

Create a new layer named [inner cup]. Select a smaller area in the mug to the lower right part of the circle you just created and gradient this one in a darker colour. This in 3D aspect is the bottom part of the mug. We're going to set this in so we have an area to work with.

Step 4

Duplicate the smaller circle you just created by pressing Ctrl+J. Now select the bottom layer of the two and transform the object (Ctrl+T). Right click and select Distort. Drag out the shape to make something like so:

Step 5

Press Enter to confirm the change of shape. Change the layer blending mode to multiple.

Step 6

Enhance the lighting by dodging and burning the following areas, go in circular motion like the shape of the cup. Blue arrows mean dodge and red arrows mean burn.

Step 7

Create a layer underneath [inner cup]. Select a circle area just smaller than your overall cup size. Fill it in with white, now offset the selection to the left 3 or 4px and crop out the remainder.

Step 8

Using the eraser soften up the middle part of the white curve line you just created and the tips of the line as well.

Step 9

Create another layer on top and make another circular selection about 30 – 40 px away from the edge of your cup. Fill this in with a very dark brown gradient. Contract the selection 5px and crop out the center of it.

Step 10

Using the eraser soften up the two sides of the rim line you just created.

Step 11

Moving back to the [inner cup]. Using the burn tool burn out the top left of the [inner cup] until it looks like the one below. Don't worry about being bold and making it too dark, once the coffee is one top it'll look good.

Step 12

Create a layer on top of [inner cup]. Make a circular selection slightly bigger than [inner cup] but offset the selection more to the left and up more. Gradient fill this with a dark brown and dark orange. Change the opacity of the coffee layer to 70%.

Step 13

Create a new layer on top of the coffee layer with the same selection size as the coffee, fill in the section with a soft color close to white (but not gray). Deselect your selection (Ctrl+D) and Gaussian blur it for 5px (Filter > Blur > Gaussian Blur).

Step 14

At this point I noticed the cup wasn't very vivid in lighting and shadow so I dodged and burned a bit more of the edges and inner side as the arrows has shown. I also added a white mark in the coffee and blurred it as a reflection.

Step 15

On the edge I made a reflection mark on the cup. Basically drew a shape of the reflection I wanted, filled it in in white. Crop out the unwanted area and changed the opacity to 30%.

Step 16

Now we draw the ear of the cup. Create a layer under everything you just drew. Draw out the shape like the one shown below with the pen tool and select the path. Gradient fill it with the light side to the outer part of the ear and darker towards the cup.

Step 17

Create another layer under the ear as the bottom/end part of it. Finish off the shape as shown below and fill it in with a much darker colour of the cup.

Step 18

Give some waves to the coffee by giving a couple of dodge and burn strokes as follows.

Step 19

Create another layer below everything, this will be your shadow layer. Just draw out any random shape that looks like your cup and fill it in with a dark gray. The shape doesn't need to be that accurate as it will be blurred.

Step 20

Blur (Filter > Blur > Gaussian Blur) at 20px and change the layer blending option to multiply.

Tweak around with the lighting and contrast and you'll get something that looks like this:

3D Hosting Layout

Apple Navigation

Colorful Web Layout

Colorful Web Layout 2

Stylish Mail Icon

5 Advanced Photoshop Techniques for Web Designers

Watercolor Web Design

Retro Poster

Slick Rich UI

Neon Effects

Geometric Shaped Typography

Plastic Text

Glowing Text

Plastic Navigation

Wood Template

Portfolio Design

Save and Load Online

I've added the function to save and load favicons directly from Crankberry Blog. You don't need to sign up. Just do your work, press save and two 4 character key code will be loaded for you. Next time you come back just load the key codes and you'll be ready to go. Keep the key codes in the save slot and you can update your old version without memorizing ten thousand different codes. This is a new thing I'm trying out which I'll be using for later projects. Let me know how it works out for you.

Tools Available

There are some simple tools available for your convenience. You can import different image formats or start from scratch. There's a paint brush tool, eraser and color dropper for simple editing and touch ups.

Attaching Favicon to Website

Once you have created and saved a copy of your favicon in your web directory you'll have to place the following code in your website. I always use the two following codes in my header between code.

Try out the tool and don't be afraid to send me any comments and feedback.

The Tool

If you didn't catch the link in the text here it is again:
Online Favicon Generator/Converter

To be more specific, a favicon is exactly as the name suggest, its an ICON. Its an icon usually displayed in 16×16 pixels that is associated with your website. That's the short story of it. For the rest of the article I'll explain the details of favicons and how you can have one for your site.

Aesthetic Reasons

Favicons are typically for iconic reasons. Its to associate a small graphic to your website that indicates to the user that they're on your site (not that they can't see that). Another reason is that the icon is shown in tabs. Tabs are really popular in modern web surfing, with a favicon it helps users quickly identify which tabs are associated with your website. With a small canvas (16×16) to work with its really testing your creativity, especially for those with very graphical logos. Here are a couple of creative favicons.

Bookmark Measurement

Back in the old days, favicons were a good measurement to see how many people were bookmarking your site, but that only worked when majority of the users on the internet used Internet Explorer. That's right, when people with Internet Explorer bookmark your site, you can see it if you have the right analytic in place. Here's an example for one of my sites using AW Stats.

It shows that this month there were 14 visitors who bookmarked my site. As I said before this measurement only worked for IE; thus, not very accurate. As well, a measurement of bookmarks truly doesn't account for anything.

How to Create a Favicon

Creating your own favicon is not hard. You just need to create a graphical image with dimensions 16×16px. Modern browsers will support GIF and PNG formats but if you want to be safe you can go with ICO format. If you don't know how to convert to ICO formats or don't have any graphical software you can use this favicon generator/converter tool I made for free. Save your file to any name store it in your web directory. You'll need to attach the code below for it to work.

Attaching Favicon to Website

Now that you have your icon in your directory and ready to go you need to tell your website where the icon is. I always use the two following codes in my header between code.

There you have it, your very own and unique favicon to match your site. Remember to be creative.

The result is really just… a rounded div box. Here's an example I quickly generated from the tool.

Have you opened the link yet? No? Open it up and I'll give a quick tour of it. The tool's very simple to use. All you have to do is configure four settings and it'll do the rest for you. The four settings are:

1. Class Name
2. Background Color
3. Font Color
4. Roundness

I'll just briefly touch on the class name and roundness. The remaining settings is kind of obvious. So the class name does not really need to be set UNLESS you have multiple rounded corner boxes that are different. If you're using the same boxes over and over again, that's fine but once you change style you'll have to create new classes so they don't over lap.

The current roundness settings are 1, 2, 4, 8px. These are the settings I believe looks best with most web design. Anymore will make your template look like a lot of circles.

So that's it, that's the tool I created for all of you. If you have any questions or feedback leave a line here and I'll attend to it. Cheers!

If you didn't find the link in the Article here it is again.
The Tool: CSS Rounded Corners Generator