Tutorial: Creating “Custom” Logos and Icons

In this tutorial we will go over the process of creating your own custom made logos and icons for use with Nollr. The tutorial covers image sizes, as well as best practices for cropping, saving, and finally uploading and hosting your graphics. If you have any questions, issues, or feedback, reach out to us at feedback@nollr.com.


SIZES OVERVIEW

Nollr frames are currently formatted in two aspect ratios, 16:9, commonly referred to as widescreen and 3:4 which is a common proportion in multimedia and publishing. We spent a fair amount of time developing the proper sizings, spacings and proportions of our frames and our page. Designers traditionally refer to this kind of effort as developing the page layout grid.

For each frame size we list resolution choices below: 1) True Size and 2) Future Proof Size. The True Size is the exact size of the frame at 72 pixels (px). The Future Proof size is double the size of the True size, which is to allow for higher resolution screens and sizes in the future. Although using the True size can make the page load slightly faster, we suggest the Future proof size as it ensures that Nollr assets remain robust well into the future.

16:9 Sizes

  • True Size – 276px x 155px
  • Future Proof Size – 552px x 310px (Recommended)

3:4 Sizes

  • True Size – 276px x 368px
  • Future Proof Size – 552px x 736px (Recommended)

Cropping Guidelines

There are a few simple things you can do to ensure your custom made logos or icons jive with Nollr. This is especially important if you are willing to share your frames with others by setting your page to public. Here are just a few things for you to consider while making your frame graphics.

  1. Stay inside the guides (see templates below) and center your graphic. It will make your graphic look cleaner and make it easier to read.
  2. Never stretch or skew a graphic and always maintain the original proportions. Tip: When scaling images hold down shift.
  3. You can only decrease (never increase) the original resolution of raster images.

Pre-made Templates

Right-click and save link as:

  • 16:9 Photoshop Template (.psd) – Download
  • 3:4 Photoshop Template (.psd) – Download


PREFERRED FILE FORMATS

  • For Full Color Logos/Photos – JPEG (80% Quality)
  • For Icons with Transparent Backgrounds  - PNG (8 Bit)
  • For Looped Animations – GIF (8 Bit)


LINKING TO CUSTOM GRAPHICS

Nollr does not currently host user-supplied images on the Nollr server. Once you create your graphics, you will need to save them to a server where a Nollr can pull them into your web browser. Images you see on web pages are hosted on web servers that can be accessed anytime and anywhere. If you already host or maintain a website, then you are using a server. If your image is on the web or in the “cloud”, there is a path to that image, or URL, that can be used on Nollr (place this URL into the “Contents” field in Frame Settings). So, to summarize regardless of which service you use to host your graphics, you can place the image URL (ending with the filename) into the Contents field of a Nollr Frame and, like magic, it should show up.

- – -

Last Updated: 130306

 

Leave a Reply

Your email address will not be published. Required fields are marked *


eight × 1 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>