Archive for the ‘Images/Photos’ Category

Optimizing You JPEG Formats

Saturday, July 11th, 2009

Phalaenopsis_JPEGCompressing image files has become a necessity due to the constrained space of hard drives, flash disks, and web hosters. This is because a common text file is comparatively smaller than an image file; an 800×600 24 bit color image file will usually take up 1.37 MB of space, and those are just small ones. One of the more popular formats to save a compressed image is JPEG which usually has an extension name of .JPG or .JPEG. It can achieve compression ratios of 10:1 with practically no lose in image quality.

There are two options with which you can compress your JPEG files. They refer to the same thing but are polar opposites of each other. Saving the file at 60% quality will mean a compression of 40%. Depending on the program you use, you will find either of these two options, but the results will always be the same: more quality will mean less compression and vice-versa.

Different programs also have different quality scale. By saving an image at 55 to 60 quality in Photoshop, it will look and have the same file size of other softwares saved at 80%. Also, never get tempted to save an image at 100% quality because this is not the highest possible quality rather it is the mathematical optimization limit, which will give you an unreasonably big file. Save the image at 95% quality for optimal results. This will be enough to prevent loss in quality and will produce the smallest file size for that quality.

Besides those options, some programs such as Paint Shop Pro and Corel Photo Paint allows you to choose the type of image downsampling or subsampling. A subsampling of 4:4:4 means that the image is not subsampled, 4:2:2 is standard subsampling, and 4:1:1 produces the lowest quality downsampling, although rarely used.

Aside from these tools, you can also optimize your image file by changing how the image data is stored . JPEG format is stored in a 8×8 pixel block and by saving the image exactly within the image block, it will produce a sharper image and save you a couple of MBs in the process. You will be able to see this if you set the JPEG quality parameter to low.

When a JPEG image is saved the image will be divided into blocks of 8×8 pixels. Each block will then be optimized independently. The image will look fuzzy if it does not fit exactly into the pixel block. Also, by adjusting the image right into the pixel blocks, you are decreasing the number of 8×8 blocks used up by the file. This way, the file will be save in to smaller size.

By doing these tips, you will be able to save up on disk space or web space when uploading your images. Every KB is precious due to the limited space it offers, and by effectively decreasing the size, even by a couple of KBs and not sacrifice any quality is well worth it.

Beautiful Vexel Art

Friday, July 10th, 2009

vixelart

The term vexel art was coined by Seth Woolley while he was still a technical contributor of the now non-existent popular teenage message board Nova Boards. He coined the term to describe images that look like vector graphics but are an entirely pixel based form of raster images. Its popularity stems from the fact that it actually requires little skill in drawing.

Computer images and displays are often made up of pixels, small dots that when put together and viewed as a whole will show you a designated picture or image. The smaller and closer the dots are to one another, the better will be the quality of the image. But to do this, the image will have to be stored as a bigger file. Generally when the picture is zoomed in, the pixels will become more and more distinct and the image gradually deteriorates. Images such as these are generally done by raster programs and the images are usually called raster graphics.

On the other hand, vector art is the use of geometrical shapes such as lines and points but are represented as mathematical equations to create the computer generated image. Since the data is stored as a mathematical sequence the picture is scalable and will not pixelate even up close. This is of great advantage since you can print the vector image unto a sheet of paper and reproduce the same image unto a billboard without worrying about the quality. And since the file is stored in numbers, it can be easily modified so as to add or remove detail. Vector images are known for their crisp and quality texture. Even so, there are cases where in raster or pixel images are used while sometimes vector images will be more handy—as it is a case to case basis. (more…)

Thumb Image Styling

Wednesday, May 20th, 2009

thumbsstyles

Here are some good ideas for styling those thumbnail images. This can add a touch of uniqueness and a character to the web design. Nice collection from TutorialFeed called 12 Excellent Thumb Image Styles for Web Designers. Although these are not complicated to make, they also have  a PSD file you can download for these images so you don’t have to start from scratch.

Amazingly Beautiful & Super Efficient Website Design

Wednesday, April 15th, 2009

mightyleaf

MightyLeaf.com is going to be filed into the Best Of 2009 category. I can’t stop starring at it… The design of the site as a whole, then the details – photography work is just stunning, the navigation is very clean and efficient, the logo fits perfectly. This website is truly is a piece of art.

mightyleafnav

Check out the navigation, it sits there quietly, out of the way while you are not using it, then when you need to find something just hover over the main categories buttons at the top and a smorgasbord of choices come popping out, so much to choose from!

mightyleafsubnav

Also the sub-navigation buttons placed nicely under the main navigation is another level of choices to pick from. In all, they have eliminated many extra clicks for a visitor, turning many of then from just visitors to customers.

Source: http://www.mightyleaf.com

Awesome Way To Display Your Portfolio Using jQuery

Friday, April 10th, 2009

tekan

As web designers we strive to amaze potential clients with our work and one of the ways to do that is to have a stunning portfolio. We find new ways to hook the visitor, to make him or her remember our site over everyone else.

I’ve seen sliders on portfolio sites before but have never seen one that has been flipped on it’s side and split into four and set on an offset timer. This is pretty cool to look at.

You will notice that this site I am showing here is using Flash to make the cubes flip but after digging around a bit I found a jQuery module that can be used to do the same thing. Check it out here: Easy Slider, you can see the example here: Easy Slider jQuery Plugin Demo. This module will only make one block so to make the same effect like in the site above you will need to stack four of these modules together and time them just right.

Source: http://www.tekan.com.br

Another Awesome Looking Scene Header

Wednesday, March 25th, 2009

ozon3

Imagination enhanced photos look amazing. Here, on this one it is used as a website header, a beautiful grassy scene with planted ancient nuclear power plant cooling stacks. The shades of green look beautiful on the deep dark greenish-blue background. Very nice illustration.

Source: http://www.ozon3.com

Beautiful Flower & Bug Illustration

Monday, March 16th, 2009

markup4u

This is cute, also very nicely done. The flower illustration with the lady bug on top, the lighting effects gradients, the contrast with the background colors, it all just looks beautiful.

Source: http://www.markup4u.com

What Happened When A Girl Played With Lights?

Thursday, February 26th, 2009

lightimage

Here is another image that played with lights. It reminds me a lot of computer games but it captures an idea of freedom and creativity. I really liked how the colors ranged from dark to light across the image and I liked how the woman is immersed in it. I think this is one of those wallpapers which will blow me away when I opened my computer.

Source: http://blog.sevenedge.be/2008/08/04/wallpapers-experimenten-natuur-achtergronden-widescreen/

Buy Layered Photoshop Files Or Sell Your Own Creations

Tuesday, February 24th, 2009

graphicriver

I just heard GraphicRiver just launched … the website is a marketplace that provides a way for you to buy graphics, layered Photoshop files, vector graphics, icons and more. This is a great service for web designers, don’t have to spend a bunch of time trying to design things from scratch, now you can get something that already looks good and customize it a bit in Photoshop or Illustrator and it is yours.

The other cool part of GraphicRiver is if you are an artist you can actually sell your own art here and get paid about 40% to 70% of whatever it sells for.

I’m going to check it out.

Source: GraphicRiver.net

Simpler is Better

Tuesday, February 24th, 2009

designbyhumans2

I was looking for some t-shirt designs when I landed with this website with an amazing header. The good part is that it was not colorful. I also don’t think it made a huge effort to catch my eye. It was simple with the soft combination of black, white and red.

The good thing about it is how the header promotes its product without imposing on what the surfer likes to see. It simply shows the model and the t-shirt design. I guess simpler is still better.

source: http://www.designbyhumans.com/