Diseño web con gimp

Gimp wireframe

Gimp es un programa de diseño similar a PhotoShop, pero un poco menos fácil de usar y mucho más libre (como en completamente libre). Gimp es un poco menos intuitivo de usar en comparación con opciones como Canva, simplemente porque en realidad tiene una enorme gama de funciones para la mayoría de los tipos de diseño gráfico – sólo se necesita un poco más de conocimiento para moverse que algunos programas freemium.

Como nota rápida, no hay autoguardado en Gimp, así que guarda tu imagen a través de la barra de herramientas o “ctrl+s” a menudo. Si hay una subida de tensión o algo así y tienes que rehacer todo tu trabajo, estarás MUY triste.

Con la herramienta de texto seleccionada, haz clic en casi cualquier parte del lienzo para crear una capa de texto. Tal vez sea sólo yo, pero el mío siempre aparece muy pequeño en mi lienzo. No importa. Sigue adelante y escribe tu texto, aunque sea un texto para hormigas. No te preocupes por los errores tipográficos… puedes arreglarlos más tarde.

Sería demasiado dramático decir que es una trampa y que no es útil en absoluto. Pero diré que he tenido, en el mejor de los casos, un éxito variable con los cambios realizados en esta barra de herramientas que surten efecto en el lienzo.

Diseño html de gimp

GIMP -que significa Programa de Manipulación de Imágenes de GNU- es un testimonio de cómo las aplicaciones de código abierto pueden competir con éxito con sus homólogas comerciales propietarias. Rico en un increíble conjunto de herramientas útiles y filtros de efectos en una interfaz gráfica de usuario amigable, GIMP es una excelente aplicación para la edición de imágenes y la creación de gráficos. En este artículo, encontrarás 10 excelentes sitios que ofrecen tutoriales de diseño e información sobre GIMP.

Gimp-tutorials.net es un sitio con formato de blog que también presenta tutoriales enviados por los usuarios. Algunos tutoriales que encontrarás en Gimp-tutorials.net son “Blog Theme Design tutorial”, “Adding life into a Flat Photograph” y “Split-toning in GIMP”.

GimpTalk es un gran sitio comunitario para todo lo relacionado con GIMP. GimpTalk tiene un foro de tutoriales y consejos de GIMP que tiene excelentes y útiles tutoriales como “GIMP Scripting 101”, “Configurar GIMP para el trabajo artístico”, y “Dibujo a lápiz con GIMP”.

Gimpology es un lugar que permite a los usuarios enviar sus propios tutoriales de GIMP o compartir enlaces a tutoriales que han encontrado en la web. Algunos tutoriales populares en Gimpology incluyen “Fake HDR Look in Gimp”, “Authentic Vintage Effect”, y “Make Your Photo Look Like a Hollywood Movie”.

Tutorial de diseño de ui en gimp

Codifico a mano cada proyecto en HTML5/CSS3/PHP, y he empezado a utilizar efectos CSS3 (por ejemplo, degradados, sombras de caja, sombras de texto, etc.) sobre las imágenes cuando es posible, por lo que no tengo necesidad de generar código HTML/CSS.

A medida que empiezo a colaborar más con otras agencias, diseñadores gráficos y desarrolladores, empiezo a preguntarme si tengo que morder la bala y utilizar las herramientas “estándar de la industria”: Adobe Illustrator, Fireworks y Photoshop.

Utilizo Photoshop, Fireworks e Illustrator para los trabajos gráficos. El 95% de los clientes insisten en tener una maqueta adicional de la página de inicio en formato .psd para futuras referencias, así que se la doy a mis clientes.

Sin embargo, creo que tiene mucho más sentido darles las partes recortadas que he utilizado en .psd o .png o .eps. De este modo, no tienen que utilizar la maqueta en absoluto, si quieren modificar las partes, por ejemplo, los degradados, los iconos o los gráficos de la cabecera.

Sin embargo, creo que se puede usar el Gimp y el Inkscape tan bien como guardar los archivos en los formatos estándar, si no recuerdo mal. No me gusta el Gimp, que es la única razón por la que no lo uso.

Gimp crear icono

Construir o actualizar el sitio web de tu pequeña empresa no tiene por qué significar gastar una fortuna en diseñadores y consultores de maquetación. En su lugar, utiliza GIMP, un editor de imágenes de descarga gratuita, para ayudarte a planificar un diseño eficaz del sitio web mediante la elaboración de un plano detallado que te guíe en el proceso de diseño del sitio.

Cree otra capa nueva y nómbrela “Enlaces”. Comience en la esquina inferior izquierda de la cabecera y arrastre la herramienta Selección de Rectángulo a través y hacia abajo para crear una nueva selección de 780 píxeles de ancho por 20 píxeles de alto. Rellene esta selección con un color diferente para designar el área necesaria para los enlaces de navegación.

Cree otra capa nueva y nómbrela “Menú”. Haga clic en la herramienta “Selección de rectángulo” en la esquina inferior izquierda del área de enlaces y arrástrela hacia abajo, creando una sección de 200 píxeles de ancho por 855 píxeles de alto. Rellene esta capa con un color diferente para representar la barra de menú del sitio.

Cree otra capa nueva y nómbrela “Pie de página”. Utiliza la herramienta de selección de rectángulos para designar un área en la parte inferior de la imagen, comenzando en el borde derecho de la barra de menú, y arrastrando a través y hacia abajo para crear un área de 580 píxeles de ancho por 60 píxeles de alto. Rellene el área para representar la sección de pie de página.