How to Simulate a Linear Gradient ? - Part 1 & 2
What is a Linear Gradient?
There is something familiar about the snapshot above!
Does it look similar to an Installer's background?
The top color starts from the Brightest blue and gradually ends with a Black color at the bottom...
...and this transition between the two colors gives it a technical name:
Vertical Linear Gradient.. and if the Color transition was from left to right, we can call it
Horizontal Linear GradientHow was the Gradient fill effected?
Copy - Paste - Try example:IfNotExist, bg.bmp URLDownloadToFile , http://autohotkey.net/~goyyah/Tips-N-Tricks/Gradients/bg.bmp , bg.bmp Gui, Margin, 0,0 Gui, Add, Picture, x0 y0 w640 h480, bg.bmp Gui, Show, AutoSize, Simulating Vertical Linear Gradient [2 Pixel Bitmap] Return GuiClose: GuiEscape: ExitApp Return
The bg.bmp is the picture file that creates the effect.
bg.bmp is a small image file (mere 62 bytes!!)...
It is so small that it can be used as a period at the end of this line.
Can you see that it is a two coloured picture? Maybe with a magnifier!
Take a look at the animation below simulating a 32:1 magnification of bg.bmp.
A small 1x2, 2 pixel Bitmap file is stretched to an enormous size of 640x480 pixels to create the Gradient fill effect
That is it!
[*:2m52mtfa]Create a 2 pixel bitmap (1 pixel wide and 2 pixel tall) for a Vertical Linear Gradient.
[*:2m52mtfa]Create a 2 pixel bitmap (2 pixel wide and 1 pixel tall) for a Horizontal Linear Gradient.
[*:2m52mtfa]Select the Top/Bottom (or) Left/Right colors. A bit of creativity is required.
[*:2m52mtfa]Now add it with "Gui, Add, Picture" command and use w & h options to stretch it to the required size.
[*:2m52mtfa]This stretching creates the Gradient effect!
[*:2m52mtfa]Unique Gradients: (256*256*256) * (256*256*256) = ??? Never mind! I am poor in Mathematics.
[*:2m52mtfa]You may also use the same technique to create colorful vertical / horizontal lines.
[*:2m52mtfa]If you do not have Active Desktop enabled, you may use these bitmaps as stretched Wallpapers.
[*:2m52mtfa]You will not be able to create these images with Paint.exe. An advanced Image editor will be required.
I was using PaintShop Pro to create these Bitmaps. Now, I have my own BITMAP Gradient Maker.
[*:2m52mtfa]Important Styles that can be used with "Gui, Add, Picture"
[*:2m52mtfa] E0x200 for Sunken Button effect.
[*:2m52mtfa] 0x400000 for Raised Button effect.
[*:2m52mtfa] Border to wear a thin black line around the Picture.[/list]
Vertical Linear Gradients - Snapshots
Following are snapshots of 2 Pixel bitmaps stretched at 280x210 on a "Gui, -Caption" canvas.
The Text seen on them are the pair of Hex Color Codes used to create them.
gb1.ahk is an example that simulates both Vertical and Horizontal Gradients.
Note: See the Pillars on the left/right side on the GUI. I have simulated a Horizontal Gradient effect
The following posts contains information on the visual effects seen in the snapshot.
[*:2m52mtfa]How to Simulate a Graphical Button in a GUI ?
[*:2m52mtfa]How to Display Shadowed Text in a GUI ?An example for Horizontal Linear Gradient:
* End of Part 1 *
PART 2: ( Added: 25 May 2006 )
Dynamic Creation of a BITMAP Gradient with CreateBMPGradient()
I owe my deepest gratitude to Laszlo & PhiLho for the contribution to the
AHK Community with their Binary Read/Write Routines.
Visit the topics:
[*:2m52mtfa]Binary file I/O with binary buffers - posted by Laszlo
[*:2m52mtfa]Binary file reading and writing - posted by PhiLho
CreateBMPGradient(FileName, ColorCode1, ColorCode2, Vertical)
[*:2m52mtfa]Param1: File name to be created
[*:2m52mtfa]Param2: A Valid Hex Color code for the Bottom (or) Left pixel. ( in RGB )
[*:2m52mtfa]Param3: A Valid Hex Color code for the Top (or) Right pixel. ( in RGB )
[*:2m52mtfa]Param4: 0 (or) 1 . Vertical=1 / Horizontal=0
[*:2m52mtfa] Note: A BITMAP File stores the Picture upside down.
Hence, Bottom/Left Color Code gets priority in Parameter Rank.[/list]Example: Gui, Add, Picture, x0 y0 w640 h480, % CreateBMP("Bg.bmp","000000","0000FF",1)[*:2m52mtfa]Download the Include File : BitmapGradient.ahk
[*:2m52mtfa]View the code: BitmapGradient.ahk.txt[/list]Copy / Paste / Try Example :GradientFile=Bg.bmp IfNotExist, %GradientFile% GradientFile:=CreateBMPGradient(GradientFile,"000000","FF0000",1) Gui, Margin, 0,0 Gui, Add, Picture, x0 y0 w640 h480, %GradientFile% Gui, Show, AutoSize, Simulating Vertical Linear Gradient [2 Pixel Bitmap] Return GuiClose: GuiEscape: ExitApp Return #Include BitmapGradient.ahk
Part 2 Incomplete! More examples to be posted!