A Free Template From Joomlashack

A Free Template From Joomlashack

Using GIMP to Create Graphics for RokSlide

PDF Print E-mail
Written by Kirby   
Sunday, 23 November 2008 23:36

Every Joomla-head knows about RocketTheme and the great templates they've created. I recently started using the Replicant template for DeathBeaver and needed to customize the icons for RokSlide.

1. Create an image within a 114px by 114pixel square within the GIMP. Save it to whatever.png.
Create File

2. Go to the top menu, Image and click Canvas Size. Set the canvas to 124pixels wide by 194pixels tall. Make sure to click the little chain link nex to the inputs where you set the sizes. Otherwise, it won't allow you to set an uneven proportion.
Expand CanvasSet Canvas Size

3. Use the Move tool to set the white square so that about 5 pixels spacing are on the top, left and right.
Space graphicCreate File

4. Place whatever art you're trying to display within the 114x114 space.
Add art

5. OK, here is where it gets tricky to describe. Believe once you get the hang of this you could churn these out quickly. Anyway, open up the Layers, Channels and Paths dialog from the top Windows menu. You should see one layer you're working on called Background. Click the "Create a duplicate..." button in that window. It looks like a couple of picture frames on top of each other.
Duplicate layer

6. Use the Flip tool to flip that layer vertically. Use the Move tool so that the top of the image that's been created is touching the bottom of the original image. Set the transparency of that layer within the Layers, Channels and Paths dialog. I used 26.6% but eyeball it and see how it goes.
Move, and set transparency for duplicate layer

7. OK, make sure you're working on the right layer for this. Click on newer layer within Layers, Channels and Paths. Do a Select All (cntl-A or Edit->Select All). In GIMP 2.6, I use Shift-Q for Toggle Quick Mask. You can also get to that option from the Select top menu. Select the Gradient tool from your Toolbox window. Select black for the Foreground color. Then, within the Gradient tool options, select the FG to Transparent gradient. Use the gradient tool by by click once where the "reflection" begins and drag downward. Toggle Quick Mask again. You've used the gradient as a mask so when you apply Clear, anything that's black is completely unaffected and pixels that are shades of gray are affected according to how dark it is. Select Edit->Clear. Ta Da!
Setting maskMask sets selection when Toggle Quick Mask is selected againClear takes out pixels depending on the mask

8. Save and upload to wherever makes sense on your site. You can then reference this graphic within your RokSlide module (which is really a mod_custom with some javascript thrown in...).

 
Joomla 1.5 Templates by Joomlashack