Wednesday, November 20, 2013

What is DPI and Image Resolution?

DPI and Image Resolution

Image Resolution


Image resolution for printing is generally measured in dpi: Dots per Inch. The standard size for printing is 300 dpi. (That is, every square inch would be filled with 300 by 300 pixels.) At this size, the human eye cannot easily pick out the blurredness and imperfection of the image; from a normal viewing distance, it looks like a proper scene. Other outfits might recommend 220 dpi, which would be an absolute bare minimum. Anything lower than that would immediately appear blocky—also known as pixelated.

Pixelation

Images get pixilated when they are expanded past a certain threshold, where it is easily spotted with the naked eye. All images are composed of pixels, but when people are viewing an image, they don’t want to be overly reminded of this fact.
It is important to know what the viewing distance will be of the image. Images intended to be viewed further away—like a large poster, hung up on the side of a building, let’s say—can get away with more pixelation than an image intended to be seen up close. As a note about the MDL specifically: most people come in intending their posters to be placed immediately before the viewer, meaning the less pixelation, the better.

Various Resolutions and Their Sizes

Images come naturally in numerous pixel dimensions. All of them have their place in image work. Here are some examples, of rough image sizes and file sizes:

Resolution
Size at 220 dpi
Size at 300 dpi
File size
640 x 480
2.9” x 2.2”
2.1” x 1.6”
Small
1024 x 768
4.7” x 3.5”
3.4” x 2.6”
Medium
1600 x 1200
7.3” x 5.5”
5.3” x 4”
Large
2272 x 1704
10.3” x 7.5”
7.6” 5.7”
Very large

These dimensions are not hard-and-fast rules about image size; for a less formal poster, some pixelation could be acceptable. Stretching far beyond the dimensions listed under 200 dpi, though, will make the individual pixels of the image very noticeable, and thus it is cautioned against.

File size depends a lot on image compression and like factors which computers do automatically; determining any definite file size range is thus difficult.

Wednesday, November 13, 2013

Making Gifs in Photoshop

Let's Make Gifs!

I figured I would follow up my previous post about tumblr with one of its most essential parts: gifs.

.GIF stands for Graphics Interchange Format, and is essentially a very short video made out a minimal amount of frames.  Gifs are usually quick and simple--it is not a video, but rather a series of images that are shown one after another to create the illusion of movement.  On tumblr gifs are typically used as reaction images, but they are also used by artists to tell a story that would be impossible in a single frame.

In these days, gifs are SO EASY to make.  They can be created in software like Photoshop or Flash, and even be made online at sites likeMake A Gif.

Making Gifs in Photoshop

The tutorial here is for Photoshop CS6.  CS5 has a slightly different process.

 

First off, go to File > Scripts >Load Files into Stacks.


This will open the following window.  Here you can browse for the files you want to use, and then arrange them in the order you prefer.  I arranged the images ahead of time and added numbers to make things easier.


At this point you want to make sure the Timeline window is open by going to Window > Timeline.  (If you are using CS5, this window will be called "Animation".)


Now that the Timeline window is open, let's covert the images into frames.  This can be done by clicking the button in the upper right corner and selecting Make Frames From Layers.


Now that all the layers are frames you can change the time that each frame will occur for.  Though there is always value in having different times for each frame, it's also handy to know that if you want to select all the frames at once, you can click the same button in the top right corner, and choose Select All Frames.  

You can preview the gif by clicking on the arrow keys at the bottom of the Timeline window.  It's important to remember that gifs loop, so if your first image and your last image don't link well, you will want to make the last frame a bit longer so there is some pause between the beginning and the end.  You can even add a black frame if you want to.


When your gif is ready, make sure to click File > Save for Web.  Simply saving the file will not do the trick.


In this final window you can make final changes with your gif.  The first thing you want to make sure is that Photoshop is saving the file as a gif (yellow arrow).  Next you can chose the size you want to export the file as--gifs are best smaller for easy web use, so make sure you're exporting a reasonable size (green circle).  You can also edit Looping Options and preview your gif (red circle).

AND YOU'RE DONE.


Wednesday, November 6, 2013

How To Make Your Logo POP!

How to Make Your Logo POP!

WHERE DO I START?

Designing a strong, memorable logo, whether it be for personal use, or to represent a business, or to give a face to your club or organization, only one thing matters: the final product. That what that means is that designing a logo can be an ugly, ugly process. Remember: THAT'S OK. All that matters is that the final product is what you or your client wants.

        1) SKETCH- Start by sketching out on scratch paper whatever comes to mind. None of these doodles have to look good in the slightest. This doesn't have to be Mona Lisa quality work, this is more like throwing up thoughts onto a page. But trust me when I say sometimes just getting 10 or 12 ideas on paper can do wonders in helping you figure out which direction to go.

        2) COLLABORATE- Work with other people! Get ideas from the person you're working for. Get a friend to help with ideas. Two, three, four heads, they are all better than one! It becomes a million times easier to come up with an awesome idea for your logo when you're constantly bouncing ideas off someone else and visa versa.

       3) SHOP AROUND- Know what works, both through guidelines and inspiration. The best designers choose their colors, styles, fonts, and symbols deliberately every time, so look around! If you know a few of the basic rules of design, you are much more likely to come up with something that accurately conveys the feelings that you want to get from your logo. Also consider what logos do YOU like. Why? Are there stylistic elements that you could potentially use in your work? (Without plagiarizing of course!)

Once you have some idea of what direction you might want to head, you need to take a few other things into consideration before you have something you can be proud of.

Choosing a good color scheme:

       Think about what different colors represent. Here are a few common words that describe a few colors, and examples of where they are used.
              
Blue: Calm, Professional, Liberal, Smart, Progressive, Corporate, Freedom


Red: Passion, Love, Sex, Anger, Rebellion, Power, Radical, Bold


                 
Orange: Warm, Fun, Retro, Friendly, Inviting, Fall, Summer



Yellow: Happy, Fun, Exciting, Friendly, Sun, Energetic, Young



Green: Natural, Calm, Trust, Money, Earthly, Organic



Purple: Royal, Mystical, Feminine, Decadent, Elegant, Romantic, Eclectic



Brown: Rustic, Trustworthy, Earthy, Warm, Romantic, Colonial, Respected


Choose a color that says what YOU want to say. Are you organizing a group that does tons of fun things for its members? Choose fun colors to use, like oranges, yellows, and reds! Maybe you are putting together a formalized study group. Choose colors for a logo that suggest calmness and productivity like blue, green, and brown. Even if someone only looks at your logo for just a moment, the color of that logo can make them feel SOMETHING in that brief second or two, and that may be enough to make them take a second, longer look.

Symbology:
Once you have an idea of what colors to use, consider what symbology you want to use. This is where the rules start to get pretty loose. There are too many symbols out there to count. Here is where you need to do a bit of research. Do you want to be direct, or subtle? Is a direct graphic representation of what your club or organization does adequate, or do you want to use a metaphorical representation to embody some quality ABOUT that organization? It's really up to you, and comes down to personal preference. Look around! What kinds of symbols do people use to represent something similar? Add to your potential sketches at this point before you choose on which one you want to go with.


Digitizing Your Logo:
By this point, you should have a pretty good idea of what you think you want your logo to look like. There is only one rule when it comes to making a logo. It MUST be made as a vector image. This means that it must be resizable without looking pixelated. This means you can enlarge it to the size of a building, or shrink it to the size of a pinhead and there will be no change in image quality. As such, when you are making a logo in the computer, use a program like Adobe Illustrator or Corel Draw. If you have never used either of these programs before, you can find a few Illustrator tutorials to get you started here. You will especially need to be familiar with the pen tool in Illustrator if you want to make your logo look sharp on the computer.

Typography:
There are people that spend their whole lives designing, looking at, and fussing over fonts. The typeface you use in your logo can often times be just as important as the logo itself. In my eyes, there are three main points to consider when choosing a font. Those things are:

Legibility/Readability- How legible is your font choice? Can you tell which letters are which? Show someone your logo and see if they can read what it says clearly and easily.

Aesthetics- This is the most obvious one. It should look good! Choose a font that is clean, not too busy or frilly, and gets the point across. Stock fonts that come with your computer are boring and unoriginal, so download some new ones! Check out dafont.com and1001fonts.com for tons of options, for free!

Mood- This is where it comes down to what you are actually trying to say with your logo. What mood are you trying to create? A font with clean, sharp lines is more likely to come off as professional, while a rounded or "hand-drawn" font has the potential to be more informal or playful. There are thousands of font choices out there. Make sure the one you choose doesn't only say what you want in writing, but in feeling as well. Here are a few stock fonts that make me feel different things.




Put it All Together:
Once you have all this down, you are well on your way to making a logo that is striking, thoughtful, and memorable. Practice makes perfect. Even the most practiced graphic designer will pump out tons of versions of the same logo before they get something they are happy with. This was a fairly general overview of the process of creating a logo, so for more specific resources and tutorials, I have provided some links down below. Go create something!






Learn More About Copyright Laws/Plagiarism
https://sites.google.com/site/g132historyanalysisofdesign/Course-Resources/plagiarism-in-design-1
http://ezinearticles.com/?Using-Graphic-Design-Inspiration-and-Avoiding-Plagiarism&id=7058877


Inspiration/Logo Examples:

http://logofaves.com/
http://logopond.com/
http://www.logospire.com/

How to choose a typeface:


Illustrator Tutorials: