Classes

I learned something today

July 12, 2009 By CDT Leave a Comment

I have a new server now, so I am in the process of transferring all of my sites and my customer’s sites from the old hosting account to the new server. The old Dreamweaver sites all went smoothly as expected. The newer WordPress sites on the other hand, have been a little more challenging.

What I learned is there is a proper order for transferring WordPress sites to a new hosting account. It goes like this:

- Clean up existing Blog
- Use EXPORT tool from old wordpress
- Apply for new hosting (transfer existing domain)
- Propagate DNS nameservers
- Fresh install of WordPress (via Fantastico/Simplescripts/Independent) on new hosting
- Adjust permalinks on new hosting
- Use IMPORT tool in new wordpress
- Transfer via FTP images from wp_content/uploads
- Upload/Transfer current theme to new hosting
- Install new plugins to new hosting
- If necessary, meddle with .htaccess on new hosting

Thanks to Pigduck over at wordpress.org for that information.

Even if you do everything right and in the correct order, sometimes the themes cannot transfer correctly. Notice Custom Design Tool’s new design? It’s not the only site that is looking a tad bare today. This is my own custom child theme based on the Hybrid Theme framework.

Another thing I learned is that if you and tech support are having communication problems of any sort, get off the line with tech support immediately. It is just not worth the headache to try to work through it. Actually a dental implant procedure would be less stressful than a difficult tech support call.

Filed Under: Web Design Tagged With: hosting, transfer, Web Design, WordPress

Get rid of ugly yellow form fields with CSS

June 25, 2009 By CDT 5 Comments

Why do some fields in the online form have an ugly yellow background?

The culprit is the the Google toolbar that people often install in their browser. Part of the AutoFill feature is to highlight in yellow, #FFFF80, the fields that AutoFill can fill. These are form fields with names like “Name” and “Email”.

How do I get rid of the yellow?

You can specify a background color to the form field. Not just specify, but really, really specify with the !important css hack.

Add this code to your css:

/* non-yellow autocomplete */
input { background-color: #ffffff !important; }

Filed Under: Web Design Tagged With: css, form field, yellow

Typography Links

June 13, 2009 By CDT Leave a Comment

Design with type

Draw with type

I Love Typography

The Font Game. Fun!

I Love Typography

Typography Resources

Know Your Type
Identifont – identify fonts
What The Font – identify fonts
Max Kerning
How to Design a Font
A lovely wedding invite – all typography

Where to Buy Fonts

Free Fonts

You will find a lot of free fonts on the internet. Be careful using these for print without converting them to outlines first. You may get very unexpected results. If you have suggestions for free quality fonts, leave a link in the comments.

Tutorial: Turn any font into a sketch font

See more funny videos and funny pictures at CollegeHumor.

Filed Under: Graphic Design Tagged With: font, free font, typography

Everything you need to design a website

June 11, 2009 By CDT Leave a Comment

Assuming you have basic HTML/CSS skills, you can find everything you need on the web available at no cost to design a nice looking, professional website.

First we will start with some web design tutorials.

Next you need a grid system to hold up your site structure. Try the 960 Grid. Very good, very free.

960 Grid

Then you need a color palate. For the best custom color palates that always look good, use the Color Scheme Designer.

Color Scheme Designer

Now some graphics. Now that you have an awesome color theme, find some graphics to match. Some free stock photo resources are listed here.

Maybe you want a drop down menu. Try the suckerfish family. It has been built on and improved so many times, you should easily find something suitable. Here is a link to Son of Suckerfish.

How about some cute icons? RSS, twitter birds, download, etc. can all be found by the hundreds from any graphic or web designer that is trying to get web traffic. Smashing Magazine has a post with some really high quality free icons. Here is another good resource for free icons.

Free Icons

If your graphics and icons are looking a little clunky next to each other, you can edit them with Gimp. Gimp is a free image editing program along the lines of Photoshop.

Gimp

At this point, you have everything you need to be able to put together a reasonable looking, valid xhtml/css-based website.

W3C Validation Service

Filed Under: Web Design Tagged With: download, free, how to, Web Design, web site

Illustrator CS4 Tools Panel Overview

May 29, 2009 By CDT 2 Comments

Illustrator CS4 Tool Panel Overview

Filed Under: Adobe Illustrator Tagged With: featured, Illustrator CS4

How to add a transparent favicon

May 4, 2009 By CDT 3 Comments

Your favicon should be viewable across multiple browsers. Different browsers read things differently, so using two separate favicon images will assure the graphic will have a transparent background in all of them.

Create a new 16×16 pixel document with a transparent background in Photoshop. Draw or paste a graphic into the space. Part of a logo or image that carries the brand is best.

Save the file as Windows .ico format into the images folder of the website. In Photoshop CS4, the save as .ico format option is built in. CS3 and below requires an additional free plugin to have .ico as an available format.

Next, use the same imge and save for web. This time use a .png 8 format and 16 colors. Put it in the images folder again.

Put this code in the between the head tags of each page you want the favicon to show up on. If you are using a template or include file, better yet. You only have to do this once.

<link rel="shortcut icon" href="/http://yourdomain.com/images/favicon.png" 
type="image/x-icon" />
<link rel="shortcut icon" href="http://yourdomain.com/images/favicon.ico" />

That’s it! You have a new transparent favicon. If it isn’t working, make sure you uploaded all of the images and the pages.

Filed Under: Web Design Tagged With: favicon, featured, how to, transparent

Absolute vs. Relative Links

May 2, 2009 By CDT 1 Comment

A link which shows the full URL of the page being linked at. Some links only show relative link paths instead of having the entire reference URL within the a href tag. Due to canonicalization and hijacking related issues it is typically preferred to use absolute links over relative links.

Example absolute link

<a href=”http://customdesigntools.com/folder/filename.html”>Cool Stuff</a>

Example relative link

<a href=”../folder/filename.html”>Cool Stuff</a>

Filed Under: Web Design Tagged With: absolute, featured, Links, relative

Web Design Classes

October 15, 2008 By CDT 3 Comments

These classes are available through the Skills and Technology Training Center in Fargo, ND. Check the STTC schedule for class availability.

Dreamweaver
Photoshop Web Production

Web Design Links

These should help with learning web design.

W3

Dreamweaver Extensions

Browsers

CSS

Additional Resources

Suggestions?

If you know of a good resource that should be listed here, email me.

Filed Under: Web Design Tagged With: class, design, Links, web

Adobe Illustrator Class

October 15, 2008 By CDT Leave a Comment

These classes are available through the Skills and Technology Training Center in Fargo, ND. Check the STTC schedule for class availability. These links might be helpful in learning Graphic Design and working with Adobe Illustrator.

Mordy Golding’s Illustrator blogs:

http://rwillustrator.blogspot.com/
http://versioncue.blogspot.com/
http://designingformobile.blogspot.com/

Filed Under: Adobe Illustrator Tagged With: class, Illustrator

Digital Graphic Design Essentials

October 15, 2008 By CDT 2 Comments

This class is available through the Skills and Technology Training Center in Fargo, ND. Check the STTC schedule for class availability.

Covers various print and electronic mediums. The focus is on learning design and design techniques. Some of the topics covered are:

Design Method, sketching and comps, design rules
Print Design
Digital file formats
Typography
Color Theory, Color Psychology
Branding
Advertising

Principals of Design / Composition

Print Design

Digital File Formats

What is the difference between raster (bitmap) and vector?

Raster or Bitmap -> raster (bitmap) Vector – > vector

Typography

Color

Advertising

Videos

Artist Series
Stefan Sagmeister – happy

Legal

Filed Under: Graphic Design Tagged With: branding, class, Color Theory, composition, design, design rules, digital, golden mean, graphic, print design, typography

I learned something today

Get rid of ugly yellow form fields with CSS

Typography Links

Design with type

I Love Typography

The Font Game. Fun!

I Love Typography

Typography Resources

Where to Buy Fonts

Free Fonts

Everything you need to design a website

Illustrator CS4 Tools Panel Overview

How to add a transparent favicon

Absolute vs. Relative Links

Web Design Classes

Web Design Links

W3

Dreamweaver Extensions

Browsers

CSS

Additional Resources

Suggestions?

Adobe Illustrator Class

Digital Graphic Design Essentials

Principals of Design / Composition

Print Design

Digital File Formats

Typography

Color

Advertising

Recommended Reading

Videos

Legal

Tweets from @designerrss

Links

The Web Shoppe

I Love Typography

Typography Resources

Where to Buy Fonts

Free Fonts

Web Design Links

W3

Dreamweaver Extensions

Browsers

CSS

Additional Resources

Suggestions?

Principals of Design / Composition

Print Design

Digital File Formats

Typography

Color

Advertising

Recommended Reading

Videos

Legal

Tweets from @designerrss

Links

Popular Posts