1. Welcome to PHCorner Forums. Take a moment to Sign up and gain unlimited access and extra privileges that guests are not entitled to, such as:

    All that and more! Registration is quick, simple and absolutely free. Join our community today!

Create your Own Wallpaper Clock with Calendar

Discussion in 'GFX Corner' started by Master Chief, May 3, 2014.

  1. Master Chief

    Master Chief Enthusiast Established

    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.

    Programs and Tools needed:
    • Adobe Photoshop (any version will do) - your creativity should be highly needed here...
    • DEXCLOCK Program Please or Register to view links - A MUST HAVE! To be able to run your creation.
    • Clock.ini file - create your own .ini file below.
    • Please or Register to view links - 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 Please or Register to view links)
    • 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


    Template 2


    Template 3


    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).


    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".


    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".


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


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


    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".


    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".


    Do not forget that your clock also needs clock.ini file before you can make WCZ package. Use Please or Register to view links 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 Please or Register to view links, 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.


    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.


    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)...


    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.

    genelle, PurpleFox and Shan Cool like this.
  2. Master Chief

    Master Chief Enthusiast Established

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


    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".


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


    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...


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


    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: Please or Register to view links.

    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 - Please or Register to view links generator - Create your important file in package!

    Please or Register to view links

    Note: You can use my Please or Register to view links and use it on DEXCLOCK Program. (1.94MB size)

  3. richardrr

    richardrr Forum Expert Established

    nice share boss..
  4. -
    nice, anggaleng naman(y)
    salamat sa tutorials bos..
  5. genelle

    genelle Honorary Poster Established

    San po ung ZIP file. salamat
  6. Pabookmark po muna nito. Haha
  7. astig!!! naman nito try ko to:D
  8. Speed-Lock

    Speed-Lock Enthusiast Established

    bos di ko ma download ang clock./.
  9. EARZE

    EARZE PHC Contributor Established

    thanks for sharing boss.. (y)
Tags / Keywords: