[How to] Ribbon Desktop

Il ritrovo della comunità dove confrontarsi e discutere sulle notizie dal mondo dell'informatica, di Ubuntu e di tutto quello che la riguarda, novità, pettegolezzi e quant'altro.
Avatar utente
UFK
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 464
Iscrizione: lunedì 7 aprile 2008, 20:13
Contatti:

[How to] Ribbon Desktop

Messaggio da UFK »

Immagine

In questa piccola guida tenterò di spiegarvi come ottenere un pannello "ribbon" come questo

Immagine
Immagine

Ho creato questo pannello, con l'idea di eliminare completamente l'uso del menu, tutto è facilmente reperibile al primo colpo d'occhio.

Il concetto che sta dietro questo tipo di desktop è veramente semplice, il pannello è disegnato direttamente sullo sfondo e vi sono 4 pannelli trasparenti sui quali piazzare le icone appaiate con le scritte, per farlo però ci vuole una conoscienza base di gimp

Partiamo:

CREAZIONE BOX
prendete questo box

Immagine

apritelo in gimp e modificatelo secondo le vostre esigenze, in parole povere basta un qualche taglia e incolla per rendere il box delle dimensioni di quello che conterrà. Create i box tenendo sempre conto del limite orizzontale della vostra risoluzione evidentemente, ovviamente non tutti hanno una risoluzione come la mia (3360x1050), quindi il pannello va costruito tenendo conto della vostra risoluzione

MONTAGGIO PANNELLO


"montate il vostro pannello" incollando i box uno vicino all'altro in un immagine dell'altezza del box e della larghezza della risoluzione del vostro schermo
Immagine
(potete applicare uno sfondo al di sotto dei box, a vostra scelta, magari restate sul colore del box, in seguito spiegherò come cambiargli colore oppure creare una barra per il conky...beh spazio all'immaginazione!)

ora salvate il pannello in png e riapritelo in gimp (questo facilita le cose, ci sono altri modi ma forse questo è il + semplice), copiatelo e incollatelo come "nuovo livello" sopra l'immagine] (della risoluzione del vostro schermo) che vorrete usare come sfondo

GNOME-PANEL


salvate il "wallpaper + pannello" in png e applicatela come sfondo
create 4 nuovi pannelli da 24 px in basso uno sopra l'altro. Controllate le dimensioni per non permettere che le finestre massimizzate coprano la barra o lascino spazio al wallpaper (in pratica giocate con le dimensioni del primo ma soprattutto con il 4)
(io ho fatto 22,24,24,22)

ora piazzate le icone(semplicemente trascinandole dal menu) e gli applets come ve le eravate immaginate quando avete creato i box (sul secondo e il terzo pannello in modo che stiano + o - allineate con i bordi del box)

DESCRIZIONI

Ora inizia la parte un po noiosa, semplice ma laboriosa...

tornate in gimp e iniziate a scrivere la descrizione dell'icona, continuate a salvare sostituendo l'immagine che avete applicato come sfondo, cosi facendo potrete controllare mano a mano che le scritte siano allineate con le icone, in quanto il wallpaper verrà subito rimpiazzato,

una volta fatto il primo box

Immagine

(potete dargli un titolo e aggiungere qualche particolare)

create un fissello che vada pefettamente a tangere con le due scritte come potete vedere in quest'immagine

Immagine

(per farlo basta cliccare sul bordo della tabulazione in alto e trascinare verso il basso "il fissello"

Immagine

cosi facendo potete allineare tutte le scritte al fissello e avere tutte le icone allineate alle descrizioni

ultimate il pannello con le vostre descrizioni

Complimenti ora avete anche voi un bel desktop ribbon  (good)

COLORE

Nel caso in cui volete cambiare sfondo e il pannello non è + in tinta con esso, basterà aprire il vostro xcf con il vostro progetto, eliminate il livello con lo sfondo, andate sulla voce "colori" e poi su "colora, e li sbizzarritevi...in seguito incollate il nuovo sfondo come "nuovo livello" e impostatelo al di sotto del pannello e il gioco è fatto

il risultato è questo


Immagine

Immagine

Immagine
______________________________________________________________________________________________________________________________________________
Shiny ribbon


ora spiegerò brevemente come ottenere un effetto del genere per il vostro ribbon panel:
Immagine



Per fare questo tipo di box ho usato inskcape

cominciamo:

creiamo un quadrato delle dimensioni del box (come quello presente all'inizio della guida)

Immagine

e arrotondiamolo leggermente grazie alle apposite "linguette" presenti agli angoli, scegliamolo del colore di base dei nostri box

duplichiamo il nostro box (mouse destro duplica) e stavolta scegliamo un colore un po + scuro del precedente (servirà per sfumare)

ora prendiamo lo strumento di grediente
Immagine

e ci giochiamo finche otteniamo, grazie alle trasparenze, questo effetto:

Immagine

ora creiamo una parte + chiara per le scritte che descrivono il genere di icone contenute nel box

duplichiamo ancora il box e stavolta lo coloriamo di un colore + chiaro

Immagine

ora usiamo un tool presente sulla barra a sinistra "disegna tracciati..." oppure "maiusc+F6" e disegnamo una specie di rettangolo, l'importante è che quello che è all'interno del box sia dritto poi il resto conta poco (click recarsi dall'altra parte del box click, ...., se si tiene premuto si ottiene l'effetto curvato che useremo dopo)

Immagine

ora selezioniamo il rettangolo e il box con "ctrl+shift+mouse-sinistro" andiamo su tracciato, intersezione, e giochiamo un po con il gradiente come prima.

Immagine

ora andiamo a creare quell'effett shiny arrotondato

come "al solito" duplichiamo il box e diamogli un colore chiaro e con "disegna tracciato" (maiusc+F6) creiamo questa figura

Immagine

per ottenere la curva basta tenere premuto fino al centro della figura e rilasciare, cosi facendo la retta si incurverà, scegliamo poi la distanza giusta per avere una curva + o - proporzionata

ora andiamo ancora su tracciato, intersezione, e giochicchiamo col gradiente

Immagine

ora siccome lavoriamo con un programma vettoriale, conviene crearsi i box della dimensione giusta in inkscape (copia - incolla - e si possono ridimensionare senza l'effetto pixelloso con i programmi bitmap), poi il resto l'ho fatto in gimp, visto che con inkscape è possibile esportare in xcf

beh spero di aver ispirato qualcuno  ;)

questo è quello che si può ottenere giochicchiando con il colore del testo una volta importato in gimp:



Immagine

Immagine

------------------------

Giocando un po con le trasparenze:
Immagine
Immagine
Ultima modifica di Anonymous il martedì 28 aprile 2009, 22:52, modificato 1 volta in totale.
-----> dai un occhio al mio BLOG
Avatar utente
mcx
Prode Principiante
Messaggi: 11
Iscrizione: martedì 25 novembre 2008, 22:14

Re: [How to] Ribbon Desktop

Messaggio da mcx »

:o geniale! complimenti!
Avatar utente
Ðãve
Prode Principiante
Messaggi: 149
Iscrizione: venerdì 4 aprile 2008, 20:52
Contatti:

Re: [How to] Ribbon Desktop

Messaggio da Ðãve »

(good) (good) (b2b)
K - Graphic - Sito personale in Flash
My Site: Collezione di Wallpaper
Wallpaper: Pack01-Pack02
Avatar utente
Sloteel
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 355
Iscrizione: venerdì 9 giugno 2006, 11:39

Re: [How to] Ribbon Desktop

Messaggio da Sloteel »

Ma quanto 'azz è grosso quel desktop????  :o Hai un multisala in salotto?  :P
Avatar utente
UFK
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 464
Iscrizione: lunedì 7 aprile 2008, 20:13
Contatti:

Re: [How to] Ribbon Desktop

Messaggio da UFK »

Sloteel ha scritto: Ma quanto 'azz è grosso quel desktop????  :o Hai un multisala in salotto?  :P
2 samsung da 22 pollici  :D
-----> dai un occhio al mio BLOG
Avatar utente
jackric
Entusiasta Emergente
Entusiasta Emergente
Messaggi: 1069
Iscrizione: giovedì 30 ottobre 2008, 14:13
Desktop: Plasma
Distribuzione: Ubuntu 20.04
Sesso: Maschile

Re: [How to] Ribbon Desktop

Messaggio da jackric »

belandi è vero è basso ma è larghissimooo!! il mio 22 nn è così!
Avatar utente
UFK
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 464
Iscrizione: lunedì 7 aprile 2008, 20:13
Contatti:

Re: [How to] Ribbon Desktop

Messaggio da UFK »

jackric ha scritto: belandi è vero è basso ma è larghissimooo!! il mio 22 nn è così!
è largo perchè sono due 22 pollici uno di fianco all'altro  ;)
-----> dai un occhio al mio BLOG
The Wise Dj

Re: [How to] Ribbon Desktop

Messaggio da The Wise Dj »

jackric ha scritto: belandi è vero è basso ma è larghissimooo!! il mio 22 nn è così!
De zena ?
:P

Bellissimi lavori!
Sì sì! ;)
Avatar utente
Sloteel
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 355
Iscrizione: venerdì 9 giugno 2006, 11:39

Re: [How to] Ribbon Desktop

Messaggio da Sloteel »

Si, l'idea è geniale. E' una vita che provo a fare lo stesso ma il risultato non mi soddisfava mai al 100% e ora capisco perchè... è questione di centimetri  ;D
Avatar utente
pablomoreno
Entusiasta Emergente
Entusiasta Emergente
Messaggi: 1237
Iscrizione: domenica 1 giugno 2008, 14:45
Desktop: Gnome
Distribuzione: Ubuntu 20.04
Sesso: Maschile
Contatti:

Re: [How to] Ribbon Desktop

Messaggio da pablomoreno »

iscritto al tread
http://pablomoreno77.blogspot.com  ----- Ubuntu User number is # 26652
Il passato è un'illusione. Devi imparare a vivere nel presente ed accettarti per quello che sei ora. Quello che ti manca in flessibilità e in agilità devi acquisirlo con la conoscenza e la pratica costante. (Bruce Lee) -
Avatar utente
burt
Entusiasta Emergente
Entusiasta Emergente
Messaggi: 1621
Iscrizione: mercoledì 24 ottobre 2007, 9:03
Località: Sestri Levante (GE)

Re: [How to] Ribbon Desktop

Messaggio da burt »

Ottimo ufk  (good) volevo persino consigliarti io di aprire una discussione sul tuo panel
Avatar utente
Neni
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 742
Iscrizione: martedì 18 novembre 2008, 14:49
Località: Verona
Contatti:

Re: [How to] Ribbon Desktop

Messaggio da Neni »

Veramente bello! (good) (good)

Complimenti... (b2b)
Linux User #483736         Ubuntu User #25983                                                                                                                     --INTERNET   ++ CABERNET
nenitux My Brute              Il blog del Neni
Non hai veramente capito qualcosa fino a quando non sei in grado di spiegarlo a tua nonna!!! (Albert Einstein)
Avatar utente
UFK
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 464
Iscrizione: lunedì 7 aprile 2008, 20:13
Contatti:

Re: [How to] Ribbon Desktop

Messaggio da UFK »

Grazie a tutti  ;) Fatemi sapere se trovate che ci siano parti poco chiare, ora sto provando a fare un video  ;) con quello non si sbaglia  ;D
-----> dai un occhio al mio BLOG
Avatar utente
jackric
Entusiasta Emergente
Entusiasta Emergente
Messaggi: 1069
Iscrizione: giovedì 30 ottobre 2008, 14:13
Desktop: Plasma
Distribuzione: Ubuntu 20.04
Sesso: Maschile

Re: [How to] Ribbon Desktop

Messaggio da jackric »

The Wise Dj ha scritto:
jackric ha scritto: belandi è vero è basso ma è larghissimooo!! il mio 22 nn è così!
De zena ?
:P

Bellissimi lavori!
Sì sì! ;)
li vicino
Avatar utente
burt
Entusiasta Emergente
Entusiasta Emergente
Messaggi: 1621
Iscrizione: mercoledì 24 ottobre 2007, 9:03
Località: Sestri Levante (GE)

Re: [How to] Ribbon Desktop

Messaggio da burt »

jackric ha scritto:
The Wise Dj ha scritto:
jackric ha scritto: belandi è vero è basso ma è larghissimooo!! il mio 22 nn è così!
De zena ?
:P

Bellissimi lavori!
Sì sì! ;)
li vicino
Pure io  ;) Belin saia miga perche ubuntu  ù le gratis ?
Avatar utente
Danielsan
Entusiasta Emergente
Entusiasta Emergente
Messaggi: 1372
Iscrizione: lunedì 31 marzo 2008, 23:09
Contatti:

Re: [How to] Ribbon Desktop

Messaggio da Danielsan »

Iscritto!
Debian Testing amd64 - Programma preferito: Inkscape
Iceweasel logo - Greasemonkey raccolta di script utili
Avatar utente
jackric
Entusiasta Emergente
Entusiasta Emergente
Messaggi: 1069
Iscrizione: giovedì 30 ottobre 2008, 14:13
Desktop: Plasma
Distribuzione: Ubuntu 20.04
Sesso: Maschile

Re: [How to] Ribbon Desktop

Messaggio da jackric »

burt ha scritto:
jackric ha scritto:
The Wise Dj ha scritto:
jackric ha scritto: belandi è vero è basso ma è larghissimooo!! il mio 22 nn è così!
De zena ?
:P

Bellissimi lavori!
Sì sì! ;)
li vicino
Pure io  ;) Belin saia miga perche ubuntu  ù le gratis ?
  (rotfl) (rotfl) almeno un belin in ogni frase ci sta
Avatar utente
Ideogrammi Cinesi
Prode Principiante
Messaggi: 96
Iscrizione: venerdì 12 gennaio 2007, 10:04

Re: [How to] Ribbon Desktop

Messaggio da Ideogrammi Cinesi »

troppo sbatta, comunque complimenti  ;)
Se non sapete come chiamarmi, chiamatemi semplicemente:
Metaphoric
Thelonious Monk
Prode Principiante
Messaggi: 186
Iscrizione: domenica 16 novembre 2008, 11:19

Re: [How to] Ribbon Desktop

Messaggio da Thelonious Monk »

Ho un problema, indirettamente collegato: ho già disegnato la barra, e ora devo solo sistemare i pannelli che dovrebbero essere 24 - 24 - 24 -22. Però, non so per quale motivo, non me li fa ridimensionare a meno di 28 pixel. Qualcuno sa perché? Qualcuno ha soluzioni?
Avatar utente
UFK
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 464
Iscrizione: lunedì 7 aprile 2008, 20:13
Contatti:

Re: [How to] Ribbon Desktop

Messaggio da UFK »

Thelonious Monk ha scritto: Ho un problema, indirettamente collegato: ho già disegnato la barra, e ora devo solo sistemare i pannelli che dovrebbero essere 24 - 24 - 24 -22. Però, non so per quale motivo, non me li fa ridimensionare a meno di 28 pixel. Qualcuno sa perché? Qualcuno ha soluzioni?
la dimensione minima dei pannelli dipende dal font che usi, prova a cambiarlo  ;)
-----> dai un occhio al mio BLOG
Scrivi risposta

Ritorna a “Bar Ubuntu”

Chi c’è in linea

Visualizzano questa sezione: 0 utenti iscritti e 8 ospiti