Since we just discussed using frameworks in class I thought Frameworks for Designers was a good article for you to review. It discusses the benefits of developing a framework and goes into some detail on how to develop your own.
Vitamin, a site for designers and developers, has a great feature article on Creating Sexy Style Sheets which outlines 10 tips for writing well structured and easy to understand style sheets.
While at Vitamin, take a look at the article Make Your Site Mobile Friendly which offers great tips for writing and testing CSS rules for handheld devices.
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!!!
Grid systems allow a Web developer to layout pages in an organized and easy to read manner. There are many articles on the Web about using grid systems and also many tools for designing with grids. I thought I would outline some of the articles and tools that you might find useful:
A good place to start learning about grid systems is the article Grids: an invisible foundation at Ideabook.com. This is an easy to understand, 10 minute overview of how grid systems work. GRIDS MAKE EYES HAPPY: HOW TO USE GRIDS is also an informative read. Designing with a Grid also offers a good introduction to using grids and a sample grid PSD (Photoshop) file.
Tutorial Blog - A roundup of the best articles on grid systems. See article: Grid systems in Web Design
Web Style Guide - An easy to understand introduction to using a grid system for most new designers. See article: Design grids for Web pages
DesignbyGrid.com - Is an entire site devoted to using grid systems for design. There are many interesting and informative articles at this site in addition to examples.
ESWAT - This framework is meant to remove the hassle of recreating the same folders, HTML tags, CSS rules, Photoshop guides, etc. for every new project, and help create grid-based layouts in Photoshop to boot.
See article: ESWAT web project framework
Smiley Cat Web Design - Here you can download a gif or png file of a grid that you can attach to any Web page you are developing as a background image. This grid will help you to layout objects precisely. See article: Using a Background Image Grid to Lay Out Your Web Site
Air Bag Industries - Has a terrific ruler that you can download and apply with CSS as a background image on any element. See article: Ruler
Mark Boulton - Has numerous articles on grid systems including Why Use a Grid and a Five Simple Steps to Designing a Grid System.
Be sure to read the article Oh Yeeaahh! at Subtraction which is about redesigning a familiar web site with a grid based system. This article includes an excellent, 152 page presentation, Grids are Good, to read. (Please do not print this presentation in our temporary class)
If you haven’t found enough grids to work with either as background images or in your favorite image editing software try Grid Designer to generate a grid with your own specifications.
Finally, there are several frameworks available for use by developers. Blueprintcss by Google (tutorial) and Yahoo! UI are two framework sites to help you to get a head start on your Web development process.
PSPad Editor is a feature rich text editor that can be used to write XHTML and it will install and run on a Flash drive. PSPad integrates well with TopStyle Lite CSS editor (download link) which can also be installed to a Flash drive.
If you’re looking for additional portable applications try The Portable Freeware Collection or Pendriveapps.com. I picked up Opera portable and Wink, a great screen capture utility at Pendriveapps.com. There are also lists of portable applications at Quate News Net, Makeuseof.com and tinyapps.org.
Remember you can use Google to search for additional applications that you can install on your portable device. Try searching +”application name” +portable.
Don’t: Overlook the Power of the Web to Sell Yourself
There are numerous options available on the Internet for promoting yourself to employers. Don’t overlook blogs and your own resume web site as unique ways to reach out to potential employers.
“Every job seeker should have a blog and a keyword-rich resume on their own web site,” says Montford. “You can blog about your industry and comment on articles and issues related to your field. Just remember to keep your comments positive.”
Continue reading this article at Yahoo Hot Jobs
One of the things that we will work on while we are temporarily conducting class in Antioch is to create a blog or Web log. If you would like to start exploring creating a free blog now, visit http://wordpress.com/.
While newspapers and networking still play an important role in looking for work, the Internet is now a vital component in any job search.
According to a Gad Levanon, economist at the Conference Board, “The Internet has become the most popular method of job searching.” A recent survey by the Conference Board, the world’s leading business membership and research organization, revealed that the Internet isn’t only being used by more job seekers — it’s being used for a variety of job search functions.
Read on for some ideas as to how you can make the most of the Web’s potential in your next job search.
There is an interesting article at Yahoo Hot Jobs on why now is the prime time to step up your job search.
According to conventional wisdom, there’s no worse time to search for a job than when the year is winding down. But sometimes conventional wisdom isn’t entirely accurate.
The truth is that the end of the year may be the best time to find a new job. Here are five reasons:
1. You face less competition. Buying into popular theory, many job seekers halt their quests for employment in November and December, choosing to save their efforts for when the calendar changes. But take a glimpse at the want ads, and you’ll see that employers haven’t stopped looking for talent. With fewer candidates vying for the same number of positions, you may have an edge over the competition, unlike no other time during the year.