This shows you the differences between two versions of the page.
it:rhino:rhinoicons [2015/09/14] |
it:rhino:rhinoicons [2020/08/14] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Icone di Rhino 4 ====== | ||
+ | |||
+ | ======Icone Rhinoceros 4.0====== | ||
+ | |||
+ | \\ | ||
+ | |||
+ | > **Sommario: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | =====Contenuti===== | ||
+ | |||
+ | * [[# | ||
+ | * [[#Canali]] | ||
+ | * [[#Pixels]] | ||
+ | * [[#Crea icone personalizzate]] | ||
+ | * [[#Cambiare pixels nell' | ||
+ | * [[#Cambiare pixels nell' | ||
+ | * [[#Cambiare il disegno vettoriale originale]] Vettoriale | ||
+ | * [[#Regole Geometria]] | ||
+ | * [[#Paletta colori standard]] | ||
+ | * [[#Piè di pagina]] | ||
+ | * [[# | ||
+ | |||
+ | |||
+ | | [[RhinoIcons# | ||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | \\ | ||
+ | |||
+ | =====Introduzione===== | ||
+ | Nel passaggio dalla versione 3 alla 4 di Rhino, le Toolbar sono state riprogettate in modo radicale. Tra le altre nuove caratteristiche, | ||
+ | |||
+ | |||
+ | | [[RhinoIcons# | ||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | \\ | ||
+ | |||
+ | =====Canali===== | ||
+ | Tutte le immagini formate da pixel sono registrate in (solitamente una combinazione di) canali. Il protocollo più diffuso è l' | ||
+ | |||
+ | \\ | ||
+ | |||
+ | | {{: | ||
+ | | {{: | ||
+ | | Qui è visibile un' | ||
+ | | {{: | ||
+ | | {{: | ||
+ | | La stessa immagine con canali alpha sfumati (256 differenti livelli di transparenza). Noterete che questi pixel parzialmente trasparenti si trovano tipicamente sui bordi dell' | ||
+ | |||
+ | \\ | ||
+ | |||
+ | Notate che linee perfettamente orizzontali e verticali appaiono identiche sia che l' | ||
+ | |||
+ | |||
+ | | [[RhinoIcons# | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | \\ | ||
+ | |||
+ | =====Pixels===== | ||
+ | Il succitato [[http:// | ||
+ | |||
+ | L' | ||
+ | |||
+ | \\ | ||
+ | |||
+ | | {http:// | ||
+ | |//Le due immagini rappresentano due diverse visualizzazioni dello stesso disegno vettoriale. L' | ||
+ | |||
+ | \\ | ||
+ | |||
+ | La dimensione dell' | ||
+ | |||
+ | L' | ||
+ | |||
+ | \\ | ||
+ | |||
+ | | {http:// | ||
+ | |//Qui, gli oggetti vettoriali sono stati spostati mezzo pixel a sinistra e in su. Noterete che ci sono molti più pixels interessati da una parziale sovrapposizione e nessuno completamente oscurato dal profilo nero. L' | ||
+ | |||
+ | \\ | ||
+ | |||
+ | La lezione appresa fino a questo punto: Non usate l' | ||
+ | |||
+ | \\ | ||
+ | |||
+ | | //Angoli di inclinazione// | ||
+ | | 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | | ||
+ | | // | ||
+ | |{{: | ||
+ | | //Pixelat// | | ||
+ | | {{: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | La tavola mostra la differenza tra linee anti-alias e pixelate a diverse inclinazioni. Diventa evidente come linee anti-alias inclinate con angoli vicino a 0° e 90° siano poco nitide. | ||
+ | |||
+ | |||
+ | | [[RhinoIcons# | ||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | \\ | ||
+ | |||
+ | =====Farsi le icone personalizzate===== | ||
+ | Se volete modificare un' | ||
+ | |||
+ | * [[RhinoIcons# | ||
+ | * [[RhinoIcons# | ||
+ | * [[RhinoIcons# | ||
+ | |||
+ | | Esempio: | {{: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | E non scordate mai di attenervi alle regole seguenti: | ||
+ | |||
+ | 1. [[RhinoIcons# | ||
+ | |||
+ | 2. [[RhinoIcons# | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | |||
+ | **// | ||
+ | |||
+ | Questo è il metodo più semplice per modificare le icone. Non vi serve altro SW oltre a Rhino[[RhinoIcons# | ||
+ | |||
+ | Innanzitutto, | ||
+ | |||
+ | |||
+ | | {{: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | Ho già sostituito lo script nel campo relativo, per eseguire il nuovo comando, ma l' | ||
+ | |||
+ | |||
+ | | {{: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | Ora possiamo cambiare i pixel che compongono l' | ||
+ | |||
+ | |||
+ | | {{: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | Other examples of pixelated geometry are arrows and texts. You can add these to existing buttons very easily. Use the following table of pixel-rules to make your icons compliant with the default ones: | ||
+ | |||
+ | |||
+ | | {{: | ||
+ | |//Every red square is synonymous with a single pixel//| | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | |||
+ | **// | ||
+ | |||
+ | In order to facilitate the creation of anti-aliased icons, all images have been rendered to large bitmaps as well. All the icon images are available as full-colour, | ||
+ | |||
+ | First, you need to load the base image into the editor and apply the alpha channel (some editors will load the alpha automatically), | ||
+ | |||
+ | |||
+ | | {{: | ||
+ | | //Note that the image displayed here is only 384×384 pixels large, the original base images are twice this size. I.e. base images are 32 times larger than the icons. I have also enabled the display of the pixel-grid (the dotted black lines). If you look closely at the image you'll notice that it is pixelated. This makes it easier to post-process the image.//| | ||
+ | |||
+ | \\ | ||
+ | |||
+ | Now imagine we have a command (or a macro or alias or whatever) which applies a green glass material to an object and we use this command more than 261 times a day. It would be nice to have a button that runs the command for us, and it would be even nicer to have a neat icon that accompanies it. Obviously this icon needs to be a green, transparant something. Since we've used the box icon before, we'll use it [[http:// | ||
+ | |||
+ | In order to make the box icon transparant and green, we cannot use the [[RhinoIcons# | ||
+ | |||
+ | |||
+ | | {{: | ||
+ | | //I have applied new colours to the faces using the paintbucket tool, then I've copied the two vertical faces of the box onto the opposite sides using the magicwand selection tool, changed their colours (to white and black respectively) and made them very translucent. These faces should be behind the box, but we can draw them on top of the box using such trickery. You can see that the image conveys a strong sense of transparancy.// | ||
+ | |||
+ | \\ | ||
+ | |||
+ | My edited image has collected a few extra layers on the way and before I can put the image into Rhino, I need to combine all superimposed layers and turn it into a small icon (say, 24×24 pixels). If you need to merge (combine) layers, make sure you do not simply flatten the image. Flattening typically destroys any existent alpha-channels. JASC Paint Shop Pro provides several merging modes, Merge Visible is the one we need: | ||
+ | |||
+ | |||
+ | | {{: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | After the image has been merged into a single layer including an alpha-channel[[RhinoIcons# | ||
+ | |||
+ | |||
+ | | {{: | ||
+ | |//JASC Paint Shop Pro comes with a Smart Size algorithm which usually delivers good results.//| | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | |||
+ | **// | ||
+ | |||
+ | Sometimes, we need to make so many changes to an icon, that adjusting the base or icon image is not an effective approach. In that case (or even if you need to create a new icon from scratch), you're better off using a vector editor to fiddle with the vector objects that make the icon. All Rhino4 icons were drawn in [[http:// | ||
+ | |||
+ | The first order of business when creating new icons, is to find one which reasonably resembles our goal. It is of course possible that no existing icon looks anything like what you're after, but those cases are rare. Let's assume we once more need the Box icon: | ||
+ | |||
+ | |||
+ | | {{: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | The vector source images have been layered to lubricate the alignment and export tasks. In XaraX, layers can reside either in the background or the foreground. Layers in the background (Guides and Background) will not be included when Xara converts the vector drawing to a pixel image. The only object in the Background layer is the green square behind the icon. This square is used to preserve the alignment and positioning of the foreground objects with respect to the pixel-grid. It is of no importance yet. | ||
+ | |||
+ | The Guides layer contains a set of infinite lines that mark the boundaries of all icon areas (the red, dotted lines). It, too, can be ignored at this time. | ||
+ | |||
+ | The Obj_Base layer contains all the objects that make up our icon. The blue faces and the black outline in this particular case. | ||
+ | |||
+ | The Pixelgrid layer contains a red grid which corresponds with the pixels of a 24×24 icon. You can use this grid to align your objects. Additionally, | ||
+ | |||
+ | |||
+ | | {{: | ||
+ | |//I dragged a few control points around to new grid locations, made two copies and changed a few colours. Adjusting the icon did not take longer than one minute.//| | ||
+ | |||
+ | \\ | ||
+ | |||
+ | Once you are happy with the new image, you have to create an icon file that Rhino understands. Depending on which application you are using, you can use one of the following methods: | ||
+ | |||
+ | * Save the icon directly | ||
+ | * Create a base image | ||
+ | |||
+ | \\ | ||
+ | |||
+ | **//Save the icon directly// | ||
+ | |||
+ | If your vector illustration program delivers good anti-aliasing on small scales, you can simply save the vector objects directly to a 24×24 *.png file: | ||
+ | |||
+ | | {{: | ||
+ | | //In Xara, this method works very well, especially with properly aligned vectors. Xara's internal renderer automagically snaps certain objects to the pixelgrid, so crispness is easy to attain. The leftmost pane shows the image as it will be saved, the icon itself is only 17 pixels wide and 22 pixels high, but it needs to be positioned in the center of the square icon area, hence the need for a background rectangle.// | ||
+ | |||
+ | \\ | ||
+ | |||
+ | **// | ||
+ | |||
+ | If saving images at small sizes does not give you satisfactory results, you can take the long way round and create a base image. You'll have to downsample it separately in a pixel-editor as discussed in the [[RhinoIcons# | ||
+ | |||
+ | |||
+ | | Factor | Dimensions | Downsampling | | ||
+ | | 8× | 192×192 | ||
+ | | 16× | 384×384 | ||
+ | | 24× | 576×576 | ||
+ | | 32× | 768×768 | ||
+ | |||
+ | \\ | ||
+ | |||
+ | | {{: | ||
+ | | //Always remember to include the alpha channel in the exported png file.// | | ||
+ | |||
+ | \\ | ||
+ | |||
+ | I also recommend turning off anti-aliasing when creating base images. It serves no purpose and only gets in the way of post-processing operations. | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | |||
+ | **// | ||
+ | |||
+ | When creating your own icons, you should adhere to the Rhino native style. There is no tight set of rules for icons, but a few general pointers do exist: | ||
+ | |||
+ | * All lines in icons should be a whole number of pixels thick (the default set only contains 1 and 2 pixel lines) | ||
+ | * White (or other bright) lines should be at least 2 pixels thick | ||
+ | * Try not to use the pixels along the edges of the icon (this leaves an active icon size of 22×22 pixels) | ||
+ | * Try to use the same view projection as the Box image | ||
+ | * Avoid near-vertical and near-horizontal lines | ||
+ | * Try to avoid using texts in icons (this clashes with localization) | ||
+ | * Use outlines for areas which are adjacent to the transparant background. | ||
+ | * Use the colours in the default palette | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | |||
+ | **// | ||
+ | |||
+ | |||
+ | | Colour definition **(R,G,B)** | Usage | | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |{{: | ||
+ | |||
+ | | [[RhinoIcons# | ||
+ | |||
+ | ---- | ||
+ | \\ | ||
+ | |||
+ | =====Footnotes===== | ||
+ | |||
+ | [[RhinoIcons# | ||
+ | |||
+ | \\ | ||
+ | |||
+ | [[RhinoIcons# | ||
+ | |||
+ | \\ | ||
+ | |||
+ | [[RhinoIcons# | ||
+ | |||
+ | |||
+ | | [[RhinoIcons# | ||
+ | |||
+ | ---- | ||
+ | \\ | ||
+ | |||
+ | =====Downloads===== | ||
+ | |||
+ | | | | ||
+ | | Download all Base images (768×768 pixels) for the 24×24 icons: | //<color red>NOT YET AVAILABLE</ | ||
+ | | | | ||
+ | | Download all Base images (768×768 pixels) for the 32×32 icons: | //<color red>NOT YET AVAILABLE</ | ||
+ | | | | ||
+ | | Download all vector images (*.xar format) for the 24×24 icons: | //<color red>NOT YET AVAILABLE</ | ||
+ | | | | ||
+ | | Download all vector images (*.xar format) for the 32×32 icons: | //<color red>NOT YET AVAILABLE</ | ||
+ | | | | ||
+ | | Download all vector images (*.ai format) for the 24×24 icons: | ||
+ | | | | ||
+ | | Download all vector images (*.ai format) for the 32×32 icons: | ||
+ | | | | ||
+ | |||
+ | \\ | ||
+ | |||
+ | | [[RhinoIcons# | ||
+ | |||
+ | {@ | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | {{: | ||
+ | }@ | ||
+ | ] | ||
+ | |||
+ | |||
+ | |||