LINK

PREVIEWS:

Quizás también te interese leer

• Otro editor visual de css
• Galerías de fotos CSS
• Efectos Css: Swap Hover Effect
• Editor CSS online
• Css: sitios web modernos

1. No maquetar con tablas.

Acá hay un sin fin de sitios donde nos dicen las ventajas y desventajas; yo no voy a meterme en eso, ni quiero crear un debate, simplemente las tablas no fueron creadas para maquetar sitios. Es mejor utilizar la etiqueta <div>

2. No olvidarse de la paleta de colores

Es mucho, muy, demasiado, super importante tener en cuenta la paleta de colores que se utilizará en el sitio, EN TODO el sitio. Definir la paleta de colores debería ser uno  de los primeros pasos. Esto es importante para que cada página del sitio web siga un mismo estilo de diseño.

3. No crear sitios muy pesados

Que el ancho de banda aumente constantemente no significa que podamos olvidarnos de optimizar las imágenes, el flash y demás elementos que hacen que un sitio cargue más lentamente. Siempre tenemos que tener en cuenta que en internet cuanto más rápido cargue, mejor.

4. No utilizar frames

Ya están en desuso, incluso creo que van a ser retirados del estándar con HTML5. En su lugar se pueden buscar opciones mucho más óptimas para los buscadores con Ajax o Php.

5. No restarle importancia al CSS

Es muy importante la hoja de estilos del sitio, tiene grandes ventajas (nos permite asignarle a cada página del sitio un mismo estilo) y si bien en HTML tenemos etiquetas y propiedades para dar formato es aconsejable hacerlo con Css.

6. No descuidar la compatibilidad

Una de las cosas más importantes es que nuestro sitio se vea igual en todos los browsers o navegadores. Tenemos que diseñar y testear nuestros sitios para que sean compatibles con todos los navegadores más utilizados.

Quizás también te interese leer

• Vistoso formulario de contacto con javascript y php
• Vectores: silueta de personas
• Empresa de Diseño Web en Barcelona
• Efectos Css: Swap Hover Effect
• 5 Tips importantes para desarrollar una web

LINK

Quizás también te interese leer

• No hay posts relacionados

Quizás también te interese leer

• Tutorial Ilustrator: crear un wallpaper abstracto y colorido
• Tutorial Ilustrator: crear un afiche publicitario
• 450 Motivos para Ilustrator
• 30 Pinceles para Ilustrator

LINK

Quizás también te interese leer

• No hay posts relacionados

Es un atículo bastante corto y fácil de entender, resumidamente los 5 tips son:

1. La navegación debe ser simple, intuitiva, para que el usuario no deba pasar minutos enteros buscando como ir de un lado a otro del sitio.

2. No siempre es bueno poner música de fondo, o sobrecargar el sitio con multimedia. No los hace más atractivos, en especial para aquellas personas que visitan el site desde un lugar público o con los parlantes encendidos.

3. No publicar el sitio hasta que no esté construido en su totalidad. En una charla sobre Usabilidad y Experiencia al Usuario nos comentario que es un error grave colocar “sitio en construcción”, y nos explicaron que la palabra BETA tiene el efecto de aclarar al usuario que navega el site que está en constante evolución, por lo tanto podría haber secciones incompletas o cosas que no funcionan aún como se espera.

4. Utilizar adecuadamente los colores. Esto es muy importante, es un tip que está presente siempre, los sitios deben respetar una cierta armonía de colores. Quien diseña debe conocer que colores combinan y cuales no, que puede usarse para resaltar y que es de buen gusto para quien lo visita.

5. Web Hosting. Los usuarios que ingresan al sitio no tienen la culpa si otros 50.000 entraron al mismo momento, por lo que el desarrollador debe encargarse de contratar un hosting que funciones y se adecúe a su tráfico y las funciones que debe cumplir el sitio.

LINK

Quizás también te interese leer

• 6 cosas que no deberían hacerse en diseño web
• 10 Consejos para diseñadores

El tutorial está dividido en dos post, pero yo acá les dejo una copia completa del tutorial.

Para realizar el fondo, en una Capa que llamaremos Fondo, creamos un rectángulo con un degradado radial de color verde (80/0/100/0) a color verde claro (30/0/100/0) de manera concéntrica.

A continuación vamos al menú Menu Objeto/Expandir para expandir el degradado.

En la ventana que se nos abre tildamos, en la opción Expandir, la opción Relleno y, en la opción Expandir degradado a, la opción Malla de degradado.

A continuación crearemos algunas variaciones tonales en el fondo para dar un efecto de “pintura”. Para esto seleccionamos la herramienta Malla y hacemos clic en cualquier parte cercana a los bordes del rectángulo.

En la ventana Color vamos modificándole los valores para crear el efecto de variaciones tonales hasta obtener una imagen similar a la siguiente figura.

Creamos una nueva subcapa y bloqueamos la subcapa grupo que contiene el rectángulo que acabamos de editar.

Renombramos la subcapa como Rayos y creamos un triangulo alargado, de color verde (80/50/100/0), como podemos ver en la siguiente figura.

Seleccionamos la herramienta Rotar y, apretando la tecla Alt, hacemos clic en la punta que se encuentra en el centro del rectángulo. Se nos abrirá una ventana (Rotar) donde ingresaremos el valor 20 en la opción Ángulo. A continuación hacemos clic en el botón Copiar. Esto creara una copia del triangulo unos 20 grados de distancia del triangulo original.

Vamos al menú Objeto/Trasformar/Volver a transformar (Ctrl + D) y realizamos 16 copias mas. Seleccionamos todo y desde la ventana Transparencia modificamos el modo de fusión de Normal por Multiplicar y le bajamos la opacidad a un 40%.

Bloqueamos y ocultamos la capa Fondo y creamos una capa nueva a la que llamaremos Manzana.

Utilizando la herramienta Elipse, creamos un ovalo muy pequeño de color amarillo. Le bajamos la opacidad a un 70% y lo arrastramos a la ventana Pinceles.

Se nos abrirá una ventana donde seleccionamos la opción Nuevo pincel de dispersión. En la nueva ventana que se nos abre colocamos los siguientes valores:

Tamaño 26% – 100% – Al azar

Espaciado 100% – Fijo

Dispersión -1000% – 1000% – Al azar

Rotación 0º – Fijo

Rotación respecto a: página

Método: Ninguno

Aceptamos y borramos el ovalo que creamos.

Seleccionamos la herramienta Pincel y vamos pintando de forma aleatoria hasta lograr algo similar a la siguiente imagen:

Seleccionamos todo (Ctrl + A) y, desde el menú Objeto/Expandir apariencia, transformamos los trazos en figuras geométricas. Sin deseleccionar abrimos la ventana Símbolos y arrastramos las manchitas (óvalos) dentro de la ventana. En la ventana que se nos abre, tildamos la opción Gráfico y aceptamos.

Borramos los ovalitos y creamos un nuevo ovalo grande al cual pintaremos de color rojo (20/100/100/0).

Vamos al menú Efecto/3D/Girar y en la ventana que se nos abre repetimos la configuración que se ve en la siguiente imagen:

Antes de aceptar la transformación, hacemos clic en el botón Mapear ilustración y, en la ventana que se nos abre, en el menú desplegable Símbolo, seleccionamos el símbolo que hemos creado anteriormente.

Dependiendo del tamaño con que hayamos creado el Símbolo, tal vez sea necesario hacer clic en el botón Cambiar escala para ajustar. Esto adaptara el Símbolo a toda la figura 3D. También podemos cliquear la opción Difuminar ilustración (más lento) lo cual suavizara la imagen, integrándola mejor con nuestra ilustración. Sin embargo, como ya nos avisa desde el nombre, hacer esto lentificará circunstancialmente el renderizado de nuestra imagen.

Para continuar con este tutorial vamos a necesitar cualquier etiqueta, la cual servirá como gráfica de la botella que iremos a realizar. La misma puede ser algo ya hecho o hecha por nosotros. En este caso hice una pequeña ilustración a modo de etiqueta. Como esto no hace al tutorial, no explicare como hacerlo, ya que, básicamente, no difiere mucho de lo que se vio en la primera parte del tutorial.

Creemos entonces la botella tridimensional en Illustrator.

Para optimizar tiempos, en el redibujado de pantalla, es conveniente trabajar la botella en un documento aparte.

Para crear las distintas partes de la botella utilizaremos la herramienta Pluma.

En la siguiente imagen vemos como se dividió la forma básica de la misma.

Es importante destacar que la misma tiene que poseer solamente una mitad, por lo que podemos crear la imagen completa de la botella, preocupándonos solamente con uno de los lados y luego, para asegurarnos que estamos cortando exactamente la botella al medio, creamos una línea vertical, y utilizamos el comando Objeto/Trazado/Dividir objetos debajo para cortar la imagen.

Seguidamente pintamos cada una de las partes con los colores que se detallaran a continuación. Es importante destacar que los valores están expresados en CMYK, pero que no altera en nada el resultado final:

Tapa: Azul (64/44/0/0)

Cuello: Gris (5/3/4/0 < al 35% de opacidad)

Bebida: Naranja (0/32/80/0)

Etiqueta: Cualquier color

Seleccionamos todo con la herramienta Selección (flechita negra) y vamos al menú Efecto/3D/Girar, y en la ventana que se nos abre ingresamos valores similares a los que vemos en la siguiente imagen…

En esta ventana encontraremos todas las opciones necesarias para controlar el efecto 3D. Notaremos que se puede seleccionar el ángulo en que se dibuja el efecto 3D, controlar cuanto la vamos a rotar (girar), etc.

Para observar el efecto que estamos aplicando es necesario tildar el casillero de Previsualizar para ver el resultado. Dependiendo el tipo de objeto que creemos tal vez sea conveniente no tildar el casillero hasta el último momento ya que el redibujado de los objetos 3D es muy lento.

Observemos que en el lado derecho de la ventana existen varios botones. El último de los mismos es Más opciones. Haciendo click en él se nos habilitan las opciones de iluminación. Le agregamos una nueva fuente de iluminación como vemos en las siguientes imágenes.

Antes de aceptar la transformación 3D, podemos ir rotando el cubo verde en la ventana para ubicar la botella en la posición que deseamos.

Pulsamos el botón OK y el efecto 3D estará listo con los brillos y los detalles que hemos elegidos sin mucho esfuerzo.

Ahora solo nos queda aplicar la etiqueta. Como comente anteriormente podemos utilizar cualquier imagen para aplicarla en nuestra botella 3D. En este caso fue creada en un documento aparte en Illustrator.

Desde el menú Archivo/Colocar buscamos la imagen que hemos creado, ya sea con Photoshop o como en este caso en Illustrator, para insertarla en nuestra botella.

Una vez aplicada en Illustrator hay que convertirla en Símbolo. Abrimos la ventana Símbolos y arrastramos la imagen a esa ventana y le colocamos un nombre.

Seleccionamos nuevamente la botella y, desde la ventana Apariencia, hacemos click en la opción Giro 3D para volver a editar el renderizado (Mapeado) de la botella.

Una vez abierta la ventana hacemos click en el botón Mapear ilustración.

Se nos abrirá una nueva ventana donde se verán cada una de las partes de la botella. En el navegador superior Superficie vamos desplazándonos en cada una de esas partes hasta llegar a la parte del medio de la botella. Si tenemos activa la opción de Previsualizar veremos en la botella como se reproduce, en color rojo, cada una de las partes que vamos seleccionando.

Destaquemos que las zonas en blanco son las partes de la botella que se ven, por eso es necesario ajustar la etiqueta dentro de esa región. Si se quiere mas detalles con las luces podemos chequear la casilla Difuminar ilustración (más lento).

Hacemos click en el botón OK en ambas ventanas y listo, ya tenemos terminada nuestra botella. Lo que les recomiendo es que una vez terminada la botella se adapte la mesa de trabajo (Canvas) lo más cercano a la botella para que cuándo la apliquemos en nuestra ilustración de las manzanas no exista mucho espacio vacío alrededor de la misma.

Es importante destacar que cuando se quiera trabajar con las opciones 3D es necesario hacer vectores simples. Mas allá de esto es necesario saber que el efecto de 3D suele tener algunos problemas, principalmente en lo que redibujado se refiere. Hay que tener en cuenta que Illustrator usa muchos recursos de nuestra computadora para generar el efecto tridimensional por lo que es una buena idea liberar toda la memoria RAM disponible lo cual podremos hacer utilizando Illustrator sin tener otras aplicaciones abiertas.

Obviamente que el resultado 3D no es perfecto, y dista mucho de un trabajo realizado por una aplicación especifica de 3D, como puede ser Maya o 3D Max, pero puede sernos de gran utilizad para resolver ilustraciones simples sin necesidad de recurrir a otra aplicación más compleja.

Quizás también te interese leer

• Tutorial texto 3d en nubes
• Tutorial photoshop: texto (motion blur)
• Tutorial photoshop: como hacer una isla flotante
• Tutorial photoshop: como crear un ícono
• Tutorial photoshop: bailarines de pintura

En 10Steps hicieron una recopilación de 20 diseños de fan page de facebook

Quizás también te interese leer

• Top 10 de lo que más se buscará en 2010, según Google
• Publicidad de Ubuntu 9.10 y Dell
• Nueva Función de Facebook: enlazar amigos
• El Blog de Sol en Facebook
• Coleccionable: 130 posters de coca-cola

DESCARGALOS ACÁ

Quizás también te interese leer

• Iconos de redes sociales en madera
• Iconos de carpetas estilo ejecutivas
• Cientos de íconos de alta calidad
• Set de iconos HD
• Recopilación de todos los packs de iconos del blog

LINK: PSD.Tutsplus

Quizás también te interese leer

• Vectores: Calendarios 2010
• Sitios para diseñadores
• 30 PSD de sitios web