Mar 23
2009
It’s been quite awhile since I have put together a tutorial using Adobe Illustrator. I’ve been working with Illustrator a lot more recently and decided to share an easy tutorial that will give your text some depth and make it pop off the page/screen a little more. I’ve used a few of these techniques before in my tutorial “Feature Post Logo” that I wrote last Spring. In that tutorial the finishing touches showed how to use the pen tool to add some shading to the text. This tutorial shows you another technique to achieve a shadow on your text.
STEP ONE – Open Illustrator, Create a New Document and Set your Text
I started out by creating a new document. Most of the time I use graphics for the web; however, there are times when my clients require the artwork for business cards, letterhead or other print collateral. So, you might want to create the new document profile for “print”, so that you don’t have to recreate the artwork if the client needs it for print.
After you have setup your new document, grab your text tool and set your type. For this tutorial, I used one of the great script fonts from House Industries…Sign Painter (House Script). This font isn’t free, but if you look around free font sites like DaFont.com; you should find something that works for you. One thing to note, is that you can use any style of font…I just chose a script font for fun.
I set the font size to 100 point, so that I could shrink it down later on for use on the web. If you use a script font you may need to bring in your tracking a little bit so that the letters flow together a little better. If your layers palette isn’t open go to: Window > Layers and get it opened. Once it’s open click the arrow on the left of the layer name “Layer 1″ and make sure you see the text. You’ll need to see these items as we go along. Once you’re happy with the type…it’s time to move onto step number two. Read the rest of this entry »
5 Comments »
Feb 09
2009
Following in the footsteps of my recent 26 Creative Approaches to Footer Design post; I thought that it would be cool to post twenty-six creative header designs. Creative header designs are quickly becoming a growing trend in website design. The header is still the default area for placing logos and navigation, but the manner in which they are being placed is a different technique altogether. Some of the sites that I found included all types of different design elements, information and one even included an audio player.
The thing that sets all of these designs apart from most, is that they all use a great deal of CSS to pull off the multiple layers of images. Take Pixel Criminals for example (#16 on the list), the header alone consists of four or five different images layered together and the main image is over 500K…that’s insane! Many of the designs included in the list of twenty-six creative header designs have a desktop theme, giving the feeling of the site being a workspace. They are really unique designs and feature items like sticky notes for navigation, paper clips, coffee mugs and other workspace essentials. One of the designs has implemented Flash to simulate a steamy cup of Java…BRILLIANT!
If you’re a website designer like myself, or just a fan of creative website design; I’m sure you’ll enjoy my list of creative header designs…ENJOY!
26 Creative Approaches to Header Design
Koko Digital
Revolution Driving Tuition
Read the rest of this entry »
1 Comment »
Jan 25
2009
It’s been quite awhile since I’ve posted anything new under the Question and Answers with GrandmasterB category, but today I received a great question in my inbox that I had to share with you all. The email was from my good pal Mike Cusden (you all know him as Cuzzy) from Cuzoogle. He had run his site through the Markup Validation script at http://validator.w3.org/ and it came back with quite a few errors and warnings, his question follows:
Hey GrandmasterB, I ran my site through the Markup Validator and it came back with a ton of errors. Are any of these errors fixable? And is it something that’s relatively easy to fix?
My first reaction was one of surprise, because every theme that I design and develop is run through to make sure that the code is 100% XHTML compliant before turning it over to the client. After taking a look at the output from the validator I could see exactly what the issue was and what needed to be fixed. For reference, I have pasted a copy of the report link here for you to follow along.
The problem that Cuzzy is having is that his theme code isn’t the problem, it’s the advertising code that he’s placed on the site. If you look at the errors that appear on the Markup Validation page, you’ll notice that the first error states the following:
Line 15, Column 107: cannot generate system identifier for general entity “MarketPlace”.
…om/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822/US/cuzoogle-
Read the rest of this entry »
1 Comment »
Jan 13
2009
In my day-to-day routine, I spend a great deal of time looking for and searching out new trends in Web Design. Lately, I have noticed on trend that is “Swiffering” the Internet…creatively designed footers. Over the past year or so, it has become apparent that the footer of a website is no longer an afterthought or a throw away item. If you follow conventional design principals, you put everything that is deemed ‘unimportant’ at the bottom of the page. If you look at most websites, you’ll notice that many of them have extremely boring footer designs. Most of them you can’t even call “designs”; they’re just static information that they needed to put somewhere…look at my footer. Guilty as charged!
So why buck the system and spice up your footer design? Well, many designer are looking to the footer of the website as valuable real estate to put information that’s not quite top content, but definitely “important”. I have noticed that this trend of creative footer design is especially prominent in the blogging community. With all of the tools available to bloggers from social networking and bookmarking you often struggle to find places to make everything fit and make it look good. Many bloggers are using the footer to place elements like their Twitter updates, FLIKR photos, blog archives, recent comments, latest posts and other elements that are generally left for the sidebar.
I’ve been working on a project for a client that will incorporate a more creative footer design, and eventually when I have time to design version two of GrandmasterB.com; I will be concentrating a lot more time on a creative footer design for the site. I have compiled a list of 26 website designs with stunning and creative footer designs to show you what you can do with your footer. In looking at these sites and their designs, they bring a sense of completion to the site. The entire layout ties the design together and makes for a creative and killer site design. Each of these designs have a unique and creative approach to utilizing the footer as a place to showcase a number of items. Check them out, comment and let me know what you think.
26 Creative Approaches to Footer Design Gallery
CSS-Tricks
Carsonified – Events
Edgepoint Church Read the rest of this entry »
7 Comments »
Jan 12
2009
Over the weekend, I put the finishing touches on another custom WordPress theme by The BlogFixers. Jeff and I were commissioned by Matt from YepYep to do a complete overhaul of his existing site and create a new theme from the ground up. We worked with Matt throughout the entire process from the brainstorming phase (how many columns, column widths, etc), through the design phase with Photoshop comps and finally the finished product which went live yesterday. The cool thing about this project is this was my first attempt at developing a three column WordPress theme. While I worked on the design with Matt, Jeff worked on getting his server configurations tweaked and dealt with some issues that Matt was having with the WP Super-Cache plugin.
Upgrades and Improvements
As I already stated the new theme is three columns now, as opposed to the previous theme which had only two columns. When designing the new header section I wanted to give the logo a little more flare, so I decided to place it at a bit of an angle and added in some gradient effects. The background behind the logo got a bit of a treatment as well with the addition of a few carefully placed graphic elements. Moving down we created a navigation bar with buttons for the many featured categories of the site. Previously, Matt didn’t have any navigation…this was a big improvement.
Read the rest of this entry »
4 Comments »
I started out by creating a new document. Most of the time I use graphics for the web; however, there are times when my clients require the artwork for business cards, letterhead or other print collateral. So, you might want to create the new document profile for “print”, so that you don’t have to recreate the artwork if the client needs it for print.
