Posts tagged ‘Graphics’

iOS is not as homogeneous as it once was

Just a few years ago, the big complaint of the Android platform was that is was the wild west. Vendors could choose their own screen resolution and pixel density. This made it difficult for mobile app developers (and designers).

Fast forward to 2015 and there are iOS 7 and iOS 8 deployments, iPhone 4, 5, 5S, 5C, 6, 6P, iPad Mini, Mini Retina, iPad, and iPad Retina. If you want to render all of the needed icons and splash screens for your mobile app, it now looks like this …

iphone-size-comparison16px favicon
32px favicon
57px app icon
72px app icon
76px app icon
114px app icon
120px app icon
152px app icon
180px app icon
1536×2008 portrait launch image
768×1004 portrait launch image
1242×2148 portrait launch image
750×1294 portrait launch image
640×1096 portrait launch image
640×920 portrait launch image
320×460 portrait launch image
1024×748 landscape launch image
2208×1182 landscape launch image
2048×1496 landscape launch image

Thankfully, there is still ImageMagick and it’s ability to script the generation of all these different graphics.

Here is the updated script …

@echo off
echo Utility to generate all of the icons and splash screens for iOS.
echo One files needed in the current directory - mask.png
echo which is used to make iOS looking icons.
echo Assumes there is a file called src10241024.png and that the
echo 'important' material is 768x768 and centered with the remainder
echo of the area being solid color.
pause

for %%S in (16 32) do (
	echo making the %%Spx favicon
	convert src10241024.png -gravity Center -crop 512x512+0+0 -scale %%Sx%%S favicon%%S.ico
)

for %%S in (57 72 76 114 120 152 180) do (
	echo making the %%Spx app icon 
	convert src10241024.png -alpha off -gravity center mask768.png -compose CopyOpacity -composite -gravity center -crop 768x768+0+0 -scale %%Sx%%S -background transparent icon_%%S.png
)

for %%S in (1536x2008 768x1004 1242x2148 750x1294 640x1096 640x920 320x460) do (
	for /F "tokens=1,2 delims=x" %%A in ("%%S") do (
		echo making the %%Ax%%B portrait launch image
		convert src10241024.png -scale %%Bx%%B -gravity Center -crop %%Ax%%B+0+0 screen-%%Ax%%B.png
	)
)

for %%S in (1024x748 2208x1182 2048x1496) do (
	for /F "tokens=1,2 delims=x" %%A in ("%%S") do (
		echo making %%Ax%%B landscape launch image
		convert src10241024.png -scale %%Ax%%A -gravity Center -crop %%Ax%%B+0+0 -rotate 90 screen-%%Ax%%Br.png
	)
)

Eventually, the sour 1024×1024 image should be undated to about 2400×2400

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.