[Botta&Risposta]Creare Bottoni Realistici
[Botta&Risposta]Creare Bottoni Realistici
Molti si chiedono
Ma come si fanno a creare dei bottoni coi controca**i?
Tutti parlano di photoshop e altri programmi che costano un Botto di soldi
(escluso Gimp che è gratuito)--> Grazie stavros per il tutorial di Gimp!
Ma io vi spiegherò (per chi non è capace) come crearli semplicemente con l'editor di Game maker
che tutti su questo forum hanno in modo semplice ed efficacie
Ci sono varie tecniche
Vi spiego con delle immagini tutti i passaggi che faccio per ottenere questo risultato
guardate in questa pagina per vedere i bottoni in azione
http://tizzio.altervista.org/button_tutorial/index.html
Adesso passiamo al succo del tutorial:
1)Aprite L'editor di Game maker e Create uno sprite 150x50
2)Scegliete un colore che utilizzerete e prendetene una tonalità molto scura
Creando un rettangolo come in figura
3) dentro questo rettangolo createne uno con un colore della stessa tonalità ma nettamente più chiaro (più chiaro di quanto sarà il vostro bottone)
guardare la figura
4)Cancellare con lo strumento Gomma i quadrettini acome in figura e mettere un pixel di colore scuro come "angolo"
Ripetere per tutti gli angoli
5) Con lo strumento secchiello riempite con il colore Intermedio tra quelli che abbiamo usato prima
Mi raccomando un colore non troppo acceso...Ma comunque un colore deciso
6)Su Image scegliete Gradient fill
7) Impostate I parametri come in figura per ottenere un effetto gradiente leggerissimo e premete OK
8 ) Su Image scegliete Buttonize
9)Impostate i parametri come in figura e otterrete un leggero effetto bottone
FINITO!!!
Adesso ci sono 2 vie..
rifate tutto con un altro colore per fare il bottone quando è illuminato
Andare avanti col tutorial e usare il metodo Grezzo e veloce
9.1)Adesso che avete finito Duplicate l'immagine per fare il bottone illuminato
10)Andate su Image e poi su colorize...
11)Scegliete il colore del nuovo bottone
(il problema è che non avete molta scelta di tonalità con questo metodo però se vi serve un colore che è fattibile con l'hue allora siete apposto!)
ehhhhhhh altro che photoshop
Alla prossima!
Domenica sera metto pure il tutorial per fare le scritte "incavate" per questi bottoni
Ma come si fanno a creare dei bottoni coi controca**i?
Tutti parlano di photoshop e altri programmi che costano un Botto di soldi
(escluso Gimp che è gratuito)--> Grazie stavros per il tutorial di Gimp!
Ma io vi spiegherò (per chi non è capace) come crearli semplicemente con l'editor di Game maker
che tutti su questo forum hanno in modo semplice ed efficacie
Ci sono varie tecniche
Vi spiego con delle immagini tutti i passaggi che faccio per ottenere questo risultato
guardate in questa pagina per vedere i bottoni in azione
http://tizzio.altervista.org/button_tutorial/index.html
Adesso passiamo al succo del tutorial:
1)Aprite L'editor di Game maker e Create uno sprite 150x50
2)Scegliete un colore che utilizzerete e prendetene una tonalità molto scura
Creando un rettangolo come in figura
3) dentro questo rettangolo createne uno con un colore della stessa tonalità ma nettamente più chiaro (più chiaro di quanto sarà il vostro bottone)
guardare la figura
4)Cancellare con lo strumento Gomma i quadrettini acome in figura e mettere un pixel di colore scuro come "angolo"
Ripetere per tutti gli angoli
5) Con lo strumento secchiello riempite con il colore Intermedio tra quelli che abbiamo usato prima
Mi raccomando un colore non troppo acceso...Ma comunque un colore deciso
6)Su Image scegliete Gradient fill
7) Impostate I parametri come in figura per ottenere un effetto gradiente leggerissimo e premete OK
8 ) Su Image scegliete Buttonize
9)Impostate i parametri come in figura e otterrete un leggero effetto bottone
FINITO!!!
Adesso ci sono 2 vie..
rifate tutto con un altro colore per fare il bottone quando è illuminato
Andare avanti col tutorial e usare il metodo Grezzo e veloce
9.1)Adesso che avete finito Duplicate l'immagine per fare il bottone illuminato
10)Andate su Image e poi su colorize...
11)Scegliete il colore del nuovo bottone
(il problema è che non avete molta scelta di tonalità con questo metodo però se vi serve un colore che è fattibile con l'hue allora siete apposto!)
ehhhhhhh altro che photoshop
Alla prossima!
Domenica sera metto pure il tutorial per fare le scritte "incavate" per questi bottoni
Ultima modifica di Tizzio il 29/05/2011, 23:50, modificato 1 volta in totale.
- Stavros
- GMI Advanced
- Messaggi: 1914
- Iscritto il: 24/02/2010, 20:03
- Specialità: PixelArt - Grafica
- Uso: GM:Studio 2
- Località: QDMA12
- Contatta:
Re: [Botta&Risposta]Creare Bottoni Realistici
Interessante e... basilare. Ovvio che puoi fare bei bottoni con l'editor di GM8, m con PS o Gimp è molto ma molto più facile (livelli, canale alpha, filtri) oltre che ottenere risultati professionali: il tuo esempio è praticamente pixel art. Non che sia sbagliato, ma in certe situazioni è fuori luogo. Faccio un tutorial pure io e lo posto qui
Tutorial GIMP: pulsanti
Spero possa esservi utile...
Tutorial GIMP: pulsanti
Spoiler
Ecco i risultati:
Spero possa esservi utile...
Re: [Botta&Risposta]Creare Bottoni Realistici
io metterei tutto nella sezione tutorial del sito
- Stavros
- GMI Advanced
- Messaggi: 1914
- Iscritto il: 24/02/2010, 20:03
- Specialità: PixelArt - Grafica
- Uso: GM:Studio 2
- Località: QDMA12
- Contatta:
Re: [Botta&Risposta]Creare Bottoni Realistici
Javascript? Su GM? Da quando?civic71 ha scritto:
Gm8 + codice javascritp
- fra3point
- Membro attivo
- Messaggi: 388
- Iscritto il: 24/08/2010, 15:16
- Specialità: Prog. e 3D Modelling
- Località: L'Aquila
- Contatta:
Re: [Botta&Risposta]Creare Bottoni Realistici
In effetti anche io non avevo mai sentito parlare di javascript in Game Maker! Forse qualche dll?Stavros ha scritto:Javascript? Su GM? Da quando?
draw_text(100,100,"fra3point");
Progetti in corso:
Progetti in corso:
Spoiler
- civic71
- GMI Advanced
- Messaggi: 2210
- Iscritto il: 23/10/2003, 17:31
- Specialità: Risotto con zucchine
- Uso: GM:Studio 1.4 Pro
- Località: Jesolo (venezia)
- Contatta:
Re: [Botta&Risposta]Creare Bottoni Realistici
ha ha ha ma non cosa avete capito
Ho usato gm8 per creare un rettangolo di quel colore.
Poi ho importato tutto in una pagina htm ed utilizzato del codice javascript ( non di mia realizzazione ) per creare quel effetto.
Poi l'ho riportato su gm8 per rendere trasparente i bordi ;
Ho usato gm8 per creare un rettangolo di quel colore.
Poi ho importato tutto in una pagina htm ed utilizzato del codice javascript ( non di mia realizzazione ) per creare quel effetto.
Poi l'ho riportato su gm8 per rendere trasparente i bordi ;
- fra3point
- Membro attivo
- Messaggi: 388
- Iscritto il: 24/08/2010, 15:16
- Specialità: Prog. e 3D Modelling
- Località: L'Aquila
- Contatta:
Re: [Botta&Risposta]Creare Bottoni Realistici
aaaaaah!!!! Ora è tutto chiaro!
Però girando per il forum di yoyogames qualcosa per il javascript l'ho vista!
Però girando per il forum di yoyogames qualcosa per il javascript l'ho vista!
draw_text(100,100,"fra3point");
Progetti in corso:
Progetti in corso:
Spoiler
- Stavros
- GMI Advanced
- Messaggi: 1914
- Iscritto il: 24/02/2010, 20:03
- Specialità: PixelArt - Grafica
- Uso: GM:Studio 2
- Località: QDMA12
- Contatta:
Re: [Botta&Risposta]Creare Bottoni Realistici
Siamo un pò OT
[OT]
Altro esempio con un pò più di effetti
[OT]
Spoiler
[IT]
Altro esempio con un pò più di effetti
Re: [Botta&Risposta]Creare Bottoni Realistici
Grandissimo Stavros!!!
Hai ragione il mio è un esempio di bottone utile certe volte... altre no
La tua è un altra tecnica diciamo... più professionale!
Sono contento che l'hai aggiunto
@civic fai vedere come l'hai realizzato pure tu quando hai un pò di tempo
Edit:
Fatto il testo "scavato" ... basta mettere
1)un testo scuro
2)un pixel più a destra del colore del primo bordo scuro
Hai ragione il mio è un esempio di bottone utile certe volte... altre no
La tua è un altra tecnica diciamo... più professionale!
Sono contento che l'hai aggiunto
@civic fai vedere come l'hai realizzato pure tu quando hai un pò di tempo
Edit:
Fatto il testo "scavato" ... basta mettere
1)un testo scuro
2)un pixel più a destra del colore del primo bordo scuro
-
- Membro attivo
- Messaggi: 468
- Iscritto il: 28/05/2010, 23:49
- Specialità: Grafica
- Contatta:
Re: [Botta&Risposta]Creare Bottoni Realistici
Due bottoni basilari.. fatti da me, con Paint Shop Pro 9.
Bottone ON:
Bottone OFF:
Bottone ON:
Bottone OFF:
Re: [Botta&Risposta]Creare Bottoni Realistici
Gladiatore79 ha scritto:Due bottoni basilari.. fatti da me, con Paint Shop Pro 9.
Bottone ON:
Bottone OFF:
belli ma fai un tutorial di come li hai fatti!
Re: [Botta&Risposta]Creare Bottoni Realistici
[codescript=create_button]var width,height,color,s;
width=argument0;
height=argument1;
color=argument2;
s=surface_create(width,height);
surface_set_target(s);
draw_clear_alpha(c_white,0)
/************************BOTTONE*******/
draw_set_color(color);
draw_set_alpha(1);
draw_rectangle(1,1,width-1,height-1,0)
//linea Sud color
draw_line(2,height-1,width-3,height-1)
//linea Nord color
draw_line(2,0,width-3,0)
//linea Est color
draw_line(0,2,0,height-3)
//linea Ovest color
draw_line(0+width-1,2,width-1,height-3)
/**********************GRADIENTE**********/
draw_set_blend_mode(bm_add)
draw_set_alpha(0.3);
draw_rectangle_color(1,1,width-1,height-1,color,color,c_black,c_black,0)
/*********************LINEE NERE**********/
draw_set_color(c_black);
draw_set_alpha(0.7);
//linea Sud black
draw_line(2,height-1,width-3,height-1);
draw_point(width-2,1)
//linea Ovest black
draw_line(width-1,2,width-1,height-3);
draw_point(width-2,height-2)
draw_set_alpha(0.5);
//linea nord black
draw_line(2,0,width-3,0)
draw_point(1,1)
//linea Est black
draw_line(0,2,0,height-3)
draw_point(1,height-2)
/**********************LINEE BIANCHE*********/
draw_set_color(c_white);
draw_set_alpha(0.2);
//linea Sud white
draw_line(2,height-2,width-3,height-2);
//linea Ovest white
draw_line(width-2,2,width-2,height-3);
draw_set_alpha(0.3);
//linea nord white
draw_line(2,1,width-3,1)
//linea Est color
draw_line(1,2,1,height-3)
/*********RETURN TO DEFAULT*****/
draw_set_alpha(1)
draw_set_blend_mode(bm_normal)
surface_reset_target()
draw_set_color(c_black)
draw_set_alpha(1)
sprite=sprite_create_from_surface(s,0,0,width,height,0,0,0,0);
surface_free(s);
return sprite;[/codescript]
Ho creato uno script per creare bottoni coi primitives
ritorna il bottone sottoforma di sprite creandolo dal nulla
molto utile se volete usare bottoni in una gex.. una scrollbar ecc. dove si utilizza solo codice
(lo script si mette in create o comunque deve essere usato solo quando serve... non va messo in step!!!)
width=argument0;
height=argument1;
color=argument2;
s=surface_create(width,height);
surface_set_target(s);
draw_clear_alpha(c_white,0)
/************************BOTTONE*******/
draw_set_color(color);
draw_set_alpha(1);
draw_rectangle(1,1,width-1,height-1,0)
//linea Sud color
draw_line(2,height-1,width-3,height-1)
//linea Nord color
draw_line(2,0,width-3,0)
//linea Est color
draw_line(0,2,0,height-3)
//linea Ovest color
draw_line(0+width-1,2,width-1,height-3)
/**********************GRADIENTE**********/
draw_set_blend_mode(bm_add)
draw_set_alpha(0.3);
draw_rectangle_color(1,1,width-1,height-1,color,color,c_black,c_black,0)
/*********************LINEE NERE**********/
draw_set_color(c_black);
draw_set_alpha(0.7);
//linea Sud black
draw_line(2,height-1,width-3,height-1);
draw_point(width-2,1)
//linea Ovest black
draw_line(width-1,2,width-1,height-3);
draw_point(width-2,height-2)
draw_set_alpha(0.5);
//linea nord black
draw_line(2,0,width-3,0)
draw_point(1,1)
//linea Est black
draw_line(0,2,0,height-3)
draw_point(1,height-2)
/**********************LINEE BIANCHE*********/
draw_set_color(c_white);
draw_set_alpha(0.2);
//linea Sud white
draw_line(2,height-2,width-3,height-2);
//linea Ovest white
draw_line(width-2,2,width-2,height-3);
draw_set_alpha(0.3);
//linea nord white
draw_line(2,1,width-3,1)
//linea Est color
draw_line(1,2,1,height-3)
/*********RETURN TO DEFAULT*****/
draw_set_alpha(1)
draw_set_blend_mode(bm_normal)
surface_reset_target()
draw_set_color(c_black)
draw_set_alpha(1)
sprite=sprite_create_from_surface(s,0,0,width,height,0,0,0,0);
surface_free(s);
return sprite;[/codescript]
Ho creato uno script per creare bottoni coi primitives
ritorna il bottone sottoforma di sprite creandolo dal nulla
molto utile se volete usare bottoni in una gex.. una scrollbar ecc. dove si utilizza solo codice
(lo script si mette in create o comunque deve essere usato solo quando serve... non va messo in step!!!)
Chi c’è in linea
Visitano il forum: Google [Bot] e 51 ospiti