For those of you who have your own websites, you know how important marketing yourself can be. Most people use social media to further their digital networks. Having links to your individual avenues often does not directly translate to likes or follows. In order to combat this, Facebook has long had their like button coding available for developers. Twitter now has their new “one click follow” button that now serves the same purpose. Here’s how to do get the codes for both:

Facebook Like Button:

Go to the Facebook Developer Center to the plugin area and click on the Like Button section. It is completely customizable and easy to use. It will autopopulate any information from your page once you provide the URL. You can customize what is viewable, like the current fan count and their photos. Click “get code” after you finish setting the perambulators and it will enable you to choose iframe coding or xfbml.

Twitter Follow Button:
Go to the Twitter Resource Area and click on the Follow Button. Provide your desired username and it will produce the coding for you.

We recommend the use of these buttons to help your users stay plugged in and give you instant response. While we are on the subject, click either of our following buttons if you would like to stay connected to the Dealy. We love to be liked.

So, with the discussion over image formats yesterday, we thought it would be cool to go over how to make an animated gif. Here is a step by step tutorial to get you moving.

1. Open Photoshop and create a new document (any size you want as long as it’s a web friendly size)

2. Paste all of the images you intend to use on separate layers.

3. Click the window tab and select animation.

4. Once the dialog box at the bottom of the screen appears (and if you prefer), press the convert to frame animation setting.

5. Open the animation option menu by clicking the pull down in the right corner of the animation dialog box and select “make frames from layers” from the pull down.

this should populate the animation dialog box with each individual frame

6. Choose time intervals for each frame by clicking on the frame’s drop down seen in the lower right corner of each pane.

7. After getting all of the frames set, choose what interval you want your animation to loop in.

8. When you’re ready – save for web and devices.

9. Last but not least – post your new animated gif to the web

Now you can create your own fun animations – we encourage you to get rockin!

Continuing our series on design vernacular and comprehension, today we will be discussing aspects of web design. There are many things that cannot be done in web that can be accomplished in print and vice versa.

RGB – Light has its own color base consisting of red, green, and blue. Everything that is emmitting light to the eye is displaying in this color frequency (e.g. television, computer monitors, phone screens, portable game systems, etc). While CMYK varies through tones, RGB color displays are modified by using different levels of brightness from its electronic source. RGB is the format for which we design web elements because it is being displayed on a monitor (or a light source).

Each diagram shows the RGB level of brightness

Web Colors – Not all colors display evenly across multiple browsers or on other monitors. It is important to use web colors to insure (as much as you can) that everyone is seeing relatively the same thing. This can be accomplished through using Hexadecimal notation, also referred to as hexdes or just HEX. With the combination of Red, Green, and Blue values from 0 to 255, more than 16 million different colors are possible. Each color has their own number/letter correspondence. So if you want to make sure all colors are the same, use the HEX. Without realizing it, during the wild years of MySpace and LiveJournal people used hexdes to make their posts more sassy.

Remember These?

Pixels & Resolutions - In the digital world everything is made of pixels. A pixel is a single point(or dot) in a raster image. Pixels are responsible for resolution. Display resolution dictates how many pixels can be displayed in that designated area (i.e. the more pixels per inch you can display – the better the resolution). Also note that the higher the resolution the bigger the assets tend to be. The standard pixel resolution for web  is 72 ppi or 72 pixels per inch (or dpi – dots per inch). This is the main reason why images made for web cannot later be translated to print. Most print documents range from 150 ppi on the low end to 300 ppi on the high end.

Pixels Magnified

Resolution is just one aspect of producing web assets. Once the resolution is set, the asset needs to adhere to pixel height and pixel width. When creating a website, for instance, the canvas size is usually 1024 x 768 (with larger monitors in mind) but can vary depending on what browser/monitor size you are trying to accommodate.

Monitor Size - Pixel Ratio Relationship

Web Safe Fonts - All computers have different sets of  fonts. A graphic designer may have close to a 1,000+ fonts on their computers, whereas most computers come standard with about 30 or so. In order to display text for all to see, web standards dictate that only a select number of fonts can be utilized. These are the fonts that come standard to every computer. So when designing for the web – it is important to know if special fonts are used, they have to be imaged (made into a picture instead of text). If you want the text to be “scrapeable” meaning you can copy and paste it from the web, you have to use web safe fonts. To see what they all look like click here.

Dreamweaver Font Dialogue Box

Image Formats – while there are many image formats, the three main types specific to web are:

• JPEG (Joint Photographic Experts Group) is the most common. It’s a flattened image able to support 24 bits per pixel of color (16 million colors) and 8 bits per pixel in grayscale. Jpegs are referred to as “lossy”, meaning as they compress, image data is discarded or “lost”. When compressed lower or scaled beyond its original pixel dimension – jpegs display what are called “artifacts” which is noticeable pixel distortion.
  

  Artifacts & Jpegs = Nasty Mix

• PNG (Portable Network Graphics) is the second most common and the most used in modern web development. PNG’s are a lossless compression image format which also allow for 24 bits per pixel of color (16 million colors) and 8 bits per pixel in gray-scale. The beautiful part about pngs, and perhaps why they are being used more, is that they can handle transparency. Unlike a jpeg – when you save a png on a transparent background it will display that way. The reason this is so nice is, you can have them on any background color and it will appear natural.

Compare and Contrast

• GIF (Graphics Interchange Format) is now less common but still in use. The png was actually created to replace the gif seeing as how it can accomplish more. GIFs deal in 8-bits but can also handle transparency. GIFs were more popular in the infacy of the internet due to their animation ability. People used gifs like stop motion stills to make movable images. For the longest time this was the alternative to video which was taking too much computing power in the early 90s. They have found a resurgence with digital artists.

The Gif of movement by Jamie Beck

That about wraps it up for the web portion of Mi Casa. I hope that it was both informative and exciting!

Until next time….

In the advertising world – there has always been a sigma as to which “side of the house” you’re on. Either you’re a creative or you’re on accounts. Nowadays, with the emergence of integrated ad agencies, creatives are starting to become more client facing and account people are learning more about design. We are going to discuss some design terms to help our marketing friends understand our vocational vocabulary, limitations, and abilities.

Today we will discuss the various elements of PRINT.

CMYK - Color is relayed in two different formats, RBG and CMYK. CMYK (cyan, magenta, yellow, and key (black) are the base colors of print. These four ink colors are superimposed onto each other in varying amounts creating an illusion of more colors, like those in a photograph. This is also referred as 4-color process printing.

A standard printer is a four color processor – meaning it can only handle formulas made from a CMKY base. If a job is set up in a different format (say RGB) it won’t print the way you think it will. Designers have to be aware of format when setting up a print document.

Pantone® or PMS - If you want to make sure exact colors are used without variances, Pantone® is the way to go. This method of coding colors “created an innovative system for identifying, matching and communicating colors to solve the problems associated with producing accurate color matches in the graphic arts community” (Pantone®). There are also many different types of Pantone® swatches, each one with their own code which corresponds to a mixing formula. There is solid, process, neon, pastel, and metallic – each offered in both coated and uncoated(except metallic). Coated is meant for glossy-coated papers. Uncoated is meant for plain untreated papers. Different paper treatments absorb inks differently, so the Pantone® colors are changed slightly to compensate for that absorption. Pantone® colors are usually used in what is called spot printing.  Spot color printing or Pantone Matching Systems® (PMS) is where each PMS color is mixed according to its unique formula and applied individually to the sheet. The Dealy PMS code is PANTONE 165 U (in case you were wondering).

Bleeds – printers cannot ink anything close to an edge. To prevent spills and leaks every printer(the actual machine) is set to shrink things down and make a faux border to prevent this from happening. If you want something printed with color/graphics all the way to the edge, you have to print it on bigger paper and cut it to the correct size. In order to prevent the printers(the actual people doing the job) from pulling out their hair and to save money, designers have to set up their documents to accommodate a bleed. Standard bleeds range from 1/8″ to 1/2″ depending on what is being printed. If you have a 8.5″ x 11″ print and you need a 1/8″ bleed, your document set up size will be 8.625″ x 11.125″. Most of the time this is where more of the printing cost is accrued. The bigger the paper and the more trimming that needs to be done = more $$$.  So to put it simply – the bleed is everything that is going to be cut off. If you don’t have a bleed set, then be prepared to see a white boarder.

Original artwork provided by Josh Overton by way of Abduzeedo

The American Advertising Federation (AAF), is a well known organization for students and industry professionals alike. Their mission: “protects and promotes the well-being of advertising. We accomplish this through a unique, nationally coordinated grassroots network of advertisers, agencies, media companies, local advertising clubs and college chapters”. While this is a national organization, there are many individual chapters that help each member become more involved in their particular advertising community. Each subsidiary is called Ad2 [insert your city name].

Through school and other members, I’ve come to know of Ad2 Phoenix, which is famous for its unique events, job listings, and overall public service. Any member of the AZ design or advertising community can tell you, they are a natural go to for industry information in this state.

We would like to help our traveling AAF members who find themselves in a new city and want to Ad2 community involvement. Here is a list of all the acting Ad2 Chapters:

Austin

Cincinnati

Denver

Ft. Lauderdale

Honolulu

Houston

Madison

Miami

Milwaukee

Minneapolis

Nashville

Oklahoma City

Orange County

Orlando

Phoenix

Reno

Roanoke

San Diego

San Francisco

Seattle

Tampa Bay

Tucson

Washington D.C.

West Michigan

So even if you’re not moving or you’re just visiting – it is always encouraged to see what’s going in other advertising circles. Broaden your horizons and Ad2 knowledge base.

Graphic Designers utilize many different tools like fonts, Photoshop brushes, vector elements, textures, you name it. If you are on the look out for free design elements, here are a few sources (please note all images are a direct link to the free sections of each site):

When it comes to free design assets or help, Smashing Magazine is guaranteed money in the bank! They have everything from free wire-framing aids to free PS icons and everything in between.

Abduzeedo is a natural go-to for design inspiration. They have free textures, tuts, wallpapers, fonts, and all around good information.

Inspiredology freebie section offers a variety of fonts, textures, tuts, backgrounds, and vectors.

As their titles may suggest – Vecteezy has a plethera of free vectors, whereas Brusheezy has  a wide variety of Photoshop brushes and patterns.

Veer (aka Corbis’ younger sister) is a fun and inexpensive source of stock photography and fonts. They offer some pretty awesome and original freebies (backgrounds, fonts, etc). MyFonts is a good source to find pretty much any family there is. They also offer many well made typefaces for free.

Icon Finder, or as I like to call it “Icon Google” is one of the best sources for finding high resolution PNG icons. Their database is gigantic and you can segment your search for the royalty free icons.

There are many more sources out there for free design elements. We will keep an eye out for them and report back. Please comment if you have a few of your own that you would like to share.

Local graphic designer Erin Radler (who inspired Tee Time part 1) submitted a few designs to Threadless that are now up for ranking. This is how their apparel lines get started. Be apart of the process and help out a local designer (congrats Erin, fingers crossed).

RANK IT NOW!

Venter Badass

RANK IT NOW! 

Dr. Misses Badass

The two main differences between good web design and great web design are the user interface and the user experience. Case-Mate, already known for their amazing variety and quality, decided to appeal directly to the smart phone customer base. Case-Mate has created an experience  for users to choose their device, gives them pre-made artwork from various artists, and lets them manipulate every aspect to create their own personal design. All of this done via spectacular user interfacing on their aptly named site “I Make My Case” website.

Pick Your Poison

Find Your Artist

Assess Your Canvas

Create!

While credit for this beautiful masterpiece goes to a few different sources – I was fortunate to find the web designer who started it all, one Mr. Edwin Tofslie. Finding his portfolio site (which is also inspiration mecca), made it evident that there is a whole new level of sophistication in web design. Edwin’s designs are monument for what we as users want to see and what most designers aspire to create. Here is an example of what Edwin’s site used to look like:

Out of Site

Always in mind

Imagine dynamic mini-websites operating inside of one giant site. Being immediately immersed, I kept tabs on his work as his portfolio grew. His new site has a lot more humor to it with an interesting video clip that plays on welcome. With every click, you see the evolution, the class, and the pure optical splender that his design asthetic yields. You are most encouraged delve deeper to Tofslie’s world (note he also has a blog).

Here and Now

As designers and/or marketers, it is easy to keep our noses to the grindstone and stick to what we know. It takes people like Edwin to remind us to come up for some fresh air. There is a whole new world of design evolving out there, so stay inspired.

The sale of graphic tees has become a booming business and venue for artist expression. First made popular in the 80′s,  the vintage look came back into style by way of this decorative apparel. These light weight 50/50′s with a print front and center are selling like mad. So if you’re looking for micro-stardom, this is the avenue for you.

As of late the “Get them while they’re hot” mentality has been driving  the web-based t-shirt business. Sites like Tee Fury, Shirt Woot, and the ever popular Threadless utilize lower cost for a limited time to drive sales.

Threadless - Dig those low prices

Where Tee Fury and  Shirt Woot differ is, they only offer one shirt per day at the sale price. Sites like Tee Magnet help eager users find the latest “daily shirt deals”.

But besides all the great deals, these sites offer anyone a chance to submit a design. Now don’t misunderstand, they are very picky about what gets printed, as they should be. If your designs are chosen, you are  compensated monetarily(prices vary per site), and in bragging rights of course. Threadless offers the highest price for your designs.

“If your idea is selected:

• $2,000 in cash
• $500 Threadless Gift Certificate (can be redeemed for $200 cash)
• $500 in cash each time your design is reprinted
• Alumni Club membership including a Medal of Honor and other goodies”

Their submission process a lot more in-depth than others. Download their Submission Kit to find out what they want, how they want it, and next steps. If you are more of a writer than a designer, they have a slogan contest as well. The winner gets $500 and their catch phrase printed. This option is all about votes, so you have to share.

Tee Fury on the other hand offers  “24 hours of crazy fame and stardom! Not to mention, we pay $1 per shirt sold and the artist retains full rights to their design.” The submission criteria are relatively simple. Six colors, only the front, original submission 640 x 800 pixels.

Shirt Woot does offer money for your designs but they get a bit secretive on how much. Their submission process is also a bit more tricky (using a mail to).Granted there are many more sites for which your designs can be submitted, these are just the main three. The up and coming shirt sites like Ript and Tilteed also have some great content.

The Dealy Shirt of the Day is brought to you by Joebot by way of Ript – $10 but only for today! We wish you happy hunting.

By Your Command Tee

E-commerce is always a tricky concept to grasp, especially when it comes to web development and the user experience. Facebook has added the ability to buy merchandise from the comfort of your favorite preferred pages. While there are many applications that will enable you to do this, some stand far above all others. One of my favorites, due to simplicity on the dev end and usability, is ShopTab

This little diagram should tell you roughly everything you need to know about how it works:

How it works

They also have a pretty low price point for starters. This method of sales can be great for budding businesses and  non-profit organizations alike. ShopTab is also a big supporter of co-marketing. Via their blog, the “eCommerce Cart of the Week” is chosen to further the social share. Visit the ShopTab Blog to find out more.

There are a variety of companies utilizing their services (i.e. Coca-Cola, Barneys NY, SillyBandz, etc).

Coca-Cola Merch

Granted companies like Procter & Gamble or MTV like to keep their web design streamlined and want their stores on all platforms to look and function similarly. These corporate giants have Amazon create a Facebook store for them. Amazon has long offered its services via the Amazon Webstore, creating eCommerce options for companies on their own sites. They have extended this service to Facebook by recreating company stores on the social networking site.  Here is a look at what they did for MTV’s favored show “Jersey Shore”

Amazon Takes a Trip to the Shore

Both eCommerce Facebook applications offer many great benefits to their clients and the subsequent end user. Hopefully this provided a little behind the scenes for everyone – happy shopping!