Tutoriales Photoshop - Efectos Photoshop
Nuestro Facebook Nuestro Twitter Canal de YouTube Google Plus Suscríbete al Feed RSS
octubre 10, 2012 Autor: Tony Lázaro EfectosPs » Utilidades y recursos 0

En un tutorial habíamos visto cómo realizar paso a paso un diseño web en photoshop cs6. En este artículo vamos a ver algunas herramientas que existen en internet y que nos facilitará muy aparte de crear el diseño en sí. Por ejemplo, qué colores pueden combinar para la web, como el fondo, enlaces, etc.; qué fuentes utilizar y qué texto hay que poner para rellenarlo de alguna manera. Son preguntas que uno se va haciendo conforme se está realizando el diseño y que aquí despejaremos algunas de ellas.

Los colores

Los colores son importantes a la hora de realizar un diseño, saber combinar ciertos colores para encontrar el punto exacto de tonos es indispensable.

Los colores que usaremos tienen que ir según la temática de la web, por ejemplo, si es una web de noticias básicamente de fondo sería blanco, los enlaces de otro color y las cajas o menú diferentes, algo serio. Si es un diseño para un sitio de juegos pues los colores tienen que ser más llamativos e impactantes.

En colorexplorer encontramos una herramienta que nos ayuda a elegir colores. Si, al mover la barra nos indica un color, en los siguientes cuadros nos indicará otros colores que pueden combinar con el color escogido y así colocarlos en enlaces, textos o como fondo.

Definitivamente es una gran herramienta.

Buscar fuentes

Sabemos que identificar buenas fuentes para nuestro texto o logo es también importante. Pero lo malo es que cuando entramos a alguna web que nos brinde fuentes gratuitas, en la imagen de la fuente nos muestra el texto de la fuente. Por ejemplo, si la fuente se llama “orgh”, entonces la imagen mostrará un texto con el nombre de la fuente y si queremos saber cómo se verá con nuestro texto tenemos que descargarlo e instalarlo y probar en el programa, todo un proceso que nos tomaría mucho tiempo. Sin embargo dafont, un sitio que ofrece muchas fuentes gratuitas, podemos buscar diversas fuentes con un texto específico, por ejemplo el nombre de nuestra web, y así ver si nos agrada antes de ser descargada.

Buscar fuentes ya instaladas

Hemos visto cómo colocar nuestro texto y buscar fuentes para descargarlo de una manera rápida, pero, ¿qué pasa cuando queremos saber cómo se verá cierto texto con nuestras fuentes ya instaladas en nuestra computadora?. Para eso existe wordmark.

En este sitio simplemente lo que tenemos que hacer es colocar el texto que queramos y presionar “enter”, esperamos unos segundos y aparecerá una lista con el texto colocado en todas las fuentes de nuestra computadora. Simplement… ¡increíble!

Favicon

Todo sitio web debe contar con un favicon. ¿Pero qué es exactamente un favicon? Un favicon es un icono de página, una imagen pequeña, de 16 x 16 píxeles, que aparece en la parte superior del navegador, exactamente al costado del título. En algunos navegadores de versiones anteriores no es posible visualizarlas pero siempre es necesario tener el favicon para la identificación de nuestro sitio.

En favigen podemos subir, por ejemplo, nuestro logo y el programa lo achicará para luego descargarlo e insertar en nuestro sitio web.

 

Iconos de las redes sociales

Actualmente las redes sociales es un factor importante en la promoción de un sitio web por lo que en casi todos los sitios lo llevan. Entre los iconos más usados son de facebook, twitter o google.

En iconfinder podemos realizar búsquedas de cientos de iconos de las redes sociales, pero no sólo eso, también podemos buscarlos con fondo transparente, un aspecto importante y que todo diseñador quiere.

Rellenar de texto

¿Algunas vez ustedes han visto plantillas para páginas en wordpress o blogger? seguro que sí y muchas de ellas tienen bastante textos y claro, es necesario poder ver el diseño completo de la página, con contenido.

Para rellenar de texto algún diseño web existe lipsum. Este sitio ofrece una cierta cantidad, de párrafos, palabras, bytes o listas para copiar y rellenar las partes que necesitemos.

Conseguir imágenes

Así como necesitamos textos para rellenar la página, también necesitamos imágenes. Para eso tenemos a lorempixel. En este sitio podemos encontrar un espacio que nos permitirá escoger imágenes de diversos tamaños y colores.

Por ejemplo tenemos este enlace http://lorempixel.com/400/200. Aquí podemos ver una imagen de 400 x 200 píxeles. Si actualizamos (F5) nos mostrará una imagen diferente. Sólo es cuestión de copiar la imagen y pegarlo en el diseño que estemos realizando.

Bueno esos son algunas herramientas que estoy seguro les ayudará cuando comiencen a crear su diseño web.

¡Déjanos tu comentario!

Suscríbete y recibe los artículos actuales en tu email:

 

0 Comentarios para '6 Herramientas útiles para realizar un diseño web'

No hay ningún comentario. ¡Sé el primero!
Nombre:   E-mail:
Sitio web: (Opcional)
Felíz Alegre :P XD Cool Guiño LOL Molesto Inseguro Con duda Normal Triste No Llorando Sorprendido 8| Maligno Endemoniado Sonrojado ^^ Me gusta No me gusta
Límite de caracteres: 500/500
Me reservo el derecho de eliminar los comentarios considerados como spam, que no esté relacionado al artículo o que estos incluyan ofensas, racismo, obscenidades y groserías que puedan agraviar tanto a un usuario como al sitio web.

Síguenos en las redes sociales
¡ Recibe las actualizaciones !

Suscríbete con tu correo electrónico y recibe cada artículo actual de EfectosPs en tu bandeja.

Videotutoriales
Últimos tutoriales y artículos
Blanquear dientes con Photoshop
Dientes blancos con Photoshop

Hola, después de mucho tiempo que vuelvo a hacer un tutorial Photoshop. En esta ocasión vamos a aprender a blanquear los dientes de una fotografía con Photoshop. Yo estoy usando… Seguir leyendo

Paquete de iconos de Microsoft
Paquete de iconos de Microsoft

Si ahora estás buscando como loco iconos de los programas de Microsoft, ahora los podrás descargar todos en un solo paquete. Dentro de este paquete viene 60 imágenes en formato PNG, también… Seguir leyendo

Set de vectores de elementos de oficina
Vectores de elementos de oficina

Descarga este set completo con los elementos de oficina entre los cuales hay lapiceros, lápices, diferentes tipos de hojas y alfileres. El peso del archivo es de 997 KB. Dentro… Seguir leyendo

Conjunto de banderas vectoriales
Conjunto de banderas vectoriales

Tal vez necesites algunas de estas banderas para trabajos de colegio, por ejemplo, tal vez usarlas para tu sitio web o quizás para algún diseño que estés realizando. Este conjunto… Seguir leyendo

14 Plantillas Responsive HTML5 y CSS3
14 Plantillas Responsive HTML5 y CSS3

En un artículo anterior ya había publicado unos enlaces para acceder a 111 plantillas HTML 5 y CSS3, así que hoy les traigo 14 más del sitio HTML5Up. Si vas… Seguir leyendo

Páginas amigas