Making Good Websites that Stand Out Websites,

Making Good Websites that Stand Out Websites,
there's literally billions of them out there in cyber-space. How many of them do you go to and just think this is boring, bland, or hard to use? It seems like too many to mention. So what makes a good website? I reckon it's about interaction. You've got to make the visitor interested. You've got to grab their attention. Many sites use plenty of bright and shiny gimmicks to attract you, but once you make it through to the content of the site it's just not worthy. A good site uses easy navigation, relevant content, and interactive media like comments and message boards. If you're fortunate, whoever builds your site may even have a few tricks up their sleeves to make it really fun with sound, video, and other interactive fun stuff. Do you want people to come to your site and then tell their friend and family about it? Do you want to have huge amounts of visitors? Do you want to succeed in making your dreams come to fruition on the Web? Make your website exciting! It might be easier said than done, but there are people around whose job it is to construct and design sites for a living. If you can afford it, go for the best. How great is it when you come across a site that has some special feature that you've never seen elsewhere? Isn't it great when you find a site that relates to one of your interests that is simple and easy to get to the information you want? If you want to have people to come back again and again, you've got to keep updating the content to keep it fresh and interesting. Have a way for people to communicate with yourself and others who are into the same things. E.G. Forums, message boards and comments. The aim is to catch the 'viewer's' interest. A lot of sites just look like giant advertisements and you have to search for the needle in the haystack to find out what the actual site is for. I know advertising is a way of making money, but if you want your site to have an authentic, respectable atmosphere that exudes a feeling of integrity, you better be careful. People are becoming wary of this consumer driven, mindless attack at the average civilian's wallet. Some people will automatically leave a site if a bunch of commercials pop-up on the screen. Pop-ups, don't even make me go there? So, the aim of the game is to make a site that offers the public to be part of the action as well as being a source of knowledge or information that is in demand. A simple to navigate, good 'feel', and if possible-innovative site is the means to becoming the popular Internet magnate you've always dreamed of becoming. Another important fact is the idea of 'you'. Your website is a chance to put your identity out there in the world. Be yourself. If you try to appeal to an audience in a way that doesn't reflect your true self, you're destined to fail. Be honest and speak from your real perspective on life. Give it to us from the heart.

Web Design Information

Making Good Websites that Stand Out
Websites, there's literally billions of them out there in cyber-space. How many of them do you go to and just think this is boring, bland, or hard to use? It seems like too many to mention. So what makes a good website? I reckon it's about interaction. You've got to make the visitor interested. You've got to grab their attention. Many sites use plenty of bright and shiny gimmicks to attract you, but once you make it through to the content of the site it's just not worthy. A good site uses easy navigation, relevant content, and interactive media like comments and message boards. If you're fortunate, whoever builds your site may even have a few tricks up their sleeves to make it really fun with sound, video, and other interactive fun stuff.
Do you want people to come to your site and then tell their friend and family about it? Do you want to have huge amounts of visitors? Do you want to succeed in making your dreams come to fruition on the Web? Make your website exciting! It might be easier said than done, but there are people around whose job it is to construct and design sites for a living. If you can afford it, go for the best. How great is it when you come across a site that has some special feature that you've never seen elsewhere? Isn't it great when you find a site that relates to one of your interests that is simple and easy to get to the information you want? If you want to have people to come back again and again, you've got to keep updating the content to keep it fresh and interesting. Have a way for people to communicate with yourself and others who are into the same things. E.G. Forums, message boards and comments. The aim is to catch the 'viewer's' interest. A lot of sites just look like giant advertisements and you have to search for the needle in the haystack to find out what the actual site is for. I know advertising is a way of making money, but if you want your site to have an authentic, respectable atmosphere that exudes a feeling of integrity, you better be careful. People are becoming wary of this consumer driven, mindless attack at the average civilian's wallet. Some people will automatically leave a site if a bunch of commercials pop-up on the screen. Pop-ups, don't even make me go there? So, the aim of the game is to make a site that offers the public to be part of the action as well as being a source of knowledge or information that is in demand. A simple to navigate, good 'feel', and if possible-innovative site is the means to becoming the popular Internet magnate you've always dreamed of becoming. Another important fact is the idea of 'you'. Your website is a chance to put your identity out there in the world. Be yourself. If you try to appeal to an audience in a way that doesn't reflect your true self, you're destined to fail. Be honest and speak from your real perspective on life. Give it to us from the heart.
How To Create A Stunning Drop Capital Effect On Your Web Pages
Drop Capitals are frequently used in many newspapers, books and magazines in the offline world. You will frequently see the large capital letter sinking down into the first paragraph of articles, stories and chapters in the majority of publications you come across.
The drop capital gives the page a nice finishing touch, and certainly adds a more professional looking feel.
Online, the drop capital looks just as good on web pages as it does in print. The only drawback is that you can easily get the whole effect wrong, and end up with a less than appealing result.
The wrong way...
When most people attempt to create a drop capital effect on a web page, they usually just enlarge the first letter by a few font sizes and make it bold.
If you do this on your own web page, you will notice that instead of a 'drop' capital effect, you end up with an odd looking letter which sticks up above the rest of the paragraph, and just looks out of place.
The right way...
There are essentially, two parts to creating the drop capital effect.
Step #1 -
You need to create a drop capital image using some graphic software.
You can use any standard piece of graphic software like Paint Shop Pro, Fireworks, or Photoshop.
The drop capital image should ideally be big enough to drop down between 2-4 lines of text, depending on your preference.
You should ensure that the top of your drop capital image is level with the top of the text next to it. The bottom of the image should also be level with the bottom of the lowest text next to it.
This is really the hardest part of creating a drop capital effect. It can be very easy to make the image just a bit too big, or a bit too small. You may find that it will take a bit of trial and error to make it look just right. However, the extra effort will pay off, as the end result will be worth waiting for.
One thing to note: As with any image, a drop capital image can slow a web page if the file size is too big. To help reduce the file size you should save it as a '.gif' image. For even better results you should try to optimize the '.gif' image as well by reducing the amount of colors being used.
Step #2
This step is the easiest bit?
Once you have created the drop capital image, all you have to do now is to insert it into your web page. You just add the image to the web page in the same way that you would with any other image on your page.
When you place it at the beginning of the paragraph, make sure you remember to delete the first letter of the normal text. Otherwise you will end up starting the paragraph with two of the same letter.
Align the image to the left
Initially, you will notice that the drop capital image just sits on top of the first line, instead of dropping down into it. Not for long!
All you have to do now, is align the image to the left, and you will see it drop down instantly into the paragraph.
If you are using a web page editor to create your web pages like Microsoft FrontPage or Macromedias Dreamweaver, aligning the image to the left is pretty easy.
In FrontPage:
Select the drop capital image by left clicking it once. Then click on the align to the left short cut icon in the top menu bar. Alternatively, you can select Format, then Position from the top menu. In the pop up window, select Align Left under Wrapping Style.
In Dreamweaver:
Select the drop capital image by left clicking it once. Then in the properties window, click on the arrow in the drop down menu next to Align, then select Left
If you are using a different web page editor, you should have a similar align option in the menu area. Alternatively, you edit the HTML code directly yourself. Just add the following command in between the brackets of the image tag:
align="left"
Thats literally all there is to it!
If you have multiple pages on your website, youll probably going to need to create a number of different drop capital images for each letter of the alphabet. The extra effort will be worthwhile as you will end up with a much more professional looking website.

Graphic Design Tips 2

Create italic Text in Photoshop 5
Although Adobe brought many improvements to Photoshop 5, one of the main complaints is that you can no longer create bold or italic text from the Text dialog box without having the bold or italic version of a font installed. This tutorial remedies this with a simple way to create an italic font without needing to have the italic version of a font installed.
1. In Photoshop, select File/New. Create your text using the Type tool. Right Mouse click (Windows) or Control+ Mouse Click (Mac) and select Render Text.
2. Select the layer that the type is on. Select Edit/Transform/Numeric. In the Skew section of the dialog box, enter -15. If you want to make the font tilt less, put in a smaller number. If you want the font to lean more, put in a larger number, like -30.

3. Select Image/Mode/Indexed and save this as a gif file if you'll be using this for the web. Create Groovy Two Toned, Outlined Text
This tutorial will teach you how to create a bold, dramatic text effect for your web site. You have probably seen this effect used in print and on television, especially for that 1960's look. Step by step instructions are given for Photoshop versions 3, 4 and 5.
CreateTwo Toned Type in Photoshop 3, Photoshop 4, or Photoshop 5
1. In Photoshop, select File/New, and create an image 120 pixels wide by 40 pixels high. Create your text using the Type tool. In this example, I've used the Eclat typeface from ImageClub. In the Type Dialog box in Photoshop 3 and Photoshop 4, set a Spacing of 1, as shown below:
In Photoshop 5, use the Type Tool to create the Type, and set the Tracking to 40 in the Type Tool dialog box as shown below. You'll need to have the text selected in order to change the tracking.
The reason for using a Spacing or Tracking setting is to give a little extra room between each letter for the outline color.
2. In Photoshop 3, you'll want to select only the text by using Control+Alt+T on Windows, or Command+Alt+T on the Mac. In Photoshop 4, you'll want to turn the transparency off for the type layer by deselecting the transparency checkbox on the layer or by using the / key.

In Photoshop 5, you'll need to Render the type layer in order to apply the outline to the type. Right mouse click on the "T" on the layer as shown below, and select Render Layer.
At this point, you will have something that looks like the image below:

3. Change your foreground color to a contrasting color. I used a yellow orange for this example. Then, select Edit/Stroke, and select a size of 2 pixels and use the Outside setting.
4. Select Mode/Indexed, or Image/Mode/Indexed in Photoshop 4 and save this as a gif file. You may want to add a drop shadow.
Remember, even though this technique is demonstrated with type, you could also use this effect on clipart, line art, or a logo.

Graphic Design Tips

ConsistencyWith colors, type and layout, consistency is key to creating a design that holds together. Headings, subheadings, captions, etc. should be handled the same way throughout your document. Your basic text should be the same everywhere. Only use a different treatment if you are offering a different type of information. If you want to emphasize certain text, use the same technique each time (bold, italics, color, whatever, just do it consistently).
ColorsFirst, start with a limited color pallet. Select just two or three complementary colors that work together. From these you might generate some lighter and darker shades of the same colors. Maybe an additional accent color. If you work within this pallet the overall page will be more coherent. You might reserve one color just to call attention. If you use it sparingly, when you do use it, it will be stronger. Keep in mind that basic software programs often offer very bright, saturated colors by default. Selecting slightly darker, faded or less saturated colors can make your designs appear more sophisticated and reduce the ‘electric’ appearance of the brightest colors.
Type/FontsJust like colors, it is important to just pick one or two type faces that are complementary. They should be different enough from each other that they can be easily distinguished. If you pick a typeface that is very unusual and has a lot of character, use it sparingly – just for headings or call outs. And you probably shouldn’t use another typeface with a lot of character in the same design (unless you can really make it work). Don’t use every font you have, it just makes things look messy and hard to read. Feel free to experiment with letter spacing, all caps or other type tricks, but, again, don’t over-do it. Pick one or two techniques and then use them consistently throughout your document. The basic type style for your text content should be simple and easy to read.
LayoutLine things up. It is amazing how much of a difference this can make to make a page work creatively and coherently. Whether vertically or horizontally on the page, if your elements start and/or end at the same place, the page will look more polished. Of course you can have some elements indented or staggered. But you can anchor them and make the placement look more intentional if other items are on the same plane with them. Imagine (or create) guide lines on the page.
Don’t be afraid to leave some margins. And remember that thin columns of text are easier to read.
Group items that go together and give them plenty of space from other items. Measure and make sure things are exactly the right size, placement or spacing.
PriorityYour design should invite a visitor in and lead them through the page. A catchy headline, or image might be largest thing on the page. The next tier of information should be a little less noticable, but also strong. For instance sub-headers on a page can offer a guide for what the reader may want to zero in on next. It is ok to make some text quite small. It can actually make it easier to read, and help the other key items stand out. A call-to-action might appear as a strong element at the end of the page, a logical final thing to do after reading the rest of the page.
SpaceDon’t be afraid to leave space on the page. It can make your message stronger and easier to read. Group similar items together and leave space between things that don’t go together.
BordersPlacing a box around something can help to set it off, but try to avoid using this crutch too much. It is easy to fall into a trap of putting everything in boxes and then everything is cluttered and nothing stands out. Try other ways to group and separate information like lining it up together or unifying it with another illustration or design element.
Make Multiple LayoutsI know people usually don’t have time to create one really nice looking design, let alone more. But that’s how the pros do it. If you try to layout your page in a couple of different styles it can be very liberating. You get less serious about each one. Each one can develop its own flavor. Perhaps some of the ideas you are using work better in one layout than in the other. That way you don’t feel the need to keep something if it is not working with other ideas you are using on that design. Best of all, in the end, you have something to compare side-by-side and you can actually pick and use the better one.
Use Stock Illustrations or PhotosYou don’t need to use lame clip art! Resources like Istockphoto can supply you with tons of photos and funky illustrations (this is a great fairly new resource and each photo or illustration only cost anywhere from $1 to a few bucks).
Proof Read(Anyone who has spent time on this website knows that it does not follow this suggestion. But on more important stuff, it is best to get it right. It can be expensive to have piecs reprinted!)
After you’ve laid out your design, take the following steps to for quality control.
Print it out. It will be easier to notice problems or get a new perspective once it is printed.
Have someone else review it.
Take some time away from it and come back to see it with fresh eyes.
And a Few Special Issues for PrintHere are a few basics that are helpful to know when designing for print.
Screen Resolution/DPI: Graphics on computer screen are low resolution (usually 72 dots per inch – dpi). For print you generally need at least 150 dpi and preferably 300 dpi. (you can go higher, but it is not necessary for most everyday purposes). If you start with a low resolution image and make it larger, it will look blurry or pixilated. You should start with a high resolution image. (I’ll leave the rest of the technicalities to another article).
Colors: Computer monitor colors are much brighter than colors on a printed page. It is very challenging to get screen colors to match print, so don’t be surprised. Be aware that if you are using a regular 4 color process, certain colors like oranges, will be darker and dingier. If you need a certain color you need to use spot color which uses the exact color of ink you desire, rather than a blend. Color guides are available to show you exactly what your printed results will be.Full Bleed: When designers create pieces with color that goes right to the edge of the page, the document is actually designed for a larger page and then the final piece is trimmed by the printer. Whatever the piece is get the specs from the printer or publisher because standard sizes can be much more affordable than custom work.
Color Printing: Sometimes it can be cheaper to print in just one, two or maybe three ink colors. If cost is important you should ask the printer if it will be cheaper. (Remember, in a two or three color print job, black is counted as one of the colors.) Full 4 color printing is much more common now and sometimes is cheaper than 2-color jobs. You should talk to your printer before doing your design to understand your specifications.

Quick and Easy Text Effects in Photoshop 5
This tutorial will teach you how to create quick and easy text effects using Photoshop's Layer Effects. Step by step instructions are given for Photoshop 5 only.
1. In Photoshop, select File/New. Create your text using the Type tool. This example uses a bold font.
2. The next step will use Layer Effects. You can find these by selecting Layer/Effects, or by right mouse clicking in Windows on the T icon in the Layers palette.
The first example uses the Inner Shadow Layer Effect, using the default settings.

The second example uses the Inner Shadow Layer Effect, using the default settings. Then the Bevel and Emboss Layer Effect was applied, changing the following default settings. The Style was set to Inner Bevel, Depth was set to 3 pixels, and Blur was set to 2 pixels. Finally, the Drop Shadow Layer Effect was applied, with the default settings changed to Opacity 35%, Distance to 3 pixels and Blur to 2 pixels.

The third example below uses the Bevel and Emboss Layer Effect was applied, changing the following default settings. Highlight Mode was changed to Normal, the Opacity was changed to 100%, the Style was set to Pillow Emboss with a Depth of 3 pixels and a Blur of 2 pixels. Finally, the Drop Shadow Layer Effect was applied, with the default settings changed to Distance to 3 pixels and Blur to 2 pixels.

3. Select Image/Mode/Indexed and save this as a gif file.
Remember, even though this technique is demonstrated with type, you could also use this effect on clipart, line art, or a logo. Layer Effects can be applied to any layer in Photoshop 5. They can also be copied between layers as well.

Create Rainbow Edges for Text and Graphics
This tutorial will teach you how to create an effect that can be either bold or subtle depending on your color choices. This is an easy tutorial to follow, so have fun!
1. In Photoshop, select File/New, and create a file 100 pixels wide by 60 pixels high. Using the Rectangular Marquee tool, create a rectangular selection. From the menu bar, Select/Feather with a radius of 1 pixel. Fill this with a pale violet. Then change the foreground color to a red violet, and select Edit/Stroke, with a Width of 6 pixels, and a Location of Outside. The result will look like the image below:
Hey, I know it doesn't look like much yet, but hang in here. A few more strokes and we're done!
2. Set the foreground color to a pale yellow orange, and select Edit/Stroke, with a Width of 3 pixels, and a Location of Outside. Change the foreground color to violet, and select Edit/Stroke, with a Width of 1 pixels, and a Location of Center. Add text if you like, and your result should look like the example below:
You can create a multitude of effects depending on the choices of colors and the widths of the strokes that you apply.
Create Rainbow Edges for Text 1. In Photoshop, select File/New, and create a file 100 pixels wide by 60 pixels high. Set the foreground color to yellow and create your text. In Photoshop 5, select Layer/Type/Render Layer.
In Photoshop 4, deselect the Preserve Transparency checkbox on the Layers palette, or use the keyboard shortcut /.
2. With the type layer selected, from the Layers Palette, select Duplicate Layer. Select the type on the copy layer by Control+clicking on the Layer (Command+clicking on the Mac). You should see the "marching ants" indicating a selection.
3. From the menu bar, Select/Feather with a radius of 1 pixel. Change the foreground color to a red violet, and select Edit/Stroke, with a Width of 6 pixels, and a Location of Outside. Change the foreground color to orange, select Edit/Stroke, with a Width of 2 pixels, and a Location of Outside. Change the foreground color to white, and select Edit/Stroke, with a Width of 1 pixels, and a Location of Center.
4. Select Image/Mode/Indexed and save this as a gif file.
Remember, even though this technique is demonstrated with type, you could also use this effect on clip art, line art, or a logo.