[Botta&Risposta]Creare Bottoni Realistici

Tutorial, videotutorials ed esempi creati da noi
Rispondi
Avatar utente
Tizzio
GMI Honor
Messaggi: 5836
Iscritto il: 29/06/2010, 23:43
Specialità: programmazione
Contatta:

[Botta&Risposta]Creare Bottoni Realistici

Messaggio da Tizzio »

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
:arrow: 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
Immagine

2)Scegliete un colore che utilizzerete e prendetene una tonalità molto scura
Creando un rettangolo come in figura
Immagine

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
Immagine

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
Immagine

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
Immagine

6)Su Image scegliete Gradient fill
Immagine

7) Impostate I parametri come in figura per ottenere un effetto gradiente leggerissimo e premete OK
Immagine

8 ) Su Image scegliete Buttonize
Immagine

9)Impostate i parametri come in figura e otterrete un leggero effetto bottone
Immagine

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 :lol:


9.1)Adesso che avete finito Duplicate l'immagine per fare il bottone illuminato
Immagine

10)Andate su Image e poi su colorize...
Immagine

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!)
Immagine

Immagine
Immagine



ehhhhhhh altro che photoshop 8)

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.

Avatar utente
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

Messaggio da Stavros »

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 :banapc:

Tutorial GIMP: pulsanti
Spoiler
1. Prima di tutto aprire GIMP e creare una nuova immagine, nell'esempio 128x32
Immagine

2. Selezionare due tonalità di uno stesso colore, una chiara e l'altra scura (nell'esempio il celeste e il blu).
Con lo strumento gradiente tracciare una linea dal bordo inferiore al bordo superiore dell'immagine.
Immagine

3. Ottenere lo smussamento (con antialiasing) degli angoli in GIMP è semplice (info nell'immagine)
Immagine

4. Creare un nuovo livello (click DX sul livello esistente, selezionare "Nuovo Livello" con fondo trasparente):
Immagine

5. Selezionare il bianco e il nero, mettendo in primo piano il bianco. Impostare lo strumento gradiente come da immagine.
Con lo strumento gradiente tracciare una linea dal bordo superiore al bordo inferiore dell'immagine (qualche pixel in meno).
Impostare a 50 l'alpha del livello agendo sullo slider Opacità (in alto a SX).
Immagine

6. Ripetere il punto 3 anche per questo livello.
Immagine

7. Per ottenere l'incurvatura del pulsante selezionare la "Selezione Ellittica" e selezionare tutta l'immagine. Poi spostarla fino a toccare gli angoli superiori (entrambi) con la parte inferiore dell'ellissi. Qui sta a voi decidere la curvatura e la grandezza del riflesso. Poi agite come descritto in figura.
Immagine

8. Salvare il tutto in formato PNG (le finestre di dialogo che compariranno potete tranquillamente skipparle premendo INVIO):
Immagine

9. Creare la versione "mouse over" del pulsante: ho pensato di renderlo più luminoso e per ottenere ciò fate come descritto in figura:
Immagine

10. Salvare il tutto in formato PNG:
Immagine
Ecco i risultati:
Immagine
Immagine

Spero possa esservi utile... :cappa:

Avatar utente
condors94
GMI Guru
Messaggi: 2939
Iscritto il: 07/01/2010, 16:53
Contatta:

Re: [Botta&Risposta]Creare Bottoni Realistici

Messaggio da condors94 »

io metterei tutto nella sezione tutorial del sito 8)


Avatar utente
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

Messaggio da Stavros »

civic71 ha scritto:Immagine

Gm8 + codice javascritp ;)
Javascript? Su GM? Da quando? :confuso:

Avatar utente
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

Messaggio da fra3point »

Stavros ha scritto:Javascript? Su GM? Da quando? :confuso:
In effetti anche io non avevo mai sentito parlare di javascript in Game Maker! Forse qualche dll? :?:
draw_text(100,100,"fra3point");

Progetti in corso:
Spoiler
Tuning Paradise --> 10%

Saw: The Game --> 60%

Tropic Races --> 40%

Avatar utente
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

Messaggio da civic71 »

ha ha ha :lol: ma non cosa avete capito :spat:
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 :mrgreen: ;

Avatar utente
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

Messaggio da fra3point »

aaaaaah!!!! Ora è tutto chiaro! :lol:

Però girando per il forum di yoyogames qualcosa per il javascript l'ho vista!
draw_text(100,100,"fra3point");

Progetti in corso:
Spoiler
Tuning Paradise --> 10%

Saw: The Game --> 60%

Tropic Races --> 40%

Avatar utente
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

Messaggio da Stavros »

Siamo un pò OT

[OT]
Spoiler
Quello di cui parli è Javascript applicato a CSS3 ma non sembra così buono (radius sconnessi e aliasati)
[IT]
Altro esempio con un pò più di effetti
Immagine

Avatar utente
Tizzio
GMI Honor
Messaggi: 5836
Iscritto il: 29/06/2010, 23:43
Specialità: programmazione
Contatta:

Re: [Botta&Risposta]Creare Bottoni Realistici

Messaggio da Tizzio »

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
Immagine

Gladiatore79
Membro attivo
Messaggi: 468
Iscritto il: 28/05/2010, 23:49
Specialità: Grafica
Contatta:

Re: [Botta&Risposta]Creare Bottoni Realistici

Messaggio da Gladiatore79 »

Due bottoni basilari.. fatti da me, con Paint Shop Pro 9.


Bottone ON:

Immagine

Bottone OFF:

Immagine
My Forum:
Immagine

Aiutatemi a fare nascere dall'uovo due Vorxy, cliccate qui ==>>>ImmagineImmagineImmagineImmagine
Faccina di mia creazione se vi piace mettetela nella vostra firma:

Immagine

Avatar utente
Tizzio
GMI Honor
Messaggi: 5836
Iscritto il: 29/06/2010, 23:43
Specialità: programmazione
Contatta:

Re: [Botta&Risposta]Creare Bottoni Realistici

Messaggio da Tizzio »

Gladiatore79 ha scritto:Due bottoni basilari.. fatti da me, con Paint Shop Pro 9.


Bottone ON:

Immagine

Bottone OFF:

Immagine

belli ma fai un tutorial di come li hai fatti! :)

Avatar utente
Tizzio
GMI Honor
Messaggi: 5836
Iscritto il: 29/06/2010, 23:43
Specialità: programmazione
Contatta:

Re: [Botta&Risposta]Creare Bottoni Realistici

Messaggio da Tizzio »

[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!!!)

Rispondi

Chi c’è in linea

Visitano il forum: Nessuno e 33 ospiti