Posts Tagged ‘images’

PHP: Image Directory Repeater

There are lots of great prewritten scripts to build out relatively custom image slideshows. One of the main issues I’ve run into is that these plugins require a listing of images, and sometimes, it is more convenient to just pull images from a folder directory. Well, even if you don’t know much about PHP, it is incredibly easy to write one! Here, you’ll learn the basic PHP code you’ll need to repeat through all the JPG images within a folder.

<?php
   $dir = "directory/*.jpg";
   foreach(glob($dir) as $image)
      echo "<img src=\"".$image."\" />";
?>

That’s it! You just have to update the $dir variable to lead to the folder you want to run through. This script only repeats through JPG images, which you can change by altering the file extension within the $dir variable. Got questions? Ask away!

Vector And Rastor: What’s The Difference?

When working as a web or graphic designer, it is very important to understand the difference between "vector" and "rastor". These are two words used to describe the basic structure of a file or program. Take the Adobe Creative Suite for example, some of the programs included within the Suite are vector based, while others are rastor based. In particular, you should note that Photoshop is a rastor based program, while Illustrator and InDesign are both vector based programs.

Now I still haven’t answered the question of what the difference between the two is though. Well here is your explanation. The word raster refers to pixels (or points if you will), while vector refers to lines. When making an image, you can base it off of two things; individual points in the image that are colored in whatever way you want that come together to make an image, or a bunch of lines that define spaces and colors, thus creating an image. Still not getting it? That’s okay… Let me try by talking about what you’d want to use for different types of projects.

Photo Editing: Photos are loaded with tons of information all the way down to the pixel level, thus making them rastor based. If you were to take a photo and try to expand it ten times larger than it already is, it is going to get blurry. That’s because for every individual pixel of information, you are trying to turn that into 100 pixels, giving it seemingly less detail. But without simplifying that image, there is no way to really replicate it using just lines is there? That’s why photos are rastor based, but are also limited in how big you can make them.

Logo Design: Now say you are working on a logo, and you need it to work in a lot of different places (on a website, on letterhead, on a business card, or on a giant billboard). That means you need an image that can shift in size but not lose it’s definition. To do this, you want to use a vector based software. So if your logo has a "+" in it, you can make that as big as you need without distorting it, because it is defined using lines, and no matter how you alter it, it will always be two lines. Now don’t limit yourself to thinking of lines as having to be straight. Vector based software thrives off using curves. This is why vector based software is so much more ideal for making things with writing in them. Letters just don’t do well under rastor based software because you lose the specific curve of a font to aliased pixels.

And really, that’s the difference between "vector" and "rastor". You want to use rastor software when working with photos. But for pretty much anything else you are going to want to stick to vector software so that your copywriting doesn’t lose quality, and so that you can change the image size without losing quality.

Any questions? Ask away!

GIF, JPEG, and PNG: What’s The Difference?

Not a graphic designer? No problem! You can still easily master when to use different types of images for different purposes just by understanding some of their individual benefits! So find out below what each image type is good for:

GIF: Graphics Interchange Format
Images with a .gif extension are commonly used for the web because they compress quite well. They function by allowing you to restrict the number of colors that make up the image, with a maximum of 256 allowed. GIF images also allow for layering, which is commonly used to create moving images that you may often see in the form of internet ads or moving smiley faces. GIF images also allow for transparency so that items can be seen that appear beneath them.

JPEG: Joint Photographic Experts Group
Images ending in a .jpg or .jpeg extension are the most versatile images around. They have different levels of compression and are compatible with both RBG and CMYK color formats, making them suitable for both web and print. They have no color limitations, which can make their file sizes much larger than GIFs.

PNG: Portable Network Graphics
Images ending in .png only allow the RGB color format, meaning they are not suitable for print. Their biggest benefit is fantastic transparency capabilities that GIF images can’t match. They also tend to have a large file sizes because their compression isn’t always as successful as that of GIFs or JPEGs.

To help you decide what format to use for your images, try out this table:

Image Description GIF JPEG PNG
Black & White Photo
Full Color Photo
Black & White image for print
Color image for print
Small Icon
Image w/ just text
Moving image
Image w/ complex transparency
i.e. curved lines or drop shadows
Image w/ simple transparency
i.e. straight lines

If you have any specific questions or examples you’d like to ask about, don’t hesitate to ask!