WebDesign&Such

Here’s a quick way to further enhance the branding of your website. If you don’t have an iPhone go get one. Then try bookmarking your website; (go to a website in your iPhone Safari browser, hit the + symbol, and hit “Add Bookmark“). What this does is take a small screenshot of the webpage and add it to your iPhone, right net to the other icons you have.

Well forget that, now we can make custom icons, so when somebody bookmarks your website, the icon is one that you actually created! As a designer I might be a little bit TOO excited about this, but hey, this is the stuff I live for. You can see in the above image the two icons I’ve created for my websites, WebDesignAndSuch and BeantownDesign. So now the icons match the favicons of my websites, and I can just touch them to launch my websites on my iPhone.

Keep reading to see how to create your own iPhone icons.
Continue reading

Using an unordered list is a simple and easy to style method of creating a navigation bar. Now with CSS3 and round corners created by the browser, it’s even easier to make a nice and clean nav. I introduced CSS3’s border-radius in a previous post, located here.

Check out the example I created, and then keep reading to find out how to create the above nav with nothing more than some CSS.

View Demo
Continue reading

So you know what a favicon is..right? At least pretend you know what it is.. it’s the little picture that shows up in your browser bar right next to the domain name of the website you’re on. In this example you can see how the WebDesign&Such favicon appears in the browser bar and in the Firefox tab. You can also see the Smashing Magazine favicon (free shout for those guys).

If you need to know how to add a regular favicon to your post or Wordpress blog, I covered this in a previous post. Check it out here, there is also a link to the Photoshop plugin that you need to create the ico file.

The topic I’m going to cover today is slightly different however, I’m going to show you how to make an animated favicon.. niiiice! Here’s an example of an animated favicon, this is the favicon I used on a previous version of BeantownDesign.com

Continue reading

On my portfolio website I have an About page, where I explain… who I am of course! So I have a picture of myself in the sidebar, but got the idea that it’d be nice to have the picture change randomly on page load. I looked around at a few different options. Some were Javascript, some were PHP. It wasn’t worth turning the page into a PHP page just for this effect, so I went with Javascript. There are a lot of different options, but here’s the one I went with.

Continue reading

Here’s an interesting way to add a CSS stylesheet switcher to your website. I’ve used stylesheet switchers in the past, but this one is different. In the past I had a button to press, which in turn switched the stylesheet of the page. This one switches the sheet at a certain time of day, which I think is pretty cool. My website uses clouds in the header, so it was just begging for me to make a “night” version of the header which would automatically switch on at night.

Continue reading

Here’s a problem I came across for the first time the other day. If you code CSS / XHTML, you most likely are familiar with the Superscript  and Subscript  tags. While coding a site I used the Superscript tag, but I noticed a problem when viewing the page in browsers. The problem was that by pushing the text above the line (Superscript), the spacing in between the lines (line-height) was uneven; the Superscript characters were pushing the line of text it was in further away from the line above it.

Example:

Continue reading

If you’re a webdesigner you most likely use Photoshop to create mockups of webpage designs for your clients. One technique I use in a lot of my website designs is dotted borders. They add a lot more visual interest than a regular underline, and work great to break-up sections of content.

So it’s easy enough to create a dotted line with CSS for the web, but how do you create a dotted line in Photoshop for your mockups? It’s actually rather simple; (as anything is when you know how I suppose).

Continue reading

The other day I was cutting and coding a website for a bank. One feature that was in the header was the current date, which would update daily (duh). I know in a previous project I had done this with Javascipt, so I back-tracked and got the code I used before. Here is the code, which will print the date on your web page in the following format:
July 18, 2009

The first step is to link your XHTML page to the external Javascript page, which has the code which will make it all happen. Paste the code below in the Head of your page.

Link to external Javascript File

<script type="text/javascript" src="js/date.js"></script>

Continue reading

Apple is known for their clean designs, both in their products, and the way they display these products. One of the effects they have used a lot is displaying their images with a reflection of the product below it. When used correctly, this is a very simple, clean way to display products.

I’m sure there are plenty of ways to create this, but I’ll show you the way I do it.

Continue reading

I recently created this website for Professional Makeup artist Dani Wagener of Boston, Mass. When I was designing this site I decided to try out a technique I stumbled across: making fading link colors on rollovers. What I mean by this is that when you roll over the main navigation the links fade from gray to blue; instead of just switching right to the color like a CSS rollover would do. Check out the final result, and then I’ll explain how to do this effect in Dreamweaver. DaniWagener.com

Continue reading

Digital cameras are so inexpensive now that there is no reason to not be taking photos at high resolutions. But what good is having these large photos when you need to make them tiny anyway to put them online?

I’ll show you a method of taking a collection of large photos and turning them into a panorama. Once you have a large panorama put together, there is still the problem of being able to put it online for others to use. You don’t want to have to make it 900px wide.. because obviously you will lose all the quality. Uploading it as a huge image file and having a scroll bar is no good, who is going to wait for that to load? I’ll show you the perfect solution to this problem.

Step 1 – Take Photos

Well you’re going to need photos to make a panorama! You can use a tripod with a camera, and take multiple photos as you turn the camera around until you reach the original position. Make sure to overlap the photos as you take them so there will be somewhere to blend. If you don’t care about them being perfect, or you don’t have a tripod on you, just hold it as still as you can, and turn in a circle as you take pictures. That’s the method I used when I took all these photos in St. Maarten last year. I actually like the effect it gives not having the top and bottom edges lined up, (you’ll see what I mean soon).

Step 2 – Creating the Panorama

Continue reading

I don’t know about you, but I read a lot of different forums and blogs. I’m always fascinated by peoples avatars, gravatars, etc. I’ve noticed recently a lot of people have these little cartoon caricatures of themselves. Could they all be that good at art? Not likely.

Then the other day I stumbled across how they are creating them. I’ll show you how here.. and even if you don’t care about having an avatar of yourself, it’s worth checking this free program out.

I mean, who doesn’t want a little cartoon self?

Continue reading

First off.. what is a FAVICON?

A Favicon is the little picture that shows up next to the domain name in your web browser.

WD&S Favicon

Beantown Design Favicon

Read on to find out how to create your own Favicon, and add it to your website, or Wordpress Blog.

Continue reading