Vandelay Web Site Design has compiled a list of 25 Beautifully Colorful Websites. In addition to screen captures of each site, there are links to the original sites so you can check them out.
Check out Splashup, an online image editor and creator. This is a Web based image editor, no software installation is required. With Splashup you can even create and edit images with multiple layers. This online image editor even has filters and layer effects. Splashup can be used to create Web graphics and/or to edit digital photos. Splashup is very easy to use and definitely worth bookmarking.
Tom asked about making the Google logo. Here is a tutorial for making the plain Google logo using bevel and emboss techniques:
Your Own Google Logo from LOGOogle
You can view all of the different Google Doodles at Google’s Web site.
Happy holidays to all! See you in Antioch in 2007!!!!
Gradients are used a lot on Web sites to create the illusion of 3D or depth. Here are some tutorials for creating gradients in both Photoshop.
A Gradient Tutorial from the 9rules.com Blog - Simple method for creating a realistic looking gradient. Note: If you print this article, please print only pages 1-5 since the rest of the pages are comments about the tutorial. You can print a specific range of pages by click File > Print > Pages and typing 1-5 in the Pages box.
Adobe Photoshop CS3 Style Icons from Team Tutorials - Simple tutorial for creating icons that look like the new Adobe CS3 icons.
Creating the Photoshop CS3 Icon Tutorial from TechTut - This is a fun tutorial that involves gradients, glows, and several other Photoshop tools. It’s a bit more complex than the icons tutorial. We will work through this tutorial in class and I will handout printed copies of the tutorial for your reference.
Today we will work on creating simple vertical, horizontal, and diagonal striped background images in Photoshop. These background images can be used as backgrounds for pages, paragraphs, headings, and other elements.
Creating horizontal stripes
In Photoshop click File > New
Set the Width of the image to 1 pixel
Set the Height of the image to 4 pixels (the height controls the amount of space between stripes. The higher the number the more space between each stripe).
Set the Background to Transparent
This is going to create a very tiny image. You don’t need a huge image to create a nice background because you can repeat the background with CSS.
Press CTRL and + on your keyboard about six times to zoom in on the image. Still pretty small, eh? That’s ok, you don’t need to see too much of the image to create the background, but if it’s really too small continue to zoom in until you feel comfortable with your view.
Click the Foreground color chip and select a very light color for a more subtle stripe. I selected a very light shade of green.
Select the Pencil tool located in the Brush group. If necessary, hold down your left mouse button on the bottom, right corner of the Brush tool until the flyout appears. Click the Pencil tool.
By default the Pencil tool has a 1 pixel diameter. You can check the diameter in the toolbar below the menu at the top of the Photoshop window.
Position your cursor at the very bottom of the image as illustrated in the image to the right and click once to paint the area. The image to the left illustrates the color at the bottom of the image - this image is zoomed in by 3200%.
Time to save your image as a transparent gif file. Click File > Save for Web or Save for Web & Devices depending on the version of Photoshop you’re using. Set the file type to Gif (it may be set as JPEG), make sure that Transparency is checked, set the colors to 2 since you’re only using one color in the image. It’s important to adjust the number of colors used on a GIF image since the fewer the colors the smaller the file size. Click Save. Save the image into the images folder of your site.
This very small image will repeat across and down the element that you apply it to with CSS, creating stripes across the background of the element.
You can add this image as a background to most elements. Below is the code for adding the image to the background of the page.
body {
background: url(../images/greenstripe.gif);
}
You could also apply it to the background of an h1 element like this:
h1 {
background: url(../images/greenstripe.gif);
}
Because you don’t set any repeat properties the background image automatically repeats across and down the page or element. This is the default behavior for a background image.
You can use this same technique to create vertical stripes by creating a 4 pixel wide and 1 pixel high image and painting the leftmost pixel. Try adjusting the size of the image and the size of the pencil to see what different stripe variations you can come up with.
Inspiration for this short tutorial came from the book The Photoshop Anthology by Corrie Haffly. This book is filled with great techniques for creating Web graphics.
If you don’t have Photoshop there are several Web sites that will create stripe images for you. Try Stripemania and Stripe Generator.
I’ve got to run, my Labrador is eating my yellow stickies!!!
I’ve been writing short articles for the Acalanes High School class; I thought I would repost this color article here for the adult program.
Any time you start to build a web site you need to determine who your audience will be. Do you have an international audience? Are they primarily male or female? What is the age group of your primary audience? Is your audience affluent or working class? Who are you trying to get to purchase your merchandise or services? Who are you trying to reach? When you’re developing the overall site design and the color scheme you must take your audience preferences into consideration. In fact your audience should drive the design of the site. While hot pink or neon green may be your favorite color, your target audience may not appreciate your vivid choice. 
It’s important to research user preferences when developing a web site. Here are some resources on color preferences that will help you to create color schemes for the sites you develop:
Preferences - Favorite Color - discusses preferences by age group and gender. This is a good resource when you’re determining the color scheme for your web site. The Color Assignment web site is a great resource for learning more about color meanings and preferences. For example, orange is considered an appetite stimulant, we associate green with nature or money, and yellow may invoke caution. The Meaning of Colours is a wonderful color resource that discusses both color meaning and how different cultures perceive colors.
Once you determine a primary color you are going to use for your web site there are a variety of online color tools that you can use to develop a color scheme or palette for your web site. Lorelle on WordPress has the best list of color tools that I have found on the web. I really like the color blender; you can use this tool to create a nice palette of six colors.
Colors on web pages are usually identified by their hexadecimal value. For example, white is identified with the hex value of #ffffff, black is #000000, and blue is #0000ff. Look @ Wikipedia for a list of colors by color name, hexadecimal value, and RGB value.
Nature is another wonderful source of inspiration for color palettes. With a digital photo you can create a beautiful color palette using Photoshop.
Extra Resources:
Lorelle’s follow-up to this article
A GUIDE TO TOP COLOR COMBINATIONS IN WEB DESIGN Examples of Color Schemes and Color Combinations Within Designs - This is a really good article on color. Worth a read.
The use of colour - This article explains the use of colour, what colours signify, and how to find colours that fit with each other in your web pages. - added 6/29/06
CSS Font and Text Style Wizard - a wizard to experiment with font and text styles and generate sample CSS style source code. You may also like the HTML and CSS Table Border Style Wizard. Both of these wizards will generate CSS and HTML code for your web pages.
5 Great Background Masking Techniques in Photoshop - this article/tutorial outlines five methods for isolating and extracting objects from photos in Photoshop. The tutorial covers the following techniques:
500+ Colours - 500 colours by colour name, Hex value, RGB value and Microsoft Access code number. This site also offers a web safe color chart, web smart colors, information on monitor calibration, and other resources.
Typography Crash Course Roundup - lots of great typography resources.
G2G Exchange - With this website you can share files with others from your Gmail account. If you’re working on a collaborative project with other students in class this is a great way to share source files. If you don’t have a Gmail account, please let me know and I will send you an invite.
Open Source Web Design is a community of designers and site owners sharing free web design templates as well as web design information.
Designing a Rainbow - Sexy Hot Colors - Lorelle on WordPress has a wonderful roundup of color resources on her blog today. Yummy!
graphicPUSH offers a Blog Icon Pack, a set of free icons for your blog or web site. Take a look at the graphicPush archives, there are a lot of interesting and informative articles.
WordPress.com is now offering free, WordPress based, blog hosting accounts to all; you no longer need an invitation to sign-up. Speaking of WordPress, WordPress 2.0 Beta 1 is now available.
Brothercake has a free CSS based simple website menu that you can download, customize and use on your sites. This zip package includes the necessary CSS, JavaScript, and XHTML to create both horizontal and vertical list menus.
In addition to validating HTML, XHTML, and CSS the W3C now offers an RSS/Atom Feed Validator.
php-editors has a list of PHP editors which includes licensing information, platform specs, and user rankings.
Happy Monday everyone! Today we have new student orientation and an advisory committee meeting. Yikes! I would like to ask that you help each other, as I will be pretty tied up with both events. Here are a few web sites to visit while I’m helping our new classmates to get started:
Website Layout Cookbook - A visual reference for the web designer.
This website provides over 500 layouts to use in planning and designing websites. Great starting point!
37 Signals offers dozens of ideas for improving the holiday customer experience at your site.
Paul Stamatiou has an article HOW TO: Make a Blog Header Graphic that will teach you how to dress up a photo to use as a header graphic for a blog or web site.
If you’re thinking about a career as a freelance web designer read Bulletproof Web Design Contracts at SitePoint.com. This article outlines some of the hurdles a freelancer must face when working with clients.
For students who are learning Microsoft Office, you may want to take a look at some of the resources that I have created at http://www.wctrain.net.
How to write a resume offers free tips on resume writing, interviewing, and writing cover letters.
ColourMod offers color pickers in various flavors; for Mac users there is a widget (small helper application), Windows users can use a Konfabulator widget, and for all platforms there is a DHTML plugin. I downloaded and tried the Konfabulator widget and it’s very nice.
Andy Budd has posted his top 10 Macintosh freeware and shareware applications.