DesignBash

Make a Favicon for your Blog – An Easy How To…

admin — Wed, 17 Mar 2010 20:27:37 +0000

In the world of modern web design, Favicons are considered one of the most important aspects of your website. Although it may only be 16px by 16px, the importance of this icon should not be underestimated. This is the type of polish that puts your site in a whole new league.

But really, they are kinda nice and having one makes your site seem just a little more professional. So today the gloves come off and we’re going to make a sweet favicon for an application I’ve been working on.

But Where do I Start?

The first step I like to take when making a favicon is to create a 16px by 16px Photoshop document – which is the standard favicon size. For this quick tutorial I already have a nice little logo created – and I’ll be using that to make my favicon.

Keep it Simple, Stupid

Because there is so little space to work with, it’s important to keep your favicon as simple as possible. My starting logo is a bit too busy to make into a favicon, plus favicons need to be square – so what I’ll probably do is lose the text and use either just the envelope edges and the heart.

My Starting Logo, I'll be losing the text and keep just the envelope and heart.

Some Playing Around

After playing around for 10-minutes in Photoshop, I quickly realized that 16-pixels is just too small to preserve the definition of the actual envelope. What I’ve ended up doing instead is using just the edges (red and blue stripes) of my envelope with a heart in the middle. A couple things I noticed as I did this:

When transforming things down in size, blacks will sometimes become a little too gray and need to be darkened (using the Photoshop burn tool).
Whatever you end up with, run the sharpen tool over it a few times. It really helps clear up any blurry edges that resulted from such a dramatic size reduction.

The final result looks something like this:

Next Up, Turn that PNG into an ICO file…

Now comes the easy part. First, save your favicon as a PNG file. PNG is better than JPG because it is a lossless format, and with such a small image, you cannot afford to lose any quality. Next, head over to this sweet favicon generator – the best tool I’ve found for converting images to the ICO favicon format. To be honest, I tried a few different sites and they all gave me problems except for this one.

Making it Display on Your Blog or Site

Once you have the ICO file on your computer, you need to rename it “favicon.ico”, anything else and it simply won’t work. Next you need to upload the icon to your public_html directory (it won’t work anywhere else). Finally, you’ll also need to include this small snippet of code in the of your HTML files:

If everything is setup properly you should now see a favicon when you refresh your site. I should mention that I did have a problem with Firefox not displaying the icon, but I think it was a caching issue because I verified it with this seositecheckup tool and everything seemed good!

Here is what it looks like using Safari

Rounded CSS Corners – The Basics

admin — Sun, 14 Feb 2010 21:04:50 +0000

For those of us who no longer want to support Microsoft’s lagging browsers the best (and fastest) way to create rounded corners is by using CSS3. Using CSS corners will dramatically reduce your development time while keeping your markup clean and flexible.

As it stands, rounded corners are currently supported in modern versions of Firefox, Safari, and Chrome. Unfortunately, you’ll need to use two different declarations to get all these browsers working. The basic declarations should look something like this:


/* Supported in Firefox */
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

/* Supported in Chrome and Safari */
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

The Rounded Example

Below you will find an example of rounded corners in action. If you’re using a modern browser you should see the grey box with rounded corners. (if using IE, I’ve put in a screenshot of what things look like when using a respectable browser)

.rounded {
width: 500px;
padding: 30px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

This paragraph is inside a rounded DIV

Screenshot Example For Internet Explorer (sigh…)

But What Does the W3C Say?

Due to the fact that border-radius is not officially supported by any browser, it might be a good idea to check out what the W3C has to say about the subject. I was surprised to see how detailed they were and I highly recommend checking out their official specs. As a reference, the official (but currently unsupported) declarations are:

border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

There are tons of neat variations you can do, but they go a little beyond the scope of this article. Check out the W3C specs for the full explanation, or, check out some of these links that do a good job documenting css rounded corners:

Rails Development Log – Live Environment

admin — Sat, 06 Feb 2010 17:49:47 +0000

I learned a little trick today that’s going to make my rails development much much easier than before. While I generally like to develop my applications on a local machine – I’ve recently started developing in a live (eg. www.myapp.com) environment.

One thing I was really missing was my faithful server output that I would constantly monitor. I could check every SQL query, which actions were getting triggered, and most importantly (IMO) – the params that were getting passed into my controllers.

Well finally I’ve found a solution (thanks to this link)!

Long story short – all you need to do is SSH into your hosting and then run the following command (from your application directory):

tail -f log/development.log

This will allow you to see the standard development.log in real time. Hope this helps someone as much as it helped me!

How to SSH using OSX and Terminal

admin — Fri, 29 Jan 2010 16:56:30 +0000

I know for many people this is a really really simple task, but I constantly find myself looking this up online and it usually takes me 5-10 minutes before I find a useful result. With this in mind, please enjoy the following snippet.

SSH, OSX and Terminal

I’ll retrace my exact steps here, including hot-keys. First we need to open up the terminal – a basic prompt interface that lives beneath all the bling of OSX. Rather than digging around in your applications folder, just hit apple-spacebar to open spotlight. Type “terminal” and it should show up right away.

Inside the Matrix (Terminal)

Now you can start to feel like a hacker. Thankfully, OSX ships with SSH pre-installed, which makes this tutorial very easy. To connect using SSH you need to type:

“SSH username@www.yourwebsite.com”

After pressing enter you’ll be prompted for two things… a password and a yes/no question asking if you want to add a record of the SSH connection (or something like that). While typing your password you can’t actually see the characters, but it is really working. Also, you need to write a full “yes” or “no” in response to the question…

That’s It!

You should be connected and ready to go. There are many different SSH commands, so I won’t go through those right now, but here are a few to get you started:

ls – Used to list the contents of a directory
cd .. – Used to go back (or up) one directory
cd directory/name – Used to navigate to a directory
exit – Used to end the SSH session
pwd – Prints the working directory

The Simplicity Revolution

admin — Fri, 22 Jan 2010 18:57:02 +0000

After posting a scathing review of the American Airlines website, Dustin Curtis received a personal response from one of the user experience architects who works on the AA design team. The response letter, titled “Dear Dustin Curtis“, tries to explain why the American Airlines website is so bad. The designer essentially blames the problems on the massive corporate infrastructure surrounding any design choices, and laments about the reviews and revisions that accompany all their work.

I would highly recommend reading this article, especially if you work in a large corporate environment. The follow-up response by Dustin is also really interesting, asking designers to take an introspective look at their taste, as well as blaming poor corporate leadership for bad design (taste).

But don’t take my word for it….

Prepare for your mind to be blown by reading Dear Dustin Curtis…

An Aside

This article also ended up leading me to the manifesto of 37signals, another life changing read.

Photoshop Offset Filter – Making Seamless Textures

admin — Wed, 20 Jan 2010 17:40:43 +0000

Today we will be working with the offset filter in Photoshop to help create a seamless textured pattern. If you ever find yourself trying to make repeatable patterns for the web, then you’ll definitely want to follow this quick tutorial. I’ll be using a random texture that I found somewhere on the internet, you can grab it here (click on the thumb for the full size):

Download Jute Texture

Step 1 – Setup Your Photoshop Document

Go ahead and create a new photoshop document that is 600px by 600px. Choosing a large tile size will make our background seem less tiled, but may require a little more work depending on the image your trying to make repeatable. Specifically, if your source image has a lot of color variation you might want to choose a smaller tile size to make things easier on yourself. The image we are using has a very consistent color scope, so our 600×600 tile size should be easy enough to work with.

Step 2 – Paste in the Jute Texture

Next you need to paste in the jute texture. I’ve oriented mine to the top left and scaled it down until it just fits the canvas. You’ll end up cutting off the right side of the image.

Step 3 – Using the Offset Filter

Now comes the fun part! With your texture layer selected, goto the top menu and choose Filter > Other > Offset. We want to offset our image horizontally and vertically by 300-pixels, allowing us to see where our pattern has its seams. After applying the filter you should see your texture now has 4 defined quadrants. In the next step we are going to clean those up and make our pattern seamless.

Step 4 – Smooth the Divisions

This is the hardest part of making seamless textures. We need to smooth out the dividing lines using photoshop’s many helpful tools. I’ve found two different ways to do this, but the method you use ultimately depends on the texture you’re working with. Some textures are really easy to turn into a pattern, other textures are almost impossible. This jute texture is relatively easy thanks to the consistent color, but there are a few tricks I used to get things just right.

Method #1 – (I found this works better for this texture)

Copy areas of the texture that have no seam and paste them (in a new layer) on top of the seams. Adding some feathering to your selection (around 5px) will make things a little smoother.
Use the eraser tool (using a soft & small setting) and erase the edges of your new layer.
You’ll find that the edges of your new layer look a little blurred and don’t really fit in… to fix this use the sharpen tool along the edge.

Method #2

Use the clone tool to remove the seams
If you find things are blurry use the sharpen tool to make things fit properly.

TIP: When you have a relativity seamless pattern you can use the burn and darken tools to make the lighting more standard…

It definitely takes a little time to get things perfect, but it’s worth it in the end. It took me around 20-minutes before I had a semi-perfect seamless texture. Below you’ll find the final image:

Download Seamless Jute Texture

Wooden Texture Pack – High Res

admin — Tue, 19 Jan 2010 02:22:12 +0000

Nothing to see here folks, just another entry in the wooden texture department. As always, please use these textures for anything you want, commercial or otherwise. They were taken in my home with my girlfriends Rebel and a sweet German tripod.

Enough talk, more wood texture!?! (click for full size)

If you make something out of these textures and want to share, I’d love to see your work…

The CSS Image Button – How To Make a Rollover

admin — Mon, 18 Jan 2010 22:24:04 +0000

Today we will be talking about CSS image buttons, something that every web developer needs to know and understand. It’s really amazing how much of a difference a simple button can make on your conversion rate. In fact, I came across this comprehensive post that deals with that particular subject, check it out. This post won’t focus so much on the particulars of a high-converting button, but it will teach you how to slap together a quick CSS button that uses an image as a background.

Step 1 – Make or Find a Button

For this tutorial I’ll be using my green glossy buttons from a previous freebie post. Feel free to download the source PSD and follow along, or just make your own button style.

Step 2 – Prepare the Button

Before we really get started, it’s important to know what size we want to make our button. For this example I’ll create a button that is quite large, I’m thinking around 300px by 60px in size. So go ahead and crate a new Photoshop document with the dimensions you want.

After you’ve created the document, import my button (or yours) and scale it up so that it fills almost the entire document. If you have a little extra space on the sides it’s not the end of the world, just make sure that your button is perfectly centred on the canvas. To centre somthing perfectly you just need to:

With your button folder/layer selected, use the marquee tool (m-key) to select the entire canvas (apple-a)
Without deselecting anything, choose the Move tool (v-key) and use the alignment tools in the top panel to centre your button vertically and horizontally.

A Perfectly Centred Button

Step 3 – Create a Rollover State

Next up we need to create a rollover state. Basically, we need to double our canvas size (vertically) and duplicate our button. From the top menu select Image > Canvas Size… and double the height of your canvas (120px if you’re following my example). Once your canvas size is doubled, divide it vertically with a horizontal guide.

Now you need to duplicate your button and centre it perfectly in the top section. The top button will be what our button looks like when you rollover, for now it looks the same as the bottom.

Next we add a rollover effect. If you’re using my buttons, you can open up the layer styles of the top button and slide the inner glow up to 75%. This will give our button a subtle glow effect when we hover over it.

With your button and rollover effect ready to go, you can now “save for web.” One important thing to consider here is what your background will be like. For my example I’ve made the background transparent and saved my buttons in PNG format. This means my buttons are not supported in IE6, but you could just as easily choose a background color and ditch the transparency, making your buttons IE6 friendly.

Step 4 – CSS Sprites and Some Basic HTML

Now comes the fun part, creating the button. First, we’ll start with some markup, a simple and humble link:

 My Glossy Button

I’ve given this link a class so that I can target it easier, but other than that it’s just a plain old link. Moving on let’s do some CSS magic. The basic idea is that we hide the link text using the text-indent property and give the link a background-image that only shows the non-rollover state. On hover we simply shift the background to show hover state, avoiding any loading time that is typical of CSS/Javascript image swaps.

a.button {
display: block;
width: 300px;
height: 60px;
text-indent: -999em;
background: url(css-glossy-rollover.png) 0px -60px no-repeat;
}

a.button:hover {
background-position: 0px 0px;
}

If you’ve done everything right the button should look something like this:

My Glossy Button

Twitter Background – How to Make a Custom Background

admin — Sat, 16 Jan 2010 19:18:13 +0000

This quick tutorial will run through the basic task of creating a custom twitter background. It’s really easy to do and makes your twitter page stand out from crowd. Whether you’re a business or an individual, if you use twitter at all it’s probably worth your time to make a custom background.

Step 1 – Size it Up

Before making a background we need to think about the dimensions of the twitter site. Basically, your background will be sitting behind a container that is 763 pixels wide. Furthermore, we need to remember to keep our background image under 800k in size.

Step 2 – Prepare the Photoshop Document

With our size restrictions in mind, lets go ahead and start creating a background. First, create a new document that is 1600px by 1200px in size at 72 DPI.

Step 3 – Put in Some Guides

The first thing I do when working in Photoshop is to place my guides. I first create a shape that is exactly 763-pixels and place it on the left side of the photoshop document. Twitter will justify (stick) your background to the left of the screen while allowing the main container to remain centred relative to your browser window. This makes it hard to know where to place your background elements, but you’ll probably want to place any important background elements within 150-pixels of the left side of the canvas.

Step 4 – Create a Mind Blowing Background

This tutorial is more about the technical aspects of making a twitter background, not so much the actual design work. But when creating your background it’s important to remember that your background should fade to a solid color, otherwise people with large screens could end up seeing unattractive “cut” lines. Here are the steps that I took to make my background “work”:

Created a nice background that has a radial gradient at the top
Applied a subtile background pattern
Used a masking layer to “fade out” the right and bottom edges of my pattern/gradient layers
Made a note of the solid color at the edges of my background (#481904 in my example).

Step 5 – Setup Twitter

After logging into twitter, head over to settings/design area. You’ll need to set your background color to whatever you noted in the last step and then upload your new fancy image.

I know this background isn’t “mind blowing”, but it’s cute and simple and a good example of what you can do.

If you’re interested, feel free to download the blank background and add your own name.

Click for the full size version

Giving Backgrounds Texture

admin — Thu, 14 Jan 2010 22:20:57 +0000

There is a neat little trick that most good web designers know and love, and it has to do with background textures and noise. I remember when I first started designing for the web, I would never use textures in my designs and was always left feeling like something was missing. A textured background, even when it’s very subtile, will give your site much more depth and feeling than a plan flat color or gradient. This quick example will use some simple noise to give a gradient background some extra depth. So let’s get started!

First Example – A Noisy Gradient

Step 1 – Create a New Document

Create a new web document that is 1200px by 1000px.

Step 2 – Choose a Nice Gradient Background

For this example I decided to do a nice bright-dark green gradient. Make sure it’s linear to make it easier to slice into HTML/CSS afterwards.

Step 3 – Add the Noise Layer

Next, add a new layer on top of your background layer. This will be our noise layer. Fill it in with total black and then go up to Filter > Noise > Add Noise. Use roughly the same settings that I use below:

You should end up with a really really noisy background.

Step 4 – Blending and Opacity

Next we need to change the blending mode and opacity to make our noise layer more palatable. First set the blending of the noise layer to Overlay. Next you need to bring the opacity down to somewhere between 1% and 20%, depending on how much noise you want. In my Example I used 5% opacity.

Your final background should end up looking something like this:

Click to See Full Size