October 2, 2007

Userbar How To

I have finally decided to show you how to make userbars today. I make a lot of them which you can see at my dA...you'll have too look for them in my gallery. Note: You can click on the images to make them bigger.

Getting Ready
1) Before we make a userbar, we have to get together a few things first. What you need to make the userbar font is the Visitor TT1 BRK font from here. Install the font on your computer.

2) We also need to make the scanlines pattern. To do that open GIMP and make a new image with these settings:


3) Now zoom in 1600% so you can see it. If you can see it without zooming in, then you must have super mega ultra sight. Select the pencil tool and pick the Circle 01 brush, 100% opaque. Now draw an image exactly like mine. If it isn't, then you screwed up. It has to be like this or your userbar will turn out weird.

4) Save the image as scanlines.pat in Program Files -> Gimp-2.0 -> share -> gimp -> 2.0-> patterns

5) Exit GIMP. You have to do this so your pattern and Visitor TT1 BRK font are loaded into GIMP.

Making the Userbar

1) Create a new image with these settings.



2) Select a gradient that matches the colors of what you want your userbar to be about. Mine is about my blog so I chose a light blue (0090ff)and white (FFFFFF). Hold down the CTRL key and drag the gradient from left to right or right to left. It should be somewhat like this:



3) Create a new layer, and make it transparent. Name it "scanlines." Now we need to add the scanlines. Select the paintbucket tool and in the tool options pick pattern source as the fill type. These are the settings:


4) In the scanlines layer, apply the paintbucket tool. Decrease the layer's opacity to about 50%. It should look like this:


5)Now create another layer. Name it "logo." Add your picture to this layer and position it on the right. Mine came out like this: (My logo came out horrible...I'll fix it later..)


6) Now we'll add some text. Select the text tool and pick the Visitor TT1 BRK font. Font size needs to be 10 and the color needs to be white:

Click on the right side of your userbar and type in something. I put "SGlider12's Blog Reader." Position the text to the right side on the center. Make sure your layers look like mine.



9) Now we'll add the text outline. Select the text layer, right click it, select "Alpha to Selection." Now create a new transparent layer. Name it "outline". Go to Select -> Grow. Grow selection by 1px. Press Ok. Now select the paintbucket tool. Choose foreground color as fill type. Set the foreground color to black. Fill in the outline layer with it still selected. If you fill the whole layer with black, then you once again screwed up. Move the outline layer underneath the text layer. It should look like this:


10) Now we'll add the shiny part. Create a new transparent layer and name it "eclipse." Select the circle select tool and select the upper part of the userbar like this:

Fill the selection with white using the paintbucket tool. Now change the layer's opacity to about 50% and deselect it.


11) Last, we'll add the border. Create a new transparent layer and name it "border." Put the border layer on top of the other layers. Put black as your foreground color. Select -> All. Go to Edit -> Stroke Selection. Put a value of 1. Press Ok.

Final Result:

Now go show it off to the world.

September 27, 2007

Some Stuff

I thought I'd share some GIMP stuff with you. Just now (literally 2 minutes ago) I came across BoitBlog and it's full of GIMP how-to's. Right now I'm trying to make a realistic looking ticket from one of their tutorials as a promo for TB V. MT...
Other places I go to for GIMP tutorials are places like Pixel2Life, Gimpology, GIMPTalk, and Google....Google is the best so far...
......
So, some updates I made to the blog...
I added a tag cloud- I prefer it over the labels site add on that Blogger provides. I added a favicon too...you can see it up in the address bar next to the URL to my blog. I also changed my banner. I made my own Web 2.o logo instead of having some site make it. Seeing that it was PNG I made it blend in with the background. It looks like it's floating there...I like it...I also added a Meebo widget so you can know if I'm on Meebo or not...

Later..

September 11, 2007

Web 2.0 in GIMP

Alright here's a tutorial I found at TechnoMono for making Web 2.0 style text in GIMP.

Open the gimp and create a new image (CTRL+N), mine is 525x100. Change the foreground color in the toolbox to the color you want your text, press T for text tool and click on the canvas to enter your text. Choose a suitable font and size (I chose 70px "Sans Bold") and add your text (if you need to move the text use the move tool M).

Right click on the text layer in the layers stack and select "Alpa to Selection". Create a new layer [] named "dark-border" with a fill type of transparency. Then go Select > Grow set to 1px, then fill the selection with #221C1C using the fill tool (SHIFT+B). Lower the layer in the layer stack [Button gradient].


Right click on the text layer in the layer stack and select "Alpa to Selection", then go Select > Grow set to 3px. Create a new layer [] called "light-border", apply a linear gradient of #fdfefb to #a8aba7 from top to bottom of the selection. Lower the "light-border" layer below the "dark-border" layer in the layer stack.

Right click on the text layer in the layers stack and select "Alpa to Selection", now create another layer and call it "highlight" (move this layer above all other layers in the stack). Select the rectangular select tool (R); change the mode to subtract [Button gradient].

Click and drag from the lower left to the upper right going about half way up the text; you should have a selection like the following:

Press D (to reset the colors) then X (to swap the colors), the foreground color should now be white. Use the gradient tool (L) and change the gradient type to "FG to Transparent".
Change gradient type.
Click and drag from top to bottom of the text while holding CTRL.

To finish off we'll add a drop-shadow. Deselect (CTRL+SHIFT+A), then select the "light-border" layer in the layer stack and go Script-Fu > Shadow > Drop-Shadow and set x and y offsets to 0, set the blur radius to 6 then click ok.

NOTE: the text related layers must be linked together if you wish to move them as one (toggle the chain icon on in the layer stack next to the little eye).

Final Result


They also have some other tutorials there I need to check out. I like this one so I thought I should share it. Thanks TechnoMono!

July 27, 2007

The GIMP

Like PhotoShop? If you wanted to actually own the program it'd be a bit expensive wouldn't it? Yup. Well, there's another photo manipulation program out there called The GIMP. The GIMP stands for GNU Image Manipulation Program. GNU is the type of license it is under. The GIMP is a free, open source image editor that was originally intended for Linux users, but can now be used on Windows, Linux, Unix, and Mac. It can do everything PS can do and more. It can even open PSD files, too! I actually recommend this program more than PS, simply because of the fact that it's free and more flexible. Right now, I've been text manipulating and making userbars. You can see the userbars here. You'll have to browse the gallery for them.
The Gimp requires the GTK+ runtime environment as well in order to use it. It and the Gimp program can be found at www.gimp.org Link.

July 8, 2007

Subscibe to RSS Via Email

You can subscribe to my RSS feed via Email! Just fill out the form below!
Enter your email address:


Delivered by FeedBurner

July 1, 2007

Creative Commons Info

Everything on my blog is all under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 license.

You are free:
to Share — to copy, distribute, display, and perform the work


Under the following conditions:


Attribution. You must attribute the work in the manner specified by me (but not in any way that suggests that they endorse you or your use of the work). Scroll down to the More on Attribution section to find out more.

Noncommercial. You may not use this work for commercial purposes.

No Derivative Works. You may not alter, transform, or build upon this work.


More on Attribution:
I am fine if you post my work wherever you like, so long as the proper credit is given. By credit, I mean that you not only use the name "SGlider12" or "Sarah Davison," but you also link to my blog, using this address: "http://www.sglider12.blogspot.com"

:D

June 20, 2007

Search Results


Search