- Joined
- Mar 19, 2011
- Posts
- 108
- Reaction
- 336
- Points
- 142
A real-time working clock blended into beautiful artwork becomes your desktop background
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:
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:
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:
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 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.
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.
- 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 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*)
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
- 800x600 pixels
- 1024x768 pixels
- 1152x864 pixels
- 1280x800 pixels
- 1280x1024 pixels
- 1440x900 pixels
- 1600x1200 pixels
- 1680x1050 pixels
- 1920x1200 pixels
- 2560x1600 pixels
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 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 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.
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.
Attachments
-
You do not have permission to view the full content of this post. Log in or register now.