Favicons aren’t new in the web design world, they do however add another level of professionalism to your site. It only takes a few minutes and easily extends your brand one step further. Favicons are relatively simple to make, essentially all you need is a 16×16 pixel image saved in the correct “.ico” format (more on that a little later) and then the proper code inserted in the head tag of your web pages.

To start your favicon project, first grab the image you’d like to use as your favicon and open it an image editor such as Adobe Photoshop. Keep in mind that your favicon will be small, so it’s better to choose a simple graphic rather than something like a photograph, which could end up just looking like a blob. Create a new file in RGB colorspace with the dimensions of 16 x 16 pixels. Copy your image into your new document and using your transform tool, scale your image to fit into the new 16 x 16 pixel document.

Once you’ve got your image into the new document and positioned just way you’d like, save your image using the name “favicon.” SIDENOTE: Incremental saves are crucial to not having to repeatedly recreate work that’s been lost due to a software or system crash or some other catastrophic event that would cause you to lose your work. See our previous posts on autosaves and backups.

Now, from this point there are two schools of thought. If you don’t have an image editor that can save to the .ico format, you can save your image as a .bmp (bitmap image) and then after saving, simply change the file extension from .bmp to .ico. This will work for this project, however won’t work for some uses, such as if you’re making a call in a C app and your filetype needs to be .ico, even though the file was renamed with the correct extension, the call will fail. The alternative here (and the one I prefer) is to use an image editor that will allow you to save as an .ico file. Photoshop users can download this nifty plug-in from telegraphics that will allow it to manage .ico files natively.

With our new .ico file saved, all we need to do now is upload it to the site. Using your favorite FTP client or website development tool such as Adobe Dreamweaver upload the image to your site’s root folder (usually “www” or “public_html”)

Now that the favicon is in place you’ll need to add a small snippet of code just after the </head> tag of your page:

<link rel=”shortcut icon” href=”favicon.ico”>

Pasting this code into the head of a template is a good idea. This will make sure that any new pages you create with your template will display your new favicon.

Make sure to save your changes and upload the new page to your site. You may have to clear your browser’s cache and reload your page to force your browser to reload the link to the favicon.

That’s it! Enjoy your new branding extention!

Like It? Share It!

Hide Sites

By: Jo Han Mok

Flash-based sites have been a craze since the past few years, and as Macromedia compiles more and more great features into Flash, we can only predict there will be more and more flash sites around the Internet. However, Flash based sites have been disputed to be bloated and unnecessary. Where exactly do we draw the line? Here’s a simple breakdown.

The Good:

Interactivity

Flash’s Actionscript opens up a vast field of possibilities. Programmers and designers have used Flash to create interactve features ranging from very lively feedback forms to attractive Flash-based games. This whole new level of interactivity will always leave visitors coming back for more.

A standardized site

With Flash, you do not have to worry about cross-browser compatibility. No more woes over how a certain css code displays differently in Internet Explorer, Firefox and Opera. When you position your site elements in Flash, they will always appear as they are as long as the user has Flash Player installed.

Better expression through animation

In Flash, one can make use of its animating features to convey a message in a much more efficient and effective way. Flash is a lightweight option for animation because it is vector based (and hence smaller file sizes) as opposed to real “movie files” that are raster based and hence much larger in size.

The Bad and the Ugly:

The Flash player

People have to download the Flash player in advance before they can view Flash movies, so by using Flash your visitor range will decrease considerably because not everyone will be willing to download the Flash player just to view your site. You’ll also have to put in additional work in redirecting the user to the Flash download page if he or she doesn’t have the player installed.

Site optimization

If your content was presented in Flash, most search engines wouldn’t be able to index your content. Hence, you will not be able to rank well in search engines and there will be less traffic heading to your site.

Loading time

Users have to wait longer than usual to load Flash content compared to regular text and images, and some visitors might just lose their patience and click the Back button. The longer your Flash takes to load, the more you risk losing visitors.

The best way to go is to use Flash only when you absolutely need the interactivity and motion that comes with it. Otherwise, use a mixture of Flash and HTML or use pure text if your site is purely to present simple textual and graphical information.

Article Source: http://www.articlestoreprint.com

Jo Han Mok is the author of the #1 international business bestseller, The E-Code. He shares his amazing blueprint for creating million dollar internet businesses at: www.InternetMillionaireBlueprints.com

Like It? Share It!

Hide Sites

Again, it’s been a little longer than I would have liked since my last post, however things have been rather busy in the studio lately. My new family and I were cotemplating a move out of town, however, decided otherwise. I’ve also been working on a quite a number of projects. Since my last posting, I’ve left my day job and am now pursuing studio work full-time.

Running from meeting to meeting, doing a good deal more self-promotion and sales work has cut into my computer time, but it’s time I get back on the bloggin’ wagon and update the rest of my site as well.

Though I try to provide a good mix of advanced marketing and design tips, it never hurts to go back to your basics and remember the fundamentals. So this installment is all about the things we should know when beginning a design project, but may have forgotten after getting in our daily routines…

Know Your Colorspace

An oversight here can easily ruin any print project, or cause a web projects colors to look funny. Always work in CMYK for print projects and RGB for web work. For photography work that’s going to press, I’ve found it’s best to make the CMYK conversion after doing any image manipulation or color correction. For fine art reproduction, talk to your printer first, some printers prefer to do the conversion themselves.

Resolution, Resolution, Resolution

Just like the relevance of the three “L’s” of real estate establish property value, resolution determines the quality of your reproductions. When starting any project, know it’s final output and set your resolution accordingly. This is primarily in relation to working in Photoshop. If you’re producing a graphic that is to be used in a print project, 300 dpi is generally the minimum resolution you’d want to use. Once again though, it’s never a bad idea to check with the company that going to be doing the printing for you. For example, newsprint generally prints at a resolution of 150 dpi because the paper that’s used in newsprint won’t hold an image much clearer than that, at the opposite end of the spectrum, some fine art publications request resolutions as high as 600 dpi. There are also some oddball requests out there as well. One printer I work with for glicée work requires 302.6 dpi resolution. Why? I have no clue, but just goes to show, when in doubt, ask your output provider what they prefer. It’ll save you money and headaches in the long run.

Use the right Program

Simple. Use a photo editing program such as Photoshop for editing pictures. Use a page layout program like InDesign for publication layouts. Each program is catered to a certain type of work. Sure, you can lay out a brochure in Photoshop, but that’s not what the program was designed for and as such, you’ll be causing yourself to do more work to get the project done than if you did it in a page layout application such as Quark or InDesign. The same goes for logo work, this is Illustrator’s forté, not Photoshop’s. I’m always amazed at what designers try to do in Photoshop when it’s clearly not what the application was designed for.

Remember the Bleeds!

If your document has color that is supposed to run to the edge of the finished sheet, you need to make your artwork bigger than the actual finished size. For example, if you’re creating an 11 x 8.5″ trifold brochure that has a graphic taking up the entire background, your artwork should be 11.25 x 8.75″. The reasoning for this is that your printer will be printing your brochure on a piece of paper larger than 11 x 8.5″ and then cutting it down to size. The .25″ allowance is called a bleed and ensures that should the paper shift during the cutting process, there will be no white fringe at the edge of the paper.

Preflight, Package, Send

Probably the biggest faux pas I’ve seen from a disappointly large number of designers is submitting artwork without preflighting. All page layout programs worth having include a Preflight tool. Preflighting simply checks your document to make sure you’ve got all your art in the right colorspace, resolution, all fonts are either embedded or available for packaging (not copyright protected) and all links are up to date. Running a preflight on your document will instantly tell you if there are any problems with your files and what you need to do to fix them. Again, saving you time, money and headaches with your output provider. Packaging is done after preflighting. Packaging your document places a copy of your working page layout file, all included fonts and graphics as well as a .txt file containing any special instructions and your contact information in one folder. Essentially creating a copy of all your working documents in one location for you to stuff (or zip, depending on your platform preference) and send to your output provider.It may seem elementary to the seasoned professional, but in my experience working with other designers and marketers, these are the steps most often overlooked in many, many projects.

Like It? Share It!

Hide Sites

Sure, any of us can open a web page in our favorite browser, go File>Print and print what’s on the screen to our desktop printer. It looks OK, you can pass it around to your friends, read it, admire the super saturated colors your uncalibrated inkjet gives and throw it in the shredder. All’s well and good.

Ever look closely at the pictures and graphics after they’re printed though? Notice the graininess of the photographs and logos, and in some cases even the text? Whatever, right?

But you really like the picture they used of the close-up of the model’s face and want to incorporate it into your next mail piece that’s going to be about a new type of makeup you’re promoting.

Uh-oh… Here’s where that next project starts to fall apart. Get a cup of coffee for this post, put on your thinking caps – and for those that may not be very technically inclined, this one could be a doozy.

Without fail, at least once a month or so, I’ll take on an assignment from a client who claims to have most all the artwork “ready to go” and all I have to do is do the final “sprucing up” to get the project ready for the printer.

So the client uploads the files and lets me know the project is “ready to go.”

It never takes long after opening files to realize that the “ready to go” artwork has photography and logos that have been plucked from a website. Any designer worth his salt knows that (in most cases) it’s not possible to repurpose artwork designed for web use to print. There are a couple of occassions where this isn’t entirely the case, but these aren’t the norm, we’ll get to those later. There are, however, many factors that make this task of repurposing fruitless; in this take, we’re going to discuss resolution:

Resolution
No, I’m not talking about the things you avoid making and end up not doing at the first of the year. This time we’re talking image size…

Artwork can be “measured” in a variety of ways. When talking about images displayed on your computer, an image’s resolution is described in PPI, or pixels per inch. A pixel is the smallest single complete sample of an image and is made up of three smaller color emiters; one red, one green, on blue… More on that later.

Most monitors display images at 72 ppi, meaning for every inch of image you see, there are 72 pixels of image in each line. Some newer monitors are capable of displaying images at 96 ppi or even up to 160 ppi. The vast majority, however, are only capable of reproducing at a lowly 72 ppi, which to the naked eye can appear jagged and gradients look choppy and not so smooth.

However, despite being not as good a reproduction, web graphics are made at 72 ppi in order to keep the file size to a minimum to keep you from waiting for them to load while you visit a website.

In print, images are measured in DPI, or dots per inch. Commercial printers will usually require that all art submitted for a print project be a minimum of 300 dpi at finished print size. This simply means that if you’d like a photograph printed at 8 x 10″, the file you submit needs to be at least 8 x 10″ big at a resolution of 300 dpi. Simple enough, right?

Well, it should be… Only problem is, that graphic you love on such and such’s website is 4 x 3″ at 72 ppi, which when coverted to you printer’s specs of 300 dpi shrinks to a measly .96 x .72.” Barely the size of a postage stamp!

Why is this? Print resolution is nearly quadruple that which is required for the Internet, so when you transpose an image for use from the web to a print media, it’s physical size is effectively quartered…

Here’s a 4 x 3″ sample of a web graphic like I mentioned above:

Now here is the same image after it’s been converted to print resolution:

Ok, surely a number of you are saying, “whatever Chris, all I have to do is stretch it out to fill the space I need.”

Sure you can do that, but what you’ll end up printing will look something like this:

Yuck…

The simple way to avoid this? Start with high resolution (300 dpi) images that are the size you want them to be printed, or larger.

Image Scalers:
Yes there are some ways to enlarge an image to larger than its original size, but understand that all pixel-based images contain a finite amount of data, regardless of whether they were shot with a digital camera or scanned from hard copy. When you enlarge an image, you’re essentially making up data to fill the gaps where new pixels will be created. You may be able to acheive an enlarged version of the image you want to have printed at the required 300 dpi, but no enlarged image will ever look as clear or sharp or has as smooth a color range as the original.

You can always go smaller and retain all your image clarity, but not the other way ’round.

So, long story short. If you’ve found art you want to reproduce in print, or you’re developing a website that contains elements you may want to incorporate into a print advertising campaign, remember resolution!

Like It? Share It!

Hide Sites

Well, the new look is getting closer to completion… Version 8.0 of this site is well on it’s way! I’ve updated just the blog section for now. It’ll be the easiest. I’ve still got some CSS tweaking to do in order to get everything exactly how I want it, but so far I’m digging it.

I’m not huge on the new “Web 2.0″ look for the most part, but there are some things about it that I do like and will implement further as I have time.

All in all, my hopes are that the site will be much cleaner, easier to navigate and focus on content rather than mostly graphics. Loads should be faster and as always, hopefully more usable for everyone (especially my clients).

It’s late. I’m calling it a night.

Like It? Share It!

Hide Sites