It is currently Thu Apr 18, 2024 6:16 pm


All times are UTC - 5 hours [ DST ]



Post new topic Reply to topic  [ 3 posts ] 
Author Message
 Post subject: On/Off button
PostPosted: Tue Apr 28, 2015 1:23 am  (#1) 
Offline
GimpChat Member
User avatar

Joined: Nov 02, 2014
Posts: 57
Hi guys!

Last day i done a new tutorial on Gimp, how to draw on/off button (useful for application, web,..).

The tutorial step by step is posted here ---> http://www.asganafer.it/on-off-button/

I hope yu like!


Attachments:
File comment: Off button
OffButton.png
OffButton.png [ 442.28 KiB | Viewed 5675 times ]
File comment: On button
OnButton.png
OnButton.png [ 449.34 KiB | Viewed 5675 times ]
Share on Facebook Share on Twitter Share on Orkut Share on Digg Share on MySpace Share on Delicious Share on Technorati
Top
 Post subject: Re: On/Off button
PostPosted: Tue Apr 28, 2015 9:44 am  (#2) 
Offline
Global Moderator
User avatar

Joined: Nov 16, 2011
Posts: 5128
Location: Metro Vancouver, BC
I will give it a try later.
Here's my Google Translate text.
On Off Button
(Google Translate, numbers are image placeholders)

Hello everyone and welcome to this new lesson Gimp! In this tutorial we will see how to make a button On / Off useful for application / website. Let's start!

We create a new image of a square (for this tutorial I chose to 1500px x 1500px unì'immagine).
We select the gradient tool (hence the radial gradient) and set the two colors: Primary: # 313131, secondary: # 222222. We apply the gradient. (Blue lines that are seen are nothing more than construction lines).

1

Filters-> Distorts-> Mosaic and let's set the parameters as in the image below.
Size of tile: indicate the size of the hexagons that are going to create
Height of tile: define the extension of light and shadow in a tile
Regularity of tiles: If set to 1 the tiles will be all the same, will be hexagons. More and more we go down the form will become random.
Change color: If set to 0 the tiles will have all the same color, if we increase the color will change (in light or in shadow) randomly.

2

Add a layer above the one you just created, and apply a radial gradient (white and black).

3

We change the layer mode from "Normal" to "Overlay".

4

We begin to create our own button! Take Elliptical Marquee tool, draw a circle (in the tool options under the default tools, you can lock the ratio to 1: 1 in order to draw a circle). We fill the rectangle with a radial gradient from # 383838 to the color # 282728.

5

We now use a script was for the lights and shadows (if you have not installed, refer to this guide). Script Fu> Layer Effect-> Bevel and Emboss. We set as "Highlight Color" color # 7a7a7a and as "Shadow Color" # 1a1a1a. As style we leave Outer bevel in such a way that the effect will be applied to the outside of the circle.

6

Now we repeat the same identical operation but changing the style in "Inner Bevel" so that is applied within the circle.

7

We should have got a result like this:

8

We set the primary color to # 7ecdff, then we take the Elliptical Marquee tool and go to draw a small circle in the center of the button. Having done this we go on Edit-> Stroke Selection and set these parameters.

9

We will get this:

10

Take the selection tool freehand and let's eliminate the top of the circle. Subsequently with the Path tool let's define a vertical line as in the image:

11

Edit-> Stroke Selection and rieseguiamo one made in the previous steps.

12

#OffState
To create the button status Off just simply reduce the opacity to 60.

OFF button

#OnState
Duplicate the layer and do Filters-> Blur-> Blur Gaussian. We perform a blur of 20px, opacity 100.

OnButton

At #11 image, not sure about rieseguiamo?

_________________
Image
Gimp 2.8.18, Linux, median user
Gimp Chat Tutorials Index
Spirit Bear (Kermode)


Top
 Post subject: Re: On/Off button
PostPosted: Wed May 13, 2015 6:48 am  (#3) 
Offline
GimpChat Member
User avatar

Joined: Apr 26, 2014
Posts: 3541
Location: belgium
Image

ASGANAFER
thanks for the tut.

Grazie per il tutorial

Image


Attachments:
on and off button-.zip [2.89 MiB]
Downloaded 419 times
Top
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC - 5 hours [ DST ]


   Similar Topics   Replies 
No new posts Attachment(s) [HELP] How do i disable pen button?

7

No new posts Ctrl button deactivation

3

No new posts Attachment(s) Start button for games

2



* Login  



Powered by phpBB3 © phpBB Group