Oct 4, 2014

CSS Tricks: Automate Complex Tasks Like A Ninja

By Paul Schmitt   Posted at  9:00 AM  Oct 4, 2014   web design No comments
Traditional image editing vs global code-based image editing.
Learn how to make global level graphic edits without uploading a single JPG.

I. Create Code Based Global Drop Shadows
Coming from a Print Design background, there were several tricks that I learned to make graphics pop. Without these techniques the product pages that I worked on would have been dull, flat and frankly, overwhelming.

Like the stock prices listed in the daily newspaper these ads could have been pure info and rendered in a dull way. With a few tricks, information flows in rows and columns guiding the reader through the spots almost effortlessly. Before they know it they've caught the logo, tagline and product in a few seconds.

Why not use these common techniques from newspaper ads and circulars on web-based work in a broad, code-based way?

The most basic lay-out trick are drop shadows. Catalogs and national auto ads in particular use a lot of drop shadows on their products. It's pretty common for product images online to have these same drop shadows but: can they do it in a timely way when there are thousands of items?

One choice is to add shadows in Photoshop. One by one. This would require a great deal of time, setting up shadows on each layer and then uploading each processed image. There is no ninja-ing here. This task is dry and dull. It is work that no one will ever enjoy doing.

Instead of image processing in this way, we could define some CSS code to apply a shadow to a series of images that we can change globally. This way we can refer to it automatically by using the class tag. Any changes to this class code would effect every shadow that it was applied to w/out uploading a single image.

Floating in space or...
Sitting in place?

Figure A. One image displayed with two methods. The first is a flat JPG. The second is a PNG on a transparent background with a CSS3 based drop shadow.

Above, in Figure A, are two images. The first is a JPG on a white background. The second is a PNG with a transparent background. To add a shadow on the JPG we have to adjust several settings in Photoshop to get a drop shadow, save it and upload it. To add a drop shadow under the PNG all we need to do is create a couple <div> elements with settings that will emulate a drop shadow.

Let's start with adding a CSS3 drop shadow to one image and then move into a global solution based on those results.

First, we need to drop a PNG image into a <div>. Next, we set it's stacking order be on the top with a property called "z-index". The lower the z-index number, the lower it's stacking order. This image's stack position will be 2.

Figure B. The start of the code. The image is in a 200px wide <div>.

Now that our image is in a <div> (Figure B) we need to get it in place. We will add the "float" property in combination with the "position" property. This allows us the ability to move the image <div> where we need it. Float will be set to "left" (float:left;) and position will be set to "relative" (position:relative;) meaning that the <div> will position itself with regard to surrounding divs.

With the image <div> floated, it can be moved around by using top/left/right/bottom properties instead of margin or padding. In this case, we need to state "right:-200px;" to get it into place in the frame. Check that these properties are set by referring to Figure D. below.

Next, add a 200px wide 40px tall <div> directly below it with black as it's background-color. Then, we turn it into a simple shape with CSS3 by adding the following code:


Figure C. This code defines a shape inside of the shadow object. No image is needed.

This creates a black cylinder within the shadow <div>. For cross-browser fucntionality we use -moz for a Firefox specific property, -webkit for Safari and border-radius for Explorer.

The float and position properties for this one are important here. Set the position to "absolute". This setting means that the shadow placement is fixed in place. We will need to adjust it using margin-top and margin-left.


Figure D. Two divs lined up with the shadow underneath of the image.

This cylinder shape is "floating" directly underneath the image. Lastly, this shadow <div> has a z-index of 1. This setting will place the shadow object below the image that it appears to be falling from.

PNG with a solid shadow underneath of it.

Figure E. The two divs from Figure D are implemented on this page.

II. Refining The Shadow
Now we have an initial drop shadow in place. This black shape represents the total area where the shadow will fall. Time to refine this rough shape with a few tricks.

In Photoshop and Illustrator, we have access to gradients. CSS3 can emulate these gradients with both linear and radial options. Add the following code to the shadow <div> to create a gradient:

Figure F. This CSS changes the flat black oval into a gradient that spreads from the center.

This code, written for cross-browser functionality, will create a radial gradient.

The gradient starts in the center of the shadow <div> and moves from dark gray at 50% opacity (rgba(90,90,90,.5) to a light gray at 20% opacity (rgba(190,190,190,.2) and end at white at 10% opacity (rgba(255,255,255,.1).

Some Background:
This gradient works for images on a white background, like our example, but the white value (rgba(255,255,255,.1)) would have to be adjusted for this trick to work on images appearing on a different background color.

At this point, we have the the image and shadow in place. Now, these elements should be encased in a third outer "container" <div> to allow for centering of the product photo. After aligning them inside this "container" the entire three-part element should look like this:

The PNG has a gradient drop shadow beneath of it.

Figure G. Everything as it should look at this point. The image and gradient drop shadow are lined up.

And this is the code for the image above:

Figure H. The code for the HTML divs. One more step and we are automated.

That's all the heavy stuff. Now we move onto stream-lining the HTML and CSS. But before we do that we can also...

Flip The Script!
To use this method with JPG images on white backgrounds, you can reverse the stacking order. This will place the shadow layer on top of the JPG. However, with JPG images on a white background there are potential cross-browser/device alignment issues. Try this method after you've successfully completed this tutorial with this PNG.

OK, now that the script got momentarily flipped we can continue.

As mentioned in the beginning of this tutorial, we need to prep this code to be used on a wide array of images.

The image and shadow portions of the code need to be separated and packed into a CSS document with a class for each. In this way, the code can be referred to repeatedly on each object that needs this type of drop shadow.

Figure I. The HTML and CSS for the divs are separated. A new class now controls the drop shadow.

Now the solution for one product can be a solution for a group products, helmets in this example. Every <div> that uses the shadow class is edited along with this one piece of CSS. So, when you have it right in one place you have it right in dozens of places as well. The best part is that you never had to edit or upload a single image.

Note that in the CSS for this final example, all of the characteristics for the shadow <div> are defined. In the HTML tab less than 25 characters are used for the shadow. The image element is 25 characters plus the image URL and alt tag. This is handy for SEO guidelines when you have multiple images that need shadows on a page.

Try it out. See what you can come up with. Next time, controlling drop shadows on a <div> in a very different way using the mysterious shadow-box functions.

Sep 19, 2014

Graphic Design: Print vs Web

By Paul Schmitt   Posted at  3:13 PM  Sep 19, 2014   web design No comments
IT Services Promotional Postcard
Print is not dead or dying. It's not even taking a breather.

I. Print Now or Web Ready?
This week, three jobs rushed out the doors from here at the design desk. Two jobs were web sites and the third was a print job - a pretty good ratio. While I was working on these different jobs, I started thinking about the multiple areas of overlap between print and web based techniques.

At it's heart, Graphic Design for print and web are practically twin brothers. They both look identical on the surface but below that surface layer they are very different people. Very different people who happen to being doing the exact same job: Communication.

Print work, Twin #1, is demanding. It's unforgiving with very little margin for error. Once a typo or a bad image goes to press - it's frickin' permanent. And you, as a designer or a project manager will hear about it. Yet, even in circular ads and for direct mail, print is by far taken much more seriously than any well-designed email ever will be.

Print design produces a solid, authentic and tangible product. Anyone can understand it. No electricity, browser related errors or internet connection needed. Catalogs are much more accessible than search boxes. Art prints beat electronic wallpapers hands down. There's an inherent value to print despite all the premature reports of it's death.

However, the one thing that a static catalog or newspaper cannot do is change.

Web Design, Twin #2, is much more forgiving but several orders more complicated. Why should that be? Aren't each simply communicating a message? Here is where Twin #2's many complications begin...

Once, there was just Microsoft's Internet Explorer, which dominated the internet browser market, and Netscape. Designers in the 1990's had free range to throw scaled-down print graphics online. They were free to do so in anyway they wanted to just so long as they fit into HTML tables.

The results, then, were nearly identical. The code for Explorer and Netscape, at that time, was not so radically different.

HTML5 CSS3 Portfolio Web Site
An HTML5 CSS3 W3C Complaint Cross-browser compatible website. Say that three times fast.

Today, there are dozens of smaller browsers and four mainstream internet browsers - Chrome, Firefox, Safari, Explorer. Add to that two varieties of mobile browsers (phone/tablet) with Mac and PC variants.

In 2014, Explorer users make up between as low as 10%-25% of the market. All of the HTML protocol that was originally written for Explorer in the 90's now only applies in the loosest possible way to a much larger digital landscape.

"Today, all browsers new and old are expected to play by the same rules that were hastily written in a different decade for an increasingly obsolete program."

The most popular browsers today (the oldest of which is Safari written in 2003) use software that operates very differently than the original programmers could have imagined. These browsers display text and graphics in much more stream-lined, effective and efficient way than Explorer does now or did in the 90's.

Designers today live and work in the era of The Browser Wars. Today, all browsers new and old are expected to play by the same rules that were hastily written in a different decade for an increasingly obsolete program.

Browser Popularity 2009 to 2014
Internet browser popularity 2009-2014 as tracked by Stat Counter and chronicled on Wikipedia.

II. HTML Finally Evolves
The good news is that: through robust competition in the browser market, the HTML language has been forced to re-invent several critical aspects of it's own structure with HTML5.

This re-invention of HTML allows for many things including stream-lining audio and video. For example. the <video> allows for a broader usage of Youtube, Vimeo and video applications which were not even considered in the early days of a dial-up Internet.

In those days, downloading a 2Mb extension to view a website would stop a viewer dead in his or her Pennyloafers. Today, with widespread high-speed internet and client-side scripting, it's barely noticeable. HTML5 makes this aspect much more accessible to designers.

Next, and most importantly, in re-considering the current HTML and writing HTML5 the first building blocks of all HTML sites were examined; namely - tables. This brings us to an unavoidable situation and the bad news: Chrome, Firefox, Safari and Explorer each interpret tables differently. That includes table alignment methods, table borders/padding and even how standard image formats are seen inside of tables. This produced an amazing array of possible errors with tables depending on which browser is used.

Since designing tables for just one browser or for just mobile devices is not a viable methodology - finding a better solution became critical. Enter the seldom used <div> tag from HTML4 which is now critical to the under-lying structure of HTML5 sites.

With neatly stacked <div> containers, questionable tables are no longer essential. Dividers (divs) allow a more cross-browser friendly web design to be developed. No special lines of code have to be added to collapse tables and borders or to center text and graphics in the HTML. This method removes unnecessary redundancy and the high probability of misaligned graphics and text within tables.

HTML5 CSS3 Restaurant Web Site
Using modern specs, a site looks the same in Chrome, Firefox, Safari or Explorer.

The are complexities that have to addressed in both print and web based Graphic Design for designers. To say one method is more or less complicated is not a productive line of thought. What is productive to recognize is: access to audiences and target markets is easier today than it has ever been.

The methods to reach them are only a matter of style. Consistency in message, print or web, is all that is important in this context.

Next time, I would like to talk about practical usage of CSS3 for image editing. I'll show you guys some style sheet code examples that mimic Photoshop tricks for shading, shadows and highlights.


Sep 15, 2014

Balancing Graphic Design And Illustration

By Paul Schmitt   Posted at  2:58 PM  Sep 15, 2014   prints No comments
Ferdinando Ongania Early Venetian Printing Illustrated
This book is part of Archive.org - a collection of rare and important historical books.

Illustration and Graphic Design are thought of as two separate disciplines. This can be the case. They are two separate job descriptions. However, in many important ways the two over-lap. Not only in the document, newspaper, catalog or web site that they appear in but in the purpose that they serve.

And that purpose is simple: relay information is a structured way.

In catalogs, art falls on top of photography with sizes, prices or shipping information. On a website, borders, shadows and artwork shape the borders that photography appears in. It is a technique that is used so much that it is almost invisible.

What about examples of these techniques in another era? We should be able to spot the transitions and archiac techniques much more quickly there.

The goal in 1500 is the same as now: relate important information with a balance of Graphic Design and Illustration.

Ferdinando Ongania's Early Venetian Printing Illustrated, the book above, was originally published in 1895 but covers Italian Renaissance prints and illustration work from roughly 1400 to 1600. Here, there there are is an incredible integration of graphic design (text and textual elements) and illustration.

Since there is no photography, the balance is achieved by placement of elements with a structural similarity. The text seems illustrated and the illustrations contain text.

We can see this harmony at work but without the slick gradients, shading layers and glossy styles that are commonplace today. The important thing to remember is that these Classic era designers had the exact same purpose that Designers and Illustrators have today, and no mutually exclusive job titles.

For further reading, Artist and Designer Johnathon Coulthart has a review of individual pages and styles from this book at his blog Feuilleton.

Jul 21, 2014

Logo Design

By Paul Schmitt   Posted at  3:03 PM  Jul 21, 2014   graphic design 1 comment
Prouduction Company Logo

Logo design can be a tough task! A company's identity, communicated by fonts and artwork, is the most critical part of their business presence in the public eye. Here are a few logos that I've worked on recently.

Retail Logo

Westview Gardens is a small company in Queensland, Australia. I worked with the owner to create a logo that had a universal appeal for customers while underscoring the central part of her business.

A majority of her business was with landscapers, who didn't necessarily differentiate in terms of brands, so her goal was to make quick and lasting impression with these companies to generate return customers.

Medical Logo

Gene Therapy Cures is a very exciting and relatively new part of medical science. The goal for this logo was to be as professional and succinct as possible.

Motocross Company Logo

There is a deep appreciation of graphics made for racing, hot-rods and stockcars in my work that I have had since forever. I see great logos for racing groups from all levels - from Letterman-Andretti to gutsy small companies operating out of garages with one trailer. Above is a logo I made in four variants that was sent out to a motocross company.

Video Game Logo

This last logo was made for a video game company that specializes in tactical and strategy video games. This look is a careful combination of the art styles from War Craft and the manga Berserk by master illustrator Kentaro Miura.

Back to top ↑
Connect With Us

    Popular Posts

©2014 Gargantuan Media |