Noticias Diseño – Tutorial Photoshop

Un tutorial sencillito con algunas técnicas básicas y esenciales para llegar a un acabado Cartoon (Dibujos animados) como el de la imagen en el texto que más os guste.

Ver Contenido‘

Un problema a la hora de diseñar Webs en HTML es que los rótulos de las columnas, textos de botoneras o citas, etc. debemos de insertarlos en JPG o GIF. La razón es sencilla, se suelen poner fuentes llamativas, fuentes que generalmente no tiene nadie, por lo tanto el explorador no las puede interpretar y deja la Arial por defecto. Esto conlleva que Google no las puntúe de forma óptima. Lo mejor es usar las etiquetas H1 o similar.

Así que… como podemos usar una fuente que nos guste, que todo el mundo la pueda ver, aunque no la tenga, y que google la capte como H1 por ejemplo?

La respuesta la tenéis mejor explicada aquí (Ver Contenido‘) de lo que yo sería capaz de hacerlo así que no os lo perdáis porque.

Mirar este ejemplo (Ver Contenido‘), el código fuente (que son H1) y las fuentes que son custom.

Una pasada para optimizar en buscadores desde luego con sIFR y JQuery.

Typetester es una página donde podréis hacer pruebas de estilo sobre fuentes.

Tamaño, kerning, decoración…

Lo mejor de todo es que las hace al vuelo y resulta muy fácil ver un resultado con cualquiera de vuestras fuentes favoritas, facilitando la labor posterior de maquetado.

Ver Contenido‘

Con este tutorial conseguiréis mezclar Illustrator y Photoshop para hacer una composición con texto 3D.

El resultado final es espectacular.

Ver Contenido‘

Un tutorial sencillito con un acabado realmente impactante. El autor explica desde cómo hacer el background hasta la misma fuente con algunos detalles añadidos.

Además del tutorial, en el mismo enlace podréis encontrar texturas de papel, hierba y un bonito wallpaper con el resultado final.

Ver Contenido‘

Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raíces en una pieza clásica de la literatura del Latín, que data del año 45 antes de Cristo.

Gracias a este generador podéis rellenar vuestros bocetos con texto provisional sin complicaros la vida y asegurándoos que quedará un resultado equilibrado en la tipografía.

Generador de Lorem Ipsum:
Ver Contenido‘

Un bonito efecto para tipografías script con un look luminoso Glow.

Ver Contenido‘

Cuando poner un botón:

Los botones del sistema se deben utilizar en aquellas “acciones” que queremos que el usuario ejecute.

Por ejemplo:

· Enviar
· Buscar
· Descargar fichero
· Subir fichero
· Confirmar
· Guardar

Ejemplos de uso:

Tenemos una web llena de documentos que el usuario puede descargar.

El formato ideal para una página de este estilo sería:

· Titulo del fichero

Botón para descargar los ficheros fuera un botón del sistema etiquetado correctamente (“descarga este fichero”).
Debajo del botón podemos indicar que va a pasar (si el usuario va a una nueva página, cuanto pesa el fichero, formato, etc…).

Cuando poner enlaces:

Los enlaces los debemos utilizar para vincular ficheros HTML. Es decir, el usuario va a ir a otra página web.

El formato de enlaces ha de ser claro y debe indicar que vamos a ver, evitando los “pincha aquí”, “más información”, etc…

El problema de poner bajo enlaces “acciones” que no son ver otras páginas web es que pueden confundir al usuario.

Si tenemos el formato anterior:

· Titulo del fichero

· Descarga fichero.

Debajo podemos indicar que va a pasar (si el usuario va a una nueva página, cuanto pesa el fichero, formato, etc…).

Uno podría adivinar que se va a bajar el fichero, pero se podría pensar que uno va a ir a la página de descargas.

Los botones no crean confusión frente a los enlaces para lo que hemos denominado como “acciones”.

Consigue este efecto clásico, de Mac, en textos para dar un acabado plastificado y brillante.

Ver Contenido‘