Photo to active banner tutorial

From WeatherCat Wiki (Holst)
(Difference between revisions)
Jump to: navigation, search
(Created page with "'''Introduction:''' One of the really neat feature of WeatherCat is the banner that is actively updated with weather information. It has been popular from its introduction in...")
 
Line 6: Line 6:
 
I like to have my own weather instruments in my banner, but that's obviously a matter of personally choice.  To get a good picture, I simply took snapshots of my anemometer at different times of day in order to get unique effects.  Finally I settled on this snapshot of high-clouds:
 
I like to have my own weather instruments in my banner, but that's obviously a matter of personally choice.  To get a good picture, I simply took snapshots of my anemometer at different times of day in order to get unique effects.  Finally I settled on this snapshot of high-clouds:
  
[[Image:http://www.canebas.org/Weather/LWC_forum/Active_banner_tutorial/Original_image.jpg]]
+
[[File:Original image.jpg]]
  
 
The area I was aiming to make in to my "canvas" was the sky in between the anemometer and the winter tree branches.
 
The area I was aiming to make in to my "canvas" was the sky in between the anemometer and the winter tree branches.
Line 13: Line 13:
 
Using a program like GraphicConverter [http://www.lemkesoft.com/ http://www.lemkesoft.com/], select a rectangle that has at the edges the scenery you want to have as the "spice" for your canvas.  This may take some trial and error.  Include too much scenery and there won't be any space for the weather data.  Omit too much of the picture and it will be little more than a solid background.  Below is the region I cut out:
 
Using a program like GraphicConverter [http://www.lemkesoft.com/ http://www.lemkesoft.com/], select a rectangle that has at the edges the scenery you want to have as the "spice" for your canvas.  This may take some trial and error.  Include too much scenery and there won't be any space for the weather data.  Omit too much of the picture and it will be little more than a solid background.  Below is the region I cut out:
  
[img]http://www.canebas.org/Weather/LWC_forum/Active_banner_tutorial/Original_to_selection.jpg[/img]
+
[[File:Original to selection.jpg]]
  
 
When I did this selection I took the extra step of rotating the image to get the anemometer mast vertical.  The result is here:
 
When I did this selection I took the extra step of rotating the image to get the anemometer mast vertical.  The result is here:
  
[img]http://www.canebas.org/Weather/LWC_forum/Active_banner_tutorial/Rotated_and_trimmed.jpg[/img]
+
[[File:Rotated_and_trimmed.jpg]]
  
[b]Step #3:[/b] Scale and trim your image into the 500x80 pixels used by the active banner generator.   
+
'''Step #3:''' Scale and trim your image into the 500x80 pixels used by the active banner generator.   
The trick here is to do the scaling [i]first[/i] and then trim.  This diagram shows the procedure:
+
The trick here is to do the scaling ''first'' and then trim.  This diagram shows the procedure:
  
[img]http://www.canebas.org/Weather/LWC_forum/Active_banner_tutorial/Scale-trim_diagram.jpg[/img]
+
[[File:Scale-trim_diagram.jpg]]
  
 
You may run into the same problem I did.  My original guess for the canvas didn't leave the space free that I wanted.  So I trimmed a little more from the bottom of the banner image.  The final background canvas turns out like this:
 
You may run into the same problem I did.  My original guess for the canvas didn't leave the space free that I wanted.  So I trimmed a little more from the bottom of the banner image.  The final background canvas turns out like this:

Revision as of 21:52, 15 April 2012

Introduction: One of the really neat feature of WeatherCat is the banner that is actively updated with weather information. It has been popular from its introduction in the summer of 2011. There one small problem with this banner though - it needs a snazzy background to be properly enjoyed. That might leave other folks feeling left out in the cold. Long ago I learned the best way to complete with graphic artists was with my camera. With a little help from your camera, you can make a banner that feels personal to you (because it is based on your own picture) but doesn't require years of learning out to manipulate images.

Step #1: get a suitable picture. This is actually the hardest part of the whole exercise and will probably take some time and repeated attempts. The problem is that what you want isn't what you would usually desire in a picture. You definitely want some unique scenery in the picture, but not in the center, but instead on the edges of your banner. The goal is to create a mostly neutral colored "canvas" upon which the text of your weather conditions would be written.

I like to have my own weather instruments in my banner, but that's obviously a matter of personally choice. To get a good picture, I simply took snapshots of my anemometer at different times of day in order to get unique effects. Finally I settled on this snapshot of high-clouds:

Original image.jpg

The area I was aiming to make in to my "canvas" was the sky in between the anemometer and the winter tree branches.

Step #2: select a rectangle to "forge" into your banner canvas: Using a program like GraphicConverter http://www.lemkesoft.com/, select a rectangle that has at the edges the scenery you want to have as the "spice" for your canvas. This may take some trial and error. Include too much scenery and there won't be any space for the weather data. Omit too much of the picture and it will be little more than a solid background. Below is the region I cut out:

Original to selection.jpg

When I did this selection I took the extra step of rotating the image to get the anemometer mast vertical. The result is here:

Rotated and trimmed.jpg

Step #3: Scale and trim your image into the 500x80 pixels used by the active banner generator. The trick here is to do the scaling first and then trim. This diagram shows the procedure:

Scale-trim diagram.jpg

You may run into the same problem I did. My original guess for the canvas didn't leave the space free that I wanted. So I trimmed a little more from the bottom of the banner image. The final background canvas turns out like this:

[img]http://www.canebas.org/Weather/LWC_forum/Active_banner_tutorial/Scaled_and_chopped.jpg[/img]

If you don't know anything about image file formats you can use the JPEG (JPG) format and it will work in most cases.

[b]Step #3 1/2 (Optional):[/b] Add any additional graphics you want before importing into the active banner generator. Since I had created some lines to on my previous banner to organize the data, I went ahead and reused them on this banner. That changed the canvas to this:

[img]http://www.canebas.org/Weather/LWC_forum/Active_banner_tutorial/Banner_background.jpg[/img]

[b]Step #4:[/b] Import image into LWC Active banner generator and add weather data text. Stu has described how to do this but here is a quick summary. In LWC, choose the [i]Banner Generator[/i] item from the [i]Tool[/i] menu. You can now drag the file you created with your graphic image onto the top of the banner generator pane. Then you can insert text and weather data using the dialog elements. You can use the "right-click" feature on your mouse to modify the properties of the text (font, color, etc.) Finally, to get elements into just the right spot, you can hold down the option (alt) key and then use the cursors (arrow) keys to fine tune locations. Here is the final result:

[img]http://www.canebas.org/Weather/LWC_forum/Active_banner_tutorial/Active_banner.jpg[/img]


Voila! A nifty personal banner in just 4 steps!

Alright gang, grab your camera, head to the great outdoors and have fun!

Cheers, Edouard

Personal tools
Namespaces

Variants
Actions
Navigation
Tools