Basic lessons in HTML, CGI, SEO, domain registration, hosting - build an on line business! » Graphics

Color Tools

AdminP — Tue, 27 Jul 2010 16:48:06 +0000

There are many elements to consider when building a website or blog. One of which is color. We live in a very visual world and color can be a real attention-grabber or it can be a real turn-off.

If you are one of the lucky ones that can ‘visualize’ and see how a page might look before it is written you may not need the tools we’ve put together. However, if you have trouble deciding what colors to use for text and links, if . . . say you want a blue background, then you may find these new pages helpful.

Color Table

…..makes it easy to find any code for any hexadecimal color. Use these grid tables to select the color you want and the code will display in the box below the grid.

Color Changer

….. makes it easy to darken or lighten a hexadecimal color. You can take the original color and using numbers ranging from .1 (yes, use a decimal number for darker) to 5 to get a range of colors.

Once you’ve input a number and clicked on ‘Output’, a ‘color bar’ will display. You can then click anywhere on the bar to get the exact color you want . . . and the hexadecimal code for that color will appear next to the ‘Output’ box.

Color-Cube

……ever wonder what your page would look like with all the colors assigned before you published it? This handy page lets you assign colors for

Background
Background Image
Text
Links
Bold
Italic
Font Size

Once you’ve decided on the colors you want, you will see the HTML codes to use on your web page or blog for those colors.

All of these tools will be available from the ‘Pages’ - left sidebar – under ‘Tools’.

Tips & Tricks – HTML, Graphics & WordPress

AdminP — Tue, 04 May 2010 01:04:36 +0000

…..

Regardless of what we’re doing, most of us try to find shortcuts along the way to help make the job easier. Maintaining a website and blog are no different. However, if you haven’t started thinking about shortcuts, I’ve listed some of my favorites below to help get you started.

…..

HTML Time Savers

Create templates for HTML pages, tables or blocks of text you plan on using repeatedly.
Use the tag to embed information in the web page. This information can be anything – inventory number, location of item; information relevant to your advertisers, or you may want to save page details such as alternate background color, font names, etc.
Use tags for each block of text, table, etc. that is to be centered. This may seem excessive, but when I want to move or delete something, I don’t have to worry if doing so will impact the overall layout of the remainder of the page.
Use pixel shims or transparent images as spacers- or when needing visual help in laying out a table.
Use ‘Control + A’ to view everything on a page. This is helpful if you’ve used hidden letters, numbers or punctuation marks in the same color as the background to create negative space. Note: Do not use this technique to place ‘hidden’ links – those links to your other pages or websites that are the same color as the background so as not to be visible to the eye – to try and boost your search engine rankings. It’s a definite no-no.
If you’re having trouble laying out a table, using a border to see where the columns and rows are makes finding mistakes easy. Once you’ve fixed the problem and have the table like you want, remove the border.

GRAPHICS Tips

Use layers for building complex images or graphics with multiple elements. It is much easier to change one layer than re-create the whole graphic.
Save both the multi-layered original and one-layer finished images. And while you’re at it, use the same name for both only end the layered image with a unique notation such as psp. (This is the file extension for Paint Shop Pro that designates a layered image.) Using the same name makes it easy to find both images if you need to make changes, and at the same time be able to easily tell the difference.
When using layers, include one informational layer that contains the hexidecimal colors and the font names used. By doing this, you’ll always have the correct information for making any changes. Unless you only use one font or are very familiar with the font names, it can be difficult to remember which font was used.

Word Press Tips

Use HTML tables to include rows, columns in a post. To do this you will need to select HTML rather than Visual.
Use tables to include sections with a different background color. This is good to highlight a section or advertisement.
Use dots for additional spacing or lines in your WP blog. To do this, place the dots where you want the extra spaces or additional lines, and then make them the same color as the background. This allows you to include extra lines to space pictures or text – or place more space between words if desired.

This is a non-spaced line, do you see any dots?

This is a spaced line. ……..Do you see the dots?

[Note: To see the dots I used to put space in the second line above, hold the Control key + A at the same time and the dots will appear. ]

Conclusion

Develop your own shortcuts and time-savers and put them in a single folder where you will be able to find them quickly and easily. If you prefer keeping the shortcuts and templates in multiple folders, you may find keeping a single Word Pad document with notes and locations helpful.

Troubleshooting – HTML, Graphics, CGI, JAVA

AdminP — Tue, 16 Mar 2010 01:01:54 +0000

Murphy’s Law does not discriminate when it comes to writing pages for your website or blog. Regardless if it’s HTML, graphics, CGI, or JAVA , you’re bound to run into some ‘glitches’ along the way. While understanding and knowing how to use the program you’re working with is a big plus – you can track down and fix some problems by having just a basic understanding of how a program works and knowing what to look for. The following are some of the more common errors you might encounter when writing a document or using images . . . along with a few simple fixes to consider.

HTML

If the document displays everything as bold, italics, underlined, centered, etc. – check for beginning and ending tags for the code, i.e., bolding, underlining, centering, font characteristics, etc. You will find most of the time this will be a very quick fix to most problems. (I know . . . this one was a ‘no brainer’)

Tables give you a lot of control on how your information is displayed, however they can also be a real challenge. If you find your tables are out of alignment, columns are offset or the background images or colors you input do not display, try the following:

Make sure all tables (including nested tables) have open/close tags for rows , and columns , , and the table(s) have both beginning/ending table tags ,
.
Make use of ‘colspan’ tag when you want a single column in a table to span multiple columns, i.e., where ‘N’ is the number of columns you want to span.
If your colored background doesn’t display or is not the right color – check for the # before the hexadecimal color – leaving this symbol out will cause a problem. Also check for the double quotes ( “ ) before and after the hexadecimal color – this will also cause an off color to display.
If using a background image for the page or in a table, make sure the image has been uploaded and the path in the document BODY tag or the HTML ‘background’ tag for the table, row or column is correct.

Links help visitors navigate your website quickly, however, getting a 404 Error is definitely not cool. Always check links to make sure they are working once a new page has been uploaded. If they don’t and you get a 404 error, check for the following:

Verify the page file extension used in the link is the same as the extension for the page uploaded. For example, a page with an .htm extension is not seen as the same document as a page with an .html extension
Use absolute links in the document – the complete file name – and check for any typo’s in the name. While you can type in a www.domain name with mixed upper or lower case letters and have it work, a page name is case sensitive and must be exactly the same.
Verify the page you are linking to is available on line.

Graphics/Images

Images can be a real plus but if they don’t appear as planned – seeing an empty white box is not good, making the page look unprofessional. Some common fixes for missing images are:

Verify the image’s file extension is correct in the code, i.e., jpg, gif, png, etc.
Look for typo’s in the name. Like page names, the image name is case sensitive.
Are the double quotes where they should be? Not having the complete code correctly written for every aspect of the image name and it’s attributes can cause a problem.
Verify the folder where the image resides is same as the folder used in the document code

If your picture is in a folder named ‘images’, the following would be true:

Correct:

Incorrect:

Verify the image has been uploaded and is visible on line by typing the address of the image into the address bar. Sometimes there can be a problem during uploading and uploading the image again will take care of everything.

CGI/JAVA

CGI is a great way to get information from your visitors but it can be very frustrating trying to track down why a form may not be working correctly. These are some of the most common culprits:

Has the CGI script been configured to work with your domain’s unique IP address?
If you are using an email within the document, does the email reside within yourdomain.com? , i.e., inforequest@yourdomain.com
Has the CGI script been uploaded to the designated folder in yourdomain.com? (Typically CGI-Bin)
If using an email with a CGI script, have the email addresses been included in the script you uploaded to the CGI-Bin?
Do the ‘field names’ in the document correspond to the names used in the body of the document?
Are there spaces in the ‘field names’. If so, remove them and then change the corresponding NAME in the body of the document to match.
Check for typo’s – all field ‘names’ used must be exactly the same wherever they are used in the same document.

JAVA can add a new twist to a page and give your visitor many options, i.e, share, bookmark, email, and best part, you don’t need to know how to write JAVA. However, tracing problems can be difficult if you don’t have any basic knowledge of how JAVA is written so as to separate the ‘instructions’ from the ‘meat’ of the script. The JAVAScriptSource is a good start for learning the basics before you try your hand at using JAVA. And, if you run into any snags – try these solutions before you decide to ‘not use’ the script at all.

Has the script been configured, i.e., do you need to replace the image locations in the sample script you downloaded with the correct addresses for the images that you’ve uploaded to yourdomain.com? Are the images the correct size to work with the JAVA script?
Has the JAVA script (processing portion) been uploaded to the yourdomain.com?
If the JAVA script has been uploaded to yourdomain.com, has the correct processing script name been placed in the document’s HEAD Section?

HEAD Section Example:

If the JAVA script (processing portion) is not uploaded to yourdomain.com, has it been placed into the HEAD section of the document? (Cumbersome, but if you only have 1 page you may find doing this easier and less likely to have a problem .)
Verify there are no typo’s in the JAVA script name (processing portion) placed within the document HEAD section.
Have you included all of the variables inside the document body that are needed for the script to work?
If you are using images, are the paths to get to the images correct? and Do they show residing on yourdomain.com?

These are some of the more common things to look for when troubleshooting a page. Hopefully you’ll find some of them useful and maybe save you a few minutes of time.

Raster & Vector Images: Properties

AdminP — Thu, 04 Mar 2010 20:37:54 +0000

Besides the obvious difference of raster images using pixels and vector images using objects – there are other differences to be noted.

Color

Raster images – digital pictures, scanned images or those created with a graphics program – need a large number of colors to render the image. Scanned images using 24 bit (16 million colors) are almost indistinguishable from the original while images that use 8 bit (256 colors) show some deterioration to the image. To help eliminate some of the deterioration of scanned images a process called dithering is used to approximate colors that are not in the smaller color palette. However, this creates a situation where the edges (and lines) may not be clean. Using an 8 bit image also is problematic should you want to change a color. In this case you cannot isolate the range of colors needed – and attempting to change a single color will result in a less than desirable image, i.e., some loss of shape, uneven lines and edges.

Vector images – changing the color of the vector object – since it does not use pixels – is relatively easy and much like coloring with crayons. A ‘vector’ drawing program allows the user to select the object and define the color as well as the line width in some cases.

Resolution

Raster images- resolution is defined in the number of dots per inch (dpi). This is the same method to measure the resolution of a printer or scanner. If you have a 300 dpi image and increase the size, typically the edges and lines will become jagged. This is due to the fact that the ‘squares’, i.e., pixels, got bigger. However, if you decrease the size of the 300 dpi image, the ‘squares’ get smaller and maintains the integrity of the edges and lines. In one sentence – Raster images do not ‘scale’ they only enlarge.

Vector images – are defined by ‘math’, i.e., ratios – you will find they can be ‘scaled’ up or down without loosing any image quality. For example, you have an image that is 2 inches by 2 inches in size, to double it you would use a multiplier of 2. To scale this same image down by half you would use a multiplier of .5. Since vector images can be scaled without loosing any integrity to the quality – they are the most popular graphics format for clip art and for transferring to printed material.

Files

Raster images – the most commonly used file formats are:

BMP (Bitmap)
TIFF (Tag Interleave Format)
JPEG (joint Photographics Expert Group)
GIF (Graphics Interchange Format)
PNG (Portable Network Graphic)
PSD (Adobe PhotoShop)

Vector images – the most commonly used file formats are:

EPS (Encapsulated PostScript)
WMF (Windows Metafile)
AI (Adobe Illustrator)
DXF (AutoCAD)
SVG (Scalable Vector Graphics)

There is a significant difference in the file sizes need to store these two images formats.

Since raster images are composed of colored pixels, the graphics program must keep track of all the information relevant to the image. Not only must it keep track of all the colors it must also keep track of the specific location of each pixel. The larger the raster image, and the more colors used – the larger the file. Large-sized raster images can equate to the final image being over 1 megabyte in size . . . resulting in slow uploads and downloads.

To the contrary, vector images do not need to keep track of each pixel but rather only the mathematical information. Therefore, these files are relatively small in size by comparison. This is to say if you had your company logo as a vector image, the file size would be the same for a 3 inch by 3 inch image as for a 3 foot by 3 foot image.

Conversion of Images

With vector images being more desirable for use in some cases, what can you do if you have a raster image you would like to use as a vector image? Convert it. There are some specialty programs that allow you to convert raster images to vector images. If you would like to see the process before making a purchase, you can try converting a raster image to a vector image for free at the website http://vectormagic.com/home. If you decide to give it a try – be sure your raster image is in Bitmap format before you start the process.

What’s the Difference Between Raster and Vector Images?

AdminP — Tue, 02 Mar 2010 02:01:13 +0000

When creating images – with or without layers – they are created as either a raster or a vector image or layer. Most graphics program are written to use raster images and layers – with an option to create some text and object layers as vectors. So what’s the difference?

Raster Images

Raster images are pixel based. Each image is comprised of a collection of square ‘dots’ called pixels where each pixel is a colored square. If you were to zoom into a raster image you would be able to see each pixel as a colored square. When working with a raster image containing pixels you are in effect working with the whole image and anything you do affects the entire image. You know what I mean if you’ve ever tried to enlarge a raster image and ended up with an image that is out-of-focus and has jagged edges.

Vector Images

Vector images do not use pixels, but rather store the image information as a set of properties that describe the image relative to its attributes, dimensions and position inside the image. These attributes are displayed and manipulated through the use of nodes or drawing points on top of the image. You might say a vector image is a grouping of connected curves and lines that is object-oriented – kind of like a ‘connect-the-dots’ picture.

When working with vector images you have access to all of its properties with each element being independent. This means you can make changes without affecting the rest of the image. Since vector images are object-oriented, you can ‘re-size’ – or more correctly scale the image – without any loss of image quality. This makes it particularly useful for clip-art.

Not all graphics programs have the ability to work with vectors . . . so, if you are planning on working with vectors and your graphics program is not set up to specifically work with vector images – you will need to purchase a special program.

Using Raster and Vector Layers

Knowing the difference between raster and vector images/layers allows you to build images to suit your needs. Use raster layers for anything that is the correct size or can be down-sized without loosing any image quality. Use vector images for text and/or objects where you want to fill an area or focus attention. Using both raster and vector layers in an image is particularly useful for creating banner ads. However, just like oil and water don’t mix – you cannot place vector objects on individual raster layers nor can you place raster objects on individual vector layers.

For our example, we want to have a finished banner with the 5 individual layers listed below-

Background color
Logo image
Company name
Company slogan
Graphic pointer

Definition of individual layers:

Background color is a raster layer using a hexadecimal color (white)
Logo image is a raster layer using an image we could down-size without loosing any image quality
Company name is a vector layer using vector text to fill in the whole top area of the banner
Company slogan is a raster layer using regular text
Graphic pointer is a vector layer where the object (arrow) was enlarged to fill in the white space drawing attention to the picture

Conclusion

Using raster and vectors by themselves or in layers to create images gives you a lot of flexibility to make your graphics look more professional and have the eye-catching appeal you want. I recently found a site that sells royalty-free graphics in the form of books and discs – best part is you can sign up and receive free graphics weekly. If you’re interested in getting on their email list visit www.doverpublications.com and click on Free Samples (at the bottom of the page).