Actualizar 'Diseño'

germedeb 2022-02-22 17:11:39 +01:00
parent caeb4636ca
commit ef27e23da3
1 changed files with 78 additions and 0 deletions

78
Dise%C3%B1o.md Normal file

@ -0,0 +1,78 @@
# Diseño
En esta pagina se abordarán la mayoría de cuestiones de diseño en Aleta
## Inkscape setup
_Esta sección es completamente opcional_
### La paleta de colores
Esta paleta aporta unos colores predefinidos que suelen quedar bien, a la hora de hacer iconos.
Esta paleta a su vez, es completamente opcional, puesto que el resultado (el icono ya terminado) no utilizará esta paleta en absoluto.
La idea es que esta paleta te sea de ayuda a tí como diseñador, para no tener que entrar a la sección Color del objeto, y, en cambio, gracias a la paleta, con un simple click o un shift+click, cambiar el color del objeto rapidamente.
### Cómo importar la paleta de colores
**Copia `other/aleta-postre.gpl` al directorio de paletas de inkscape**
Inkscape instalado por el gestor de paquetes de tu distribución (o compilado manualmente) tiene la siguiente ruta:
```
~/.config/inkscape/palettes
```
Si instalas inkscape desde la distribución¹ flatpak, la ruta será la siguiente
```
~/.var/app/org.inkscape.Inkscape/config/inkscape/palettes
```
## Partes del icono
El icono, hablando en terminos de diseño, está compuesto por tres partes:
### Background
Es el fondo de color que se ve en todos los iconos de aleta. Este Cuadrado suele poseer un gradiente de colores, o quizá un color solido. El color corresponde al original de la aplicación; NO a alguno de la paleta de colores.
### Foreground
Es El "icono" blanco que se ubica por encima de el Background.
El Foreground es el símbolo de la app, de la cual hablaremos adelante.
### Hint
La Hint es una ayuda para el diseñador, para que los Foreground queden completamente centrados y perfectos dentro del Background. Por temas de legacy, se habían tenido 3 hints, pero luego se redujeron a 2, y estoy pensando en si solo dejar 1.
## Diferentes Templates
Aleta tiene 4 templates a día de hoy, estos templates son:
| Template | Descripción |
| - | - |
| Template-icon | El template que debes usar para crear iconos de apps |
| Template-folder | El template para carpetas |
| Template-action-symbolic | Un template para iconos simbolicos |
| Template-action-symbolic-with-negation | Lo mismo, solo que con una barra que atravieza toda la linea diagonal, para hacer iconos que niegan cosas, como por ejemplo, el WiFi apagado. |
## Iconos de Aplicaciones
Los iconos de aplicaciones son los iconos que más necesitamos que diseñes, porque hay una infinidad de apps que sin ayuda, no podremos terminar de cubrir.
La verdad es que para saber como son los iconos de aleta solo necesitas verlos un rato, pues se autoexplican... No sabría desarrollar esta sección de momento, así que la dejaré así por ahora
## Carpetas
Las carpetas Son diferentes de los Iconos (claramente).
WIP
## Final
Resaltaré que esta wiki es WIP (work in progress (Trabajo en Progreso))
Contactame para mas preguntas