Posts tagged ‘Graphics’

Mobile toolbar icons – sprite generation with Imagemagick

Geek Alert ! Geek Alert ! Geek Alert ! Geek Alert !

OK, all normal people have been warned. This is what happens when you mate graphic design with UI development.

actions_60Toolbars are a pretty common user interface mechanism. A series of graphical icons – each representing some action – are displayed side by side by side. Clicking or tapping on one, will initiate its specific action. Ideally, it will change color or shape or give some other indication that it has been effected.

Let’s assume we have four actions. That equates to four graphical icons. We also need alternate versions which indicate one has been effected. So we have eight images. For performance reasons, we really want to have just one image that is the combination of all eight images. This is called a sprite or sprite sheet. (Many of the web applications frameworks even assume the images have been combined.)

It’s not overly difficult to take a bunch of graphical icons, duplicate them and color or shade the duplicates, and then position them side by side by side and finally save the result as a single image.

It’s 8*4+1 steps (assuming our 4 icons). But wait. The graphic designer just changed one of the graphics. No worries, it’s just another 8*4+1 steps. Oops. There was a problem with one of the graphics. OK. Another 8*4+1 steps. Hey, can we change the coloration a bit ? Ugh. Another 8*4+1 steps. Umm … the new color still isn’t quite right. #%^%%&^&% 8*4+1 steps ! OK, the boss just asked us to add an icon. GET OUT OF MY OFFICE OR I WILL … #$^&$%#%

Calmer heads prevail and we reach for ImageMagick.

Lets’ break things down into a few steps.

  1. the graphic designer was working with black icons but since our toolbar will have a gradient grey/black background, we need light grey icons
  2. we want each icon to have an orange hint to it when it is selected
  3. we want to combine the icons into two rows with the light grey on top and the orange on the bottom. Finally, we want two different sizes for the output
    • one set will have all of the icons 40×40
    • one set will have all of the icons 20×20

 

we use the ImageMagick "convert" command to process each icon …

convert iconX.png -negate -modulate 85 tmp\normal_iconX.png

This command inverts the black icon to white and then make it 85% of its original brightness.

Now we process each icon again …

convert iconX.png -negate -modulate 65 -fill "#ff7f00" -tint 100 tmp\selected_iconX.png

Again we invert the black icon and lower its brightness a bit before tinting it with our color. The trick here is to pick the color first and then adjust the modulation to affect its brightness.

Finally we use the ImageMagick "montage" command to create the sprite …

montage -background transparent -tile 4×2 -geometry 20×20+2+2 tmp/*.png sprite20.png
montage -background transparent -tile 4×2 -geometry 40×40+2+2 tmp/*.png sprite40.png

Here we are combining all of the images. We specify we want the output to be 4 icons across in two rows. We also scale the individual images to 20×20 or 40×40 and we add 2 pixels of padding (the padding is not absolutely required but makes the resulting sprite easier to view.)

In production, all of this is done is a script file so the process of each icon is done in a loop and the montage can account for how many icons are in each row as well as control the order. … but you get the idea.

Oh, one more thing. Sprites are useful even if you are not using a JavaScript framework. You can reference any graphic in a sprite using CSS …

/* increment by 44 pixels = each icon is 40×40 and has 2 pixels of padding on all sides */
background: url(sprite40.png’) -44px 0;} // second image, first row
background: url(sprite40.png’) -88px -44px;} // third image, second row

Keep telling your boss that each change takes 8*4+1 steps. That way, you can say you’ll finish the new update in 30 minutes – click a button, have it done in 30 seconds, and go get a coffee !

How to keep "Mobile First" front and center

screen-2048x2048The mantra is "mobile first" and it means that if you think about designing for a mobile screen then you get the desktop but if you think about the desktop you seldom reach the mobile screen.

The problem is that most development and design tools make no distinction. So, if "mobile first" is a new concept, how do you remind yourself? Here is an easy solution – desktop wallpaper!

If you click on the image that accompanies this post, you will get a 2048×2048 PNG file that has graduated lines both horizontal and vertical at most of the common desktop, tablet, and smartphone screen dimensions. Make this your computer wallpaper (remember to ’tile’ so it aligns top left and does not scale).

The visual is very handy for resizing your work or just visualizing how small a given screen is. The image can also be imported into GIMP or Photoshop as background to compare visual designs – although I recommend that designers get away from static designs and learn some basic HTML, CSS, and eventually JS.

Web Layouts – fixed width vs. responsive design

responsive-web-rv1

Most web page layouts today are either fixed width or fluid width. And to be honest, most rich layouts are fixed width. The reason is that fluid widths are more difficult to create and less predictable when it comes to how text and graphics will flow. A good fluid design is not easy and almost always imperfect.

Responsive Web Design is more work but renders more predictably than fluid designs. The truth of the matter is that responsive web design is still a significant amount of work compared to the fixed width layouts.

I recently completed a website design for a not-for-profit. The design called for branding, sponsorship recognition, information updates, photos, and basic legal corporate content.

Here is a quick breakdown of work estimates:

  Fixed Width Layout Responsive Design
Logo and graphics work 12 hours 12 hours (and a few seconds)
Sponsors strip 2 hour 10 hours
multi-column layout 1 hour 4 hours
photos strip 30 minutes 5 hours
Conversion to CMS theme 2 hours 6 hours
  17.5 hours 36 hours

 

Nearly all of the extra time was dealing with spacing and layout within the CSS. Even thought I started with the Skeleton Boilerplate, and I used jQuery Cycle to rotate through the sponsors, there was a tremendous amount of work.

In nearly all of the cases, the work was getting all of the graphics to flow to the right places under all of the cases – large browser windows, tablets, and smartphones with rotation between landscape and portrait.

Lets look at the sponsorship strip as one example. There are currently 29 graphics (one is duplicated to make it 30). The graphics start out six across. If this were a fixed layout, we’d be done. However, to be responsive, the strip is broken into two halves that stack when the screen is narrow. The graphics further scale down on small screens. The graphics need to space themselves out dynamically. In the end, what might have been formatted with about 12 HTML statements and 4 CSS definitions turns into 30 HTML statements and 24 CSS definitions. Since there was no margins available in some of the responsive layouts, it also meant more testing and bug fixes. Thus, the task went from 2 hours – where most of that work was choosing and testing JavaScript slider options – to 10 hours with a lot of layout debugging.

The photo strip was just as bit an issue. The subtle different to the sponsors strip is the edge-to-edge display of the sponsors. The photo strip falls within the content area and requires the edge gutters.

A designer who has done fixed width layouts and has read about responsive design would think it possible to use any of the various Grid 960 layouts. The problem is many templates are coded to 16 columns (Skeleton included). Given the various layouts used for this project – 2 column, 3 column, 4 column, and 6 columns, a twelve column grid was better. The need to support gutters and no-gutters means most elements were duplicated with different values. Adding edge-to-edge support adds yet more wrinkles and thus more CSS.

The solution to this type of project is using LESS or one of the other CSS pre-processor languages that can be compiled.

Is Responsive Web Design worth it ? That depends. If you don’t have mobile users, then it may not be a worthwhile venture. Just don’t count on not having mobile users:

"access to the Web through mobile devices has nearly doubled every year since 2009" – Dan Graziano, BGR

- and –

"Mobile web browsing will become more popular than web browsing on desktops in 2014" – Mary Meeker, Morgan Stanley

The good news is that after your first Responsive Design, you have a pretty full tool box and experience.

Google Earth + APRS = race tracks in the sky

ScreenShot001

I was recently asked how I produce the “race tracks” maps from the APRS tracker. The short answer is Google Earth. The longer answer has a few more steps.

The map is a 3D rendering from Google Earth. It requires an KML file. For airborne APRS, these can be found over on Joe’s website. First find the aircraft, then select “all tracks” and then choose the “Google Earth Tour” for the track you want to map. Once you have downloaded the tour.kml file, start up Google Earth and drag-n-drop the kml file onto the window. This will import all of the place markers for the flight. Pan, Zoom, and Tilt until you have the view you like.

The results thus far will be cluttered so here is one way to clean up the view. Find the track in the “My Places” list or “Temporary Places” list on the left panel in Google Earth. Right-click on the track and select “properties”. Select the “Style, Color” tab and click the “Share Style” button. This will let you change all place markers at once. The tab will now display options for Line color, Area color, Labels, and Icons. Set the opacity for Labels and Icons to 0%. (Silly me, there is an easier way … ) Uncheck the mark next to the track label. The track will disappear but this is all right. Now, expand the track’s list of place markers and scroll to the last one titled “End of Track”. Check the box to display just this one entry. The track is now visible.  Optionally set the line width to 2.0 and choose colors for the lines and area under the line.

You should end up with something similar to the picture.

BTW – this track was a quick warm-up flight to three airports with a landing at each airport.

Moving pictures with HTML5

For the life of me I can not think of the term given to the cartoon animation technique when depth is created with layers and the characters move in front and behind the layers.

It doesn’t really matter. What does matter is that you can do it with HTML5 and there is no need for FLASH or video.

The still image shown has 5 layers. The sky, the mountains, and the brush are all static. The hiker and the bird move … Well, they don’t move in this blog post but if you head on over to this page then you can see what I mean.

I won’t go into great detail on how it’s done. The magic is just using two capabilities in HTML5. The first is the “canvas”. The second is the z-axis (depth). By creating multiple canvases and assigning each a differed order in the z-axis, you can achieve this old style animation.

If you want the code, just right-click on the page. It’s not pretty but it is good for learning. I’ll admit that the layers I am using are inefficiently large. I’d avoid that if you are going to do this for a real website. However, the technique works well for an animated banner or other small frame that would have previously been done with FLASH.

Put an iPhone behind bars – using GIMP

iphone 4 behind bars Sometimes getting the right artwork seems easy and turns out to just be a PITA. This is one of those cases.

I planned to write a short article on how shackled it feels to use a clean Apple iOS after having been Jailreak free for so long. I thought a simple image of an iPhone 4 behind bars would make the point. Making the images turned out to be a bit less simple. Here is how I finally make the image.

All of this is done using GIMP but the process will work with Photoshop (just using different menus to achieve the steps).

  1. I started with a stock image on an iPhone 4.I added transparency and deleted everything but the phone. I then increased the width of the canvas to triple – centering the phone and giving me lots of blank space to either side. This will be important later on.
  2. Next, I created a blank layer with transparency and drew the jail cell bars, complete with a lock and door.
  3. I then selected the jail cell and make a copy. I shifted the copy to the left to make "the next cell over". This cell never shows in the final image but is needed to get an accurate shadow on the floor.
  4. Now, with the jail bars layer selected, I created a perspective shadow at 30 degrees. Let it expand the shadow layer when it gets created (this is a checkbox option in GIMP).
  5. Push the perspective shadow behind the phone layer and pull the bars to the top.
  6. Add a white layer and push it to the bottom.

I thought I was done but it didn’t look right. The shadow on the phone face was missing. I tried a few different ideas and finally ended up with the following:

  1. Make a drop shadow of the jail bars layer with no X or Y offset. Select the shadow layer and squish it down in the vertical dimension only (using the scale button) until the top cross bar looks about right for where the shadow line would fall on the face of the phone.
  2. Make a new layer which is all black.
  3. Select the phone layer and select the background. Invert the selection. Switch to the black layer. Now fill the selection with white. Hide this layer. This will be a mask in the next step.
  4. Select the drop shadow layer. Right click to Add Mask and choose white to be opaque.
  5. Select the mask layer and "copy". Now select the drop shadow layer BUT CLICK ON THE WHITE MASK BOX – this will select the mask as the target of the paste rather than the actual layer. Now "paste" and anchor. The result is that only the drop shadow corresponding to the phone is visible. Pull this masked shadow layer above the phone layer.

The results are not perfect but good enough. The only think I am debating changing is to make the jail cell bars grey rather than black and seeing if I can make them look like round bars.

Here is a strip showing the layers (green is used to represent transparency to make it easier to see). The numbered cells are described below.

iphone 4 behind bars filmstrip 

  1. the jail bars
  2. the masked shadow
  3. the phone
  4. the perspective shadow
  5. the background
  6. the mask

So, there you have it. "Putting an iPhone 4 behind bars". Now I can get back to writing the original post !