Most Web 2.0 logotypes have some common characteristics…the most usually known are on-font-gradients, shadows and highlights as well as a nice mirror effect at the bottom of them. So let's see what it really takes to create one from scratch!

Step 1

Simply create a new layer to add your Text on, in my example I created www.PicPolis.com

Step 2

Right-click on the test layer on your layers panel and open the Blending Options.
From here we'll use only the following:

1)Bevel & Emboss will give us a pseudo 3-D look to use along with the logo

2)Color Overlay with a nice white color to make our text look almost satin-like!

3)Finally we choose Stroke from the options ion the left and our effect is ready. You should take a closer look at the options and tweak them the way you desire to make a thick border one colour stroking border line or a more sophisticated gradient and thinner border around the letters!

Step 3

Finally I simply copy the whole Logo and paste it, then mirror it (using the Free Transform Tool, keyboard shortcut is Ctrl+T) and dragging the middle holder down. Then I open the Blending options of the new layer and I choose an opacity of 35%.

And that's mostly it! Here's what our logo now looks like!

In Photoshop, when saving different types of picture as jpeg a quality selection box appears.

From here you can choose various quality settings.

From here you can choose from various quality settings. On the top side of the Image Options sector you can click on a drop-down box to choose a basic level of image compression.

In the sector below this you can use a slider which enhances the control you have over the amount of compression.

At the bottom you have format options, this allows you to choose from Baseline (“Standard”), Baseline Optimized, and Progressive Scanning, from 3-5. Baseline (“Standard”) is used because it's a format recognized by most Web browsers, Baseline Optimized however, is optimized for color and is a slightly smaller file size. Progressive displays a series of increasingly detailed scans (you can specify the amount from 3-5) as the image downloads. Baseline Optimized and Progressive JPEG images are not always supported by all Web browsers so Baseline (“Standard”) is often the format to save as if publishing on the internet.

You can change the compression settings of the JPEG file format for various reasons, mainly due to size. This size issue is down to the internet, and download speeds. The basic fact is, if you have a larger file size, then it will take longer to download. So the image is often published so it has a decent quality, (doesn't appear too pixelated or aliased) but isn't too large. For example, a JPEG saved as a medium file size, and baseline (“Standard”) would be a more acceptable size, compared to a maximum quality JPEG with 5 progressive scans, as this may take some time to download onto the computer. This is also applicable to other file formats such as .MP3 compared to .WAV

GIF Transparency

The acronym GIF stands for Graphics Interchange Format. GIF format is a lossless compression file format. It uses repetition and redundancy in the file itself to reduce the size of an image, (substitution) rather than degrading the quality. For example, if it has a simple code, it might use the first part of that code instead of reproducing that code each time, so every time it repeats it thinks of the first part of code and repeats it.

To prepare to set transparency for GIF's you need to choose a color that doesn't occur naturally so that parts of the picture that you want to be seen don't accidentally get made transparent. Cyan is a color that doesn't normally occur naturally so choosing this color, we can delete all parts of the picture with this color and make it transparent, similarly to chroma-key, but to a GIF file instead of a video file.

The numbers in the color selection box regard to the intensity of the red, green, and blue colors.

Here you can see that the red slider has been left at an intensity of 0, green set to 255 and blue set to 255 also, (maximum).

This allows you to mix the three primary colors together to make any secondary colour you prefer with just three sliders.

Aswell as choosing the threshold of the mix of colors you can also set the tolerance of the transparency. This is done by clicking on the background box under “tolerance” and choosing an amount between 1-255. The higher the tolerance, the wider band of light frequencies it will make transparent, the lower the tolerance the smaller bandwidth of colours it will choose to make transparent.

When saving the GIF select the “Save For Web & Devices” and another screen will appear. Here on the left you will be able to decide between all the colours in the image that may contain traces of the flood fill colour you used earlier, in this case, Cyan.

You can choose the color that you wish to eliminate and click the transparent button.

When enlarging a Raster graphic, the software automatically tries to smooth out the pixels so that you don't notice its resolution easily, however, by doing this it creates the pixelated effect as seen below.

This proves the rule that Raster images work by editing pixels themselves, compared with Vector images working with mathematical equations and depending for which purposes you're using them for, each graphic format is as useful as the other. For example on a magazine like the image below, a Vector graphic might be used for the text and the boarder around the edge, whereas the photograph is a Raster image and as you can see has been photo manipulated.

Although when downloaded from the internet the image is most likely to be a Raster image (even if it previously included vector images) because of download speeds and for general ease of web use.

GIF Animation

A layer in regards to Adobe Photoshop is where you can overlay images to sit on top of each other, without having to render the images together. You can click on each layer and edit them individually, this is good for the photo editor because it gives you more flexibility to change each layer to allow the finished product to look more, (or less depending on the context) believable. For example in the above image of the Times Magazine, the picture of a telescope is layered on top of the persons face, and their eye, enlarged and in focus inside the telescope. The background layer is set to a blur, while keeping everything else in focus to add to the detail of the photograph.

Opacity is the percentage a layer (or image) can be seen/not seen. When set to 100% opacity the image is in full view and blocks out all images/layers below it. However, you can overlay images and set the opacity to any percent below 100 to allow you to see through the image as in the screenshot.

In the above image you can see the various layers (Tiger being the background, cigar, and smoke being two others). And the opacity editing, you can see the smoke layer has been highlighted and the opacity set to 54% to add to the effect of depth in the picture.

To create a GIF animation in Photoshop (CS3) you simply open an image and click upon the Windows tab and highlight the animation box. A second box will appear and from here you can create new frames and it gives you tweening options.

To make an animated GIF you need to create a new frame by clicking the duplicate frame button at the bottom.

After this you can change the opacity over in the Layers window (shortcut F7).

And create a motion tween between the frames, creating all frames in between the key frames for you.

When changing tweens you must apply each transition to a different frame, when applied to the same frame, the other keyframes will not change.

Tweening is simply a technique that when you create a beginning shape, and an end shape, the software creates the necessary frame in between the beginning frame and end frame shape. You can change the timing of tweening to give different effects by speeding up or slowing down a certain animation, perhaps to allow text to fade in slowly, or allow an image to flash in quick succession. One way of using this would be if you were animating a wheel, and wanted it to speed up or slow down at particular points, you simply create the keyframes necessary and then create a motion tween inbetween the frames. The only way to make it faster or slower is by changing the frame rate, or frame amount. A smaller amount of frames will result in a quicker transition.

Upon reflection I have noticed that the new Adobe Photoshop CS3 program is increasingly complex to use compared with the older versions of Photoshop. It does not lay out the Graphical User Interface, (GUI) in a manner that is simple, nor quick to use. Far too many actions are hidden behind windows, and when searching for the particular box, behind a window, behind another window that you want highlighted, you have to read the Photoshop CS3 manual only to execute more complex tasks, just to find out that you can't find the action necessary anyway. The earlier versions of Photoshop made it easier to use and create animations by having the function buttons at easy access and a simple to use manual which explains most things in a straight-forward linear manner. I would prefer to use a program like Flash instead of Photoshop for animation overall, just because of the way Adobe has designed the new version of CS3 Photoshop, making it a lot harder to achieve the same thing you can create in Flash in a matter of minutes. Image ready was a software previously released by Adobe which dealt with the animation side and used Photoshop as the Photo-manipulation suite, which I think makes more sense as it breaks up the amount of windows and sections behind sections of complex drop-down boxes.

 

 

 

 

GIMP

GIMP stands for the “GNU Image Manipulation Program”. It's an Open Source program for graphic designers very similar to Adobe Photoshop. It is very powerful, yet simple to use and very intuitive. The program works on different Operating Systems as well as many languages.

What I like the most about it is the way the windows are independent from each other. Everything is independent allowing for the windows to be customized to your liking, and be positioned where you want and need them without disturbing the imaging process

Their site, gimp.org, contains a lot of information about the software, including the latest updates, and recent news. Oh yeah, they also offer tutorials and download links.

Inkscape

Inkscape is a vector graphics editor similar to Adobe Illustrator and Xara Extreme. It utilizes the scalable vector graphics (svg) format, allowing it to create images that can be stretched, moved, and modified without losing resolution or clarity. This piece of software, although in its infancy, has proven to be very powerful, and fairly easy to use.

I use it to create clip art and other items I use on more than one design. For example, if I draw a heart for a logo, but then want to stretch it out to twice its size for something else, then I can do so without sacrificing quality.

Their website, inkscape.org, contains downloads and documentation, along with tutorials and recent news.

Tux Paint

A rather simple program designed for kids to learn the basics of their creativity. With sound effects and sticker/stamp tools, it makes for a fun time for the kids. I am fairly new to this piece of software, but the kids surely get a kick out of it.

Their site, tuxpaint.org, contains screen shots, explanations and of course the good old download.

Have a blast

I know I do. Enjoy your graphics software, especially since it's free. Play with your photos, turn a good picture into a rather embarrassing one for someone. The sky is the limit.