What's new

Closed Create your Own Wallpaper Clock with Calendar

Status
Not open for further replies.

Master Chief

Honorary Poster
Established
Joined
Mar 19, 2011
Posts
108
Reaction
336
Points
148
A real-time working clock blended into beautiful artwork becomes your desktop background
  • Available for virtually all monitor resolutions
  • Many lovely designs are available
  • Small memory footprint
  • Individual support by the developers
  • Free!

On this Tutorial, you need the following to make your very OWN Wallpaper Calendar with Clock running real time. See my own artwork using Megan Fox's wallpaper.

bg.png
Programs and Tools needed:
  • Adobe Photoshop (any version will do) - your creativity should be highly needed here...
  • DEXCLOCK Program You do not have permission to view the full content of this post. Log in or register now. - A MUST HAVE! To be able to run your creation.
  • Clock.ini file - create your own .ini file below.
  • You do not have permission to view the full content of this post. Log in or register now. - Find more images if you don't have anything on your hard drives.
  • WinZIP (you can use WinRAR in compressing or making the archive format in .WCZ*)
Let's begin the tutorial - Create your own wallpaper clock

Step 1. Basic info - read first!

Wallpaper clock is a special format of desktop wallpaper, developed to show time on computer desktop background image. Wallpaper clocks are distributed as WCZ files.

WCZ file is, download any WCZ file from Vladstudio gallery, rename it to "anything.zip" and unzip.

*WCZ zip package includes the following files:

  • clock.ini (required) - text file with settings (use You do not have permission to view the full content of this post. Log in or register now.)
  • bg.jpg (required) - background image in JPG format
  • preview200x150.jpg (required) - preview image in JPG format, image size 200x150 pixels
  • preview100x75.jpg - preview image in JPG format, image size 100x75 pixels
  • a number of png images with transparent background, which may include:
    • am.png, pm.png
    • day1.png - day31.png
    • hour0.png - hour23.png (if your clock is digital) or hour0.png - hour59.png (if you clock is with arrows)
    • minute0.png - minute59.png
    • month1.png - month12.png
    • weekday1.png - weekday7.png
All png images (and bg.jpg) within one WCZ file must have the same dimensions, reflected in clock.ini. One WCZ file represents one wallpaper clock design for one screen size. We recommend to create separate WCZ files for each of the following common screen sizes:
  • 800x600 pixels
  • 1024x768 pixels
  • 1152x864 pixels
  • 1280x800 pixels
  • 1280x1024 pixels
  • 1440x900 pixels
  • 1600x1200 pixels
  • 1680x1050 pixels
  • 1920x1200 pixels
  • 2560x1600 pixels
Step 2. Pre-designed Wallpaper Clock templates

The easiest way to create your own wallpaper clock is to use one of templatesthat I created for your convenience. Template is ready to use set of images with empty background image, so that you can add your own background, and use pre-designed hours, minutes, days and months. Here is how:

  • Download one of ZIP files below on this page
  • Unzip it into separate folder
  • Open "bg.psd" in Photoshop and update empty layer with design that you want
  • Save result as bg.jpg, then use it to create preview images:preview200x150.jpg, preview100x75.jpg
  • Edit clock.ini and update it with author info
  • Zip all files in folder again, rename ZIP file to have ".WCZ" extension (for example, myclock_800x600.wcz)
  • Make a copy of WCZ file and double-click it to test (you must have software that works with wallpaper clocks).
Template 1

preview1.jpg


Template 2

preview2.jpg


Template 3

preview6.jpg


Step 3. Design wallpaper clock in Photoshop

This tutorial will show you how to design and save digital wallpaper clock. Saving clock with arrows is almost the same, except hours and minutes(please see next page for details).

Prepare Photoshop file with separate layers for: background, hour, minute, am/pm, weekday, day number, month. (background is required, the other layers are optional).

ps1.jpg


Hide all layers except background (note how ":" symbol is merged into background image). Go to File menu - Save for Web and Devices, save image in JPG format as "bg.jpg".

ps2.jpg



Hide background layer, show hours layer. Change text to "00". Note - I made this text layer align to right, so that the margin between hour digit and ":" symbol would not change. Go to File menu - Save for Web and Devices, save image in PNG-24 format as "hour0.png".

ps3.jpg



Change text to "01". Go to File menu - Save for Web and Devices, save image in PNG-24 format as "hour1.png".

ps4.jpg



Repeat with "02", "03", etc until you save "hour23.png".

ps5.jpg



Switch to minutes layer, so that only this layer is visible. The same way you worked with hours, save minutes in images "minute0.png" - "minute59.png".

ps6.jpg



Then simply repeat these steps for am/pm, am/pm, weekday, day number, month, moon phase, zodiac (if you have them designed).


Create merged copy of your design, resize it to 200x150 pixels, save as "preview200x150.jpg". Resize it to 100x75 pixels and save as "preview100x75.jpg".

ps7.jpg



Do not forget that your clock also needs clock.ini file before you can make WCZ package. Use You do not have permission to view the full content of this post. Log in or register now. to make ini file.


Finally, select all files in the folder, ZIP them into single zip file (f.e. "archive.zip") and rename this zip file to have wcz extension (f.e. "myfirstclock_800x600.wcz")

Step 4. How to create clock with arrows

The process of saving clock with arrows is identical to You do not have permission to view the full content of this post. Log in or register now., except hours and minutes. You will need 60 images with hour arrow (hour0.png - hour59.png) and 60 images with minute arrow (minute0.png - minute59.png), where the arrow rotates 6 degrees each time.


Create vector layer with hour arrow looking straight up.

ar1.jpg




It is important that arrows are vectors, not pixels, because you'll need to rotate them. This image shows vector path for my hour arrow layer.

ar2.jpg




Here is the problem. We need to rotate arrow layer around image center, but the arrow itself is not centered. To achieve this, we need additional "helper" layer with circle. Create new layer, add a circle shape (within image boundaries)...

ar3.jpg




Then, in Layers palette, select both circle layer and background layer (hold Shift). Switch to Move tool (V) and align to center both horizontally and vertically. Now, the circle is precisely in the center of the image.

ar4.jpg
 

Attachments

Again, in Layer palette, select circle layer and hour arrow layer.

ar5.jpg




Hide circle layer, so tha only hour arrow layer is visible (but make sure that both layers, hour arrow, and helper circle, are selected in Layers palette). Go to File menu - Save for Web and Devices, save image in PNG-24 format as "hour0.png".

ar6.jpg




Transform (Ctrl-T), and rotate selection 6 degrees. Save as "hour1.png".

ar7.jpg




Rotate 6 degrees again, save as "hour2.png", then repeat and repeat until you save "hour59.png".



Repeat the whole process with minute arrow: save it as "minute0.png", select 2 layers (minute arrow and helper circle) in Layers palette...

ar8.jpg




Rotate 6 degrees, save as "minute1.png", and so on until "minute59.png".

ar9.jpg



Next - Troubleshooter

Before your clock is ready to be zipped into WCZ file, or if something is not working as expected, please make sure that your package does include the following files:

  • bg.jpg
  • preview200x150.jpg
  • preview100x75.jpg
  • clock.ini

Please also make sure that:

  • bg.jpg and all .png images have the same dimensions (for example, 1024x768 pixels)
  • these dimensions are set up in clock.ini file (for example, width=1024 and height=768)
  • to make WCZ file, you zip all files inside folder you with work, not folder itself

Next - Tips & Tricks

Unleash your Creativity!
Each hour, minute, day, weekday and month is separate PNG image. Because of that, you are not limited to digits and arrows in your clock design. In fact, you can draw absolutely anything! The only other limitation is the reasonable file size of your WCZ design, if you plan to distribute it over Internet.
For example, you can draw a flower that grows each minute, or you can draw water that fills some water clock, and so on! For quick example, look at this clock:You do not have permission to view the full content of this post. Log in or register now..


Use Photoshop Actions
If you plan to create more than one clock, you will find the process very time-consuming. If you have experience with Photoshop actions, you will find them very helpful in wallpaper clock development.
Unfortunately you cannot record text editing into an action, so you cannot automate, for example, creating digits from hour0.png to hour23.png.


Next - You do not have permission to view the full content of this post. Log in or register now. generator - Create your important file in package!

You do not have permission to view the full content of this post. Log in or register now.


***********************************************************************************************​
Note: You can use my You do not have permission to view the full content of this post. Log in or register now. and use it on DEXCLOCK Program. (1.94MB size)



 
Dear Master Chief,

Since 2 years have passed since the last reply in this thread, I am locking it to prevent necroposting. Feel free to start a new thread or contact any forum staff if you want this to be reopened.

Thread closed.
 
Status
Not open for further replies.

Similar threads

Back
Top