Author :

Alpine Mountain Logo

Posted by Amy at 9:27 am

Resizing Images for the Web

Posted by Amy at 8:37 pm

Why Do I need to Resize my photos?

Often times, pictures from our digital cameras are very large. This is because there are different image resolutions for printing photos vs. simply viewing photos on the web.

Print Images

Image size for printing is determined by how many pixels-per-inch (ppi) make up a photo or image. The amount of pixels (or dots) can range from a lot (300 ppi) to a little (72 ppi). When you are printing a photograph from your camera, the rule of thumb is to use the highest ppi possible for the size you need. Most printers will recommend using 300 ppi as your setting.

Web Images

The web works a little differently. To understand how image ppi affects images displayed on webpages, consider this formula: 1-1.

Pixels-per-inch is irrelevant to images on the web.
Rather, they are based on how many pixels the image has. The goal is to resize your photo to exactly what size you will be using it on the website. A general rule of thumb is that about 100 pixels = approximately 1 inch on a website. By sizing down your photos appropriately for what you are using them for, you will reduce the file size and make the page load faster.

Why use PPI then?
We recommend the setting of 72 ppi for the web. Why? Because you have to put something in the box in most image editing programs, such as Adobe Photoshop. But when Photoshop asks for ppi in the Image Size dialog, this value is used to determine how Photoshop converts the pixel dimensions of the image into printed inches.

Recommended Programs

There are 3 free programs that we recommend for resizing your images:

1. Resize.it
   This is an online tool that will resize and crop a single photo for you quickly – no need to install any software onto your computer!
2. Microsoft Office Picture Manager
   Microsoft Picture Manager is installed with all Office Suites, so you should already have it! With this program you can manage, edit, share, and view your pictures from where you store them on your computer. Picture Manager can correct your pictures, with editing tools to crop, expand, or copy and paste.  Click here to read Microsoft’s tutorial on using Picture Manager.
3. Microsoft Image Resizer Powertoy
   This PowerToy enables you to resize one or many image files with a right-click. After a simple one-time install from the Microsoft website you’ll be able to resize your photos in two steps! 
   1. Click here to download the Picture Resizer, or visit this link, and click on the PowerToys tab, then look for the Image Resizer PowerToy.
   2. Navigate to the folder on your computer where the photo you want to resize is.
   3. Right-Click on the image (or hold down SHIFT to select multiple photos for resizing) and select “Resize Pictures” from the menu
   4. A dialogue box will appear with 4 options: Small, Medium, Large and Handheld PC. Choose one of these predetermined settings if they work for your needs.
   5. You can also click the “Advanced” button for more options. This comes in useful if you are resizing multiple photos at once.
      1. Make Pictures Smaller But Not Larger: This setting allows you to resize all your photos to a certain size, but if there’s an image in the folder that’s small than your determined size, it will leave it alone. This is a nice option to have because making your pictures larger usually results in blurriness and poor image quality.
      2. Resize the Original Pictures (Don’t Create Copies): The default for the Image Resizer is to create a copy of your image so that you don’t overwrite your large, high-quality files. This option will overwrite the photos for you (Not recommended).
   6. When you click “OK” the Image Resizer will create a copy of the photo in the new size in the same location as your original photo.

Have a Mac?

We’ve got you covered. You can download OX Image Resizer to resize your photos.

1. The first screen allows you to choose your “resize settings” such as width and height. At the bottom of the screen you can click on Add File/Folder in order to select the images you’d like to resize.
2. The second tab is called “Output Files” and allows you to choose the folder location on your computer (the Directory) as well as several options for renaming your photos.
3. The JPEG and PNG-24 tabs allow you to select the file type you’d like the resized images to output as. If you are using this tool to resize the images for the web, we recommend using the JPEG setting. Choose a compression level around 75 and click the button Resize Images to JPEGs. A lower compression level will make the file size smaller, but will also result in a lower quality output.
4. The next step is to navigate to the folder on your Mac that you choose in step 2. These images are resized and ready for you to upload to your website.

Steamtown Music Showcase

Posted by Amy at 6:20 pm

The Steamtown Original Music Showcase has been one of our clients since the beginning of Bullzeye Design. Since 2006, the showcase has grown from being a small local music concert to an event that brings in musical acts and industry professionals from all over the country.

Steamtown Showcase 2007 Flyer

In 2007 Bullzeye Design was asked to develop a graphic identity for the showcase, which they have used consistently in all their promotional materials for the past 4 years. Our first promotional project with them was double-sided bar flyers in 2007. The flyers were simple, and were meant to boast the new logo design to gain the company recognition of their identity. Making sure to highlight to date and admission price of the event prominently, the clean, organized layout works well to promote this little-known (at the time) event prominently. Since then, we’ve been asked to design a new concept each year.

Steamtown Showcase 2008 Flyer

The 2008 Showcase Flyer design played off the same color scheme as the previous year, and showed off a brighter, bolder “orange” color for the important text to give it new life. The Showcase grew tremendously since the previous year, adding an additional night and a total of 10 venues throughout Scranton. After seeing the flyer, organizer John Phillips replied, “Not trying to flatter you, but it is your best flyer yet. You seriously have a gift…” What a statement to live up to for the next year!

Steamtown Music Showcase 2009 Flyer

Enter 2009. While promoting the showcase we decided to go in a slightly different direction. Instead of including all the content on a single side of the flyer (and then duplicating the content on the back, so each side had the same message), we went with a true 2-sided flyer. The front featured cartoon musicians in the background with a narrow copy layout and a darker background. On this side you’ll see the logo, venues and sponsors. On the back, we used a similar cartoon-feel for the background, but reversed the colors and featured the crowd rather than the musicians. Unique content on this side were the featured acts and a type-only treatment of the logo. On both sides we featured the event date, hopper pass information and the website details. While this flyer is pulling away from the original 2007 flyer design, we’ve continued to bring elements over from year-to-year to maintain consistency. The logo remained, and we used the orange from the 2008 flyer as the accent color.

2010 Steamtown Music Showcase Flyer

The 2010 Steamtown Showcase Flyer is the furthest transition from the other years. While maintaining the same logo, we’ve taken elements from other years:

• 2007 font accent color
• 2007 “grunge” background style
• 2008 “slanted” text
• 2009 tilted logo

The flyer introduced a new color for the year: teal. This gave us the opportunity to pull a little bit further away from the style of the original, while still keeping it “part of the family.”

2011 will bring exceiting things for the Steamtown Showcase and we’re looking forward to helping them with not only their club flyers, but sponsorship booklets, city maps, and other promotional items. Stay tuned.

Introducing the “NEW” SafeTeens

Posted by Amy at 5:00 pm

We are so excited to announce the launch of our newest logo and website redesign: Safeteens.org.

View The Press Release:
Maternal & Family Health Services Announces Launch of Newly Redesigned Safeteens.org
Maternal & Family Health Services, Inc. announces the launch of the new Safeteens.org. The newly redesigned Safeteens is a resource on healthy living and safe sex for Pennsylvania teens as well as teens across the country. New features and improved functionality makes it easy for teens to get reliable health information and find family planning health centers across the state of Pennsylvania.

Safeteens is a resource for teens, providing reliable health information and a direct link to Family Planning health centers located throughout Pennsylvania.  The Safeteens logo and website were in desperate need of updating and the client had many goals in mind for improving the website.  Some of their major goals included:

• Increase the overall usability of the website by:
  • Eliminating Flash animation and music from the website
  • The creation of a 404 Error page, and 301 redirects (if someone goes to a page from the old site that no longer exists, this gives the ability to redirect to the closest matching page on the new site)
  • Development of a clear hierarchy, or sitemap, of pages along with breadcrumb navigation.
• CMS capabilities so that staff would be able to add to and update the site
• Addition of a news blog, with the ability for the user to ‘comment’ on articles and share them with friends
• Interactive features, such as a dynamic “Find a Health Center” address database, featured polls, featured homepage articles, and featured YouTube videos.
• Integration of social media, such as displaying a Twitter feed, and allowing the user to share pages, news posts, and other elements of the site on Facebook.

This project included the creation of an iconic logo. In order for an icon to be a truly effective logo, it should be easily recognizable and memorable, while remaining clear when reproduced in small sizes. Upon approval, their new logo was used as the inspiration that the entire website was designed around.

The redesign process began with extensive research on how teens use the web; what they like, what they dislike, and how to make their website more appealing to the target audience (pre-teens and early teens).

Here you’ll see the before and after of the Safeteens redesign:

Safeteens Homepage Before

Safeteens Interior Page Before

The NEW Safeteens!

SafeTeens.org Website

Posted by Amy at 4:56 pm