This is an amusing, yet interesting way of creating the worn look in Adobe Illustrator and Photoshop. Normally I keep my design digital, but sometimes it is fun to experiment with real-world techniques.
April 5th, 2006
This excellent little Sitepoint tutorial can get anyone with a basic knowledge of PHP started consuming XML/RSS feeds in short order! Includes a working example and PHP code for download.
February 23rd, 2006
Recently, I started designing Web sites based on Dreamweaver templates. It was something I avoided as long as I could since I prefer to create my own PHP driven templates. They are simple and never break!
Since Dreamweaver’s internal CSS rendering engine differs from those in Web browsers, the folks at Macromedia kindly created something called design-time stylesheets that can be used to make things look attractive and useful as clients maintain their pages.
There is a major drawback. When I create a template, I expect the behavior emulated in that template to be passed to any page created with it. Reasonable right? Design-time stylesheets, however, cannot be passed on to child pages at present.
What this means is that my carefully crafted Dreamweaver CSS hacks will not grace new pages created by clients. I don’t expect clients to have to learn how to add design-time stylesheets, but will need to alter my expectations for now.
Macromedia, are you listening? Please create persistent design-time stylesheets so CSS Web designers can avoid headaches!
By the way, Stephanie Sullivan at Community MX says, “Paul Boon created an extension at CMX that allows you to put it on a whole group of pages (or entire site) at once.” This is part of a solution I suppose.
February 21st, 2006
When you want a default value to be removed when a user selects a form field to enter some text, you don’t need to go out searching for a ten line script someone has generously distributed online. While there may be merit in other ways of doing this, there is one way that only requires a single line of code.
For each field that you want to clear the initial value add the following event handler to the input element:
onfocus="this.value=''"
For more on web forms visit W3Schools.com and scroll part way down the page for the “forms and input” section.
There are, of course, better ways of doing this with unobtrusive Javascript and the DOM. This is intended as a stop gap solution, not a best practice.
June 22nd, 2005
Ok. You’re right. I admit that my mind is a sieve when it comes to some simple light scripting solutions. This one gets me every time. Whenever you want people to be able to get back to where they came from without any heavy lifting, you’ll probably rely on JavaScript. If you don’t have something right at your fingertips, you’ll search online and find a bunch of scripts demanding a copyright acknowledgement and requiring a script insert in your page’s head area. But there is another way!
All you need is a bit of JavaScript magic. Your link needs the following code:
This should do the trick. Of course, change the text in the link to whatever you want to say.
It goes without saying that any browser that does not support Javascript will be left helpless and that there might be better ways to achieve this referral link. PHP offers the predefined variable, HTTP_REFERER, but cautions against its use because it is set by the user agent and is a bit unreliable. I know of no better alternatives right now.
An open question: Is there a better way to create referral links that does not rely on Javascript or PHP’s unreliable user agent reporting capabilities?
June 22nd, 2005
I have been puzzled by the way IE displays list bullets beside left floated images for some time. Actually, doesn’t display list list bullets, is more accurately put. The list bullets on unordered lists (UL) and numbers on ordered lists (OL) are hidded behind the floated image. My usual response has been to add a massive amount of margin or padding to the floated image, but this is unsightly. Today, I devised a workaround that has its weaknesses, but at least seems to render consistently across browsers.
I begin by setting margin and padding to zero on the lists (UL and OL) to help things render equitably across browsers. Then I declare all margins on the list items (LI). This should even out cross-browser problems. The final rule is a class that can be applied to the list (UL or OL) and the resulting float causes everything to render beautifully in IE. Though the float causes real display problems in other browsers, the IE Only Hack hides it effectively.
ul, ol {margin:0;padding:0;}
ul li, ol li {margin:0 2em 0 2.25em;padding:0;}
* html .byfloatedimage{float: left;} /* IE Only Hack */
If you have any improvements on this method, or one that works more elegantly, please post it below!
1 comment June 17th, 2005
If you have ever designed a web page with an image larger than approximately 200 pixels square, you may be wondering why a small toolbar appears every time you mouse over your image. Often, the last thing you want your visitors to do is to download your image, save it or print it. A designer wants them to focus on the content of the image and to respond to it rather than being distracted by an image toolbar.
Fortunately, there is an easy fix. Between the head tags of your page, just insert the following XHTML code:
If you are using HTML code, modify the snippet as follows:
2 comments June 13th, 2005
Prerequisites: This tutorial assumes that you are able to open an image in Photoshop, are a fluent user of your chosen operating system, and are using Photoshop 7. All screenshots are from Photoshop 7 on Windows XP.
Shortcuts: When there is a Photoshop Shortcut available, I will include it after the action in parentheses.
What does it mean to “White Point” an image? It is common practice to take photographs without proper lighting. As a result often the image will either be over-exposed (for which there is no remedy) or it will have a gray cast due to under-exposure (for which there is no true fix, but Photoshop will allow us to fake it). White Pointing an image refers to the process of making the white areas of a photo truly white or correcting the highlights in an image.
This photo courtesy of Helen Condon of Adirondack Rug Braiding, designer of high quality hand braided wool rugs.
See my post, “Cropping an Image in Photoshop 7” on how to do this if you are unclear.
In order to protect your image from JPEG compression artifacts, it is best to save the open JPEG image as a new file in PSD format as discussed in my post, “Cropping an Image in Photoshop 7.”
It is a good practice to develop a naming system related to the purpose of the layer.
The Curves Tool [Image 1] is an excellent way to manipulate images. It is also easy to overdo the effects produced by the Curves Tool. Rather than to explain what the Curves Tool does, I want to give you a simple method to White Point your image. Feel free to experiment at much as you like.
Note: A good rule of thumb for natural results is to use only one point on the upper right of the grid. The more points used to divert the direction of the line, the less realistic your manipulation will be. This is a fun way to create low-quality “rock star” effects.
Before going on to something else, save your image by selecting File > Save [Ctrl S]. If you like your results but want to try for a different effect, start again by creating a new layer from the background and working through the tutorial again.
If you have questions while working on this tutorial, want to add some insightful comments that might help other readers, or want to ask Harvey a question, post a comment below.cities maps google street viewsearch ask.com engine2008 crv honda exllloyds tsb.combox orange reviews ps3number ga routing bank america ofliverpool news skyprecautions earthquake safetydean wiki howardtarget pharmacy 4 Map
2 comments January 29th, 2005
Prerequisites: This tutorial assumes that you are able to open an image in Photoshop, are a fluent user of your chosen operating system, and are using Photoshop 7. All screenshots are from Photoshop 7 on Windows XP.
Shortcuts: When there is a Photoshop Shortcut available, I will include it after the action in parentheses.
What does it mean to “crop” an image? When a photograph is not composed properly or you wish to change the composition of a photograph by eliminating portions of the image, the easiest tool for the job is Photoshop’s Crop Tool.
Note: By default, the Toolbar has tool tips (pop-up messages describing the tool) enabled. If you mouse over the symbols on the toolbar, a small tool tip will appear informing you of the name of the tool. This can be helpful if you are looking for a tool and cannot remember what the symbol looked like from a previous Photoshop session.
Though for the purposes of this tutorial I assume you know how to open a file, I will go over the steps briefly.
In order to protect your original image, it is best to save the open image as a new file. This means that your destructive edits will be performed on the new image and the old will be untouched.
Choose the Crop Tool [Image 2] by clicking on it.
Rotate the marquee if desired. This is the most exacting part. You must pull your mouse pointer away from the handles a short distance. When you see the rotate symbol 
, click and drag to rotate the marquee.
Though you might find this frustrating at first, play with the mouse and try different distances from the marquee until you see the mouse pointer change to the rotate symbol
Sometimes rotating the marquee can alter a photograph’s composition more than you might expect. Perhaps this aspect of cropping a photograph could be referred to as taking a photo within a photo!
Having selected a new composition you like, press Enter to commit the Crop.
If you have questions while working on this tutorial, want to add some insightful comments that might help other readers, or want to ask Harvey a question, post a comment below.
3 comments January 28th, 2005
Consuming the NOAA RSS weather conditions feed with Bigbold RSS digest.
Continue Reading 3 comments January 6th, 2005
CSS Web design, e-commerce Web design, and internet marketing issues from the desk of Harvey A. Ramer at Design Delineations.
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « Apr | ||||||
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 | |