Creando gráficos Web 2.0 usando Adobe Fireworks

En este tutorial vamos a crear un gráfico para un web site 2.0 usando solo Adobe Fireworks™, aunque ha sido creado en la versión CS3, todos los pasos se pueden hacer perfectamente usando versiones anteriores como la versión 8, CS, o CS2.

Nota: Este tutorial va enfocado para quienes poseen un conocimiento básico sobre el uso de las herramientas de Adobe Fireworks™ y nociones de diseño web. Nivel: Medio.

Este gráfico, claro está, ya ha sido previamente bocetado en papel y lápiz, esa debe ser siempre una buena costumbre que nos evitará dolores de cabeza o perdida de tiempo y nos permitirá agilizar creando el gráfico e ir al grano. Bueno, manos a la obra.

Como vemos, en la conceptualización hemos utilizado un elemento gráfico común que se repite en el diseño, no significa que debemos hacerlo siempre, pero en este caso se sigue la línea gráfica del sitio web.

Bien, vamos entonces a empezar por el layout, creamos un nuevo documento 536 X 272 pixeles.

Los Marcos

Vamos a empezar creando el primero de los marcos que contienen las imágenes:

1- Dibujamos un rectángulo con la herramienta Rectangle Tool de 140 X 114 pixeles.

2- Redondeamos las esquinas del rectángulo utilizando Rectangle Roundness ingresando un valor de 20.

3- Clonamos el rectángulo mediante el menú Edit + Clone o usando el Shortcut Ctrl + Shift D. (El rectángulo debe estar seleccionado).

4- El rectángulo clonado se encuentra ahora encima del primero, procedemos entonces a llevar las esquinas a su estado normal usando Rectangle Roundness lo llevamos a cero.

5- Tomamos el nuevo rectángulo y lo escalamos reducido a un tamaño proporcional de un cuarto de su tamaño original.

6- Ahora seleccionamos ambos rectángulos y lo soldamos mediante el menú Modify + Combine paths + Union

Con este elemento gráfico que acabamos de crear ya tenemos una idea aproximada del layout. Procedemos entonces a duplicarlo hasta crear 3 elementos que nos servirán de marco para las imágenes que insertaremos más adelante y lo alineamos de manera que queden equidistantes uno del otro, asegurándonos de aplicarles un grosor de línea de 4 pixeles.

Desde aquí empezaremos a trabajar con colores que serán identificativos de cada elemento gráfico. Recomiendo siempre definir esos colores en una gama que usaremos para cada uno de los gráficos en matices alto, medio y bajo que nos servirán como color base, luces y sombras, muy importante para conseguir mayor realismo en las ilustraciones. Para esto:

1- Definimos tres colores base para cada elemento.

2- Definimos los matices de luz y sombra derivados de este color base.

Ya que hemos definido los colores identificativos de cada elemento le aplicamos el color mas fuerte a cada marco.

Las Flechas

El siguiente paso será crear la flecha la cual dibujaremos y luego ilustraremos:

1- Dibujamos un rectángulo de aproximadamente 150 X 70 pixeles.

2- Repitiendo el mismo procedimiento usado para crear los marcos vamos a redondear sus esquinas.

3- Creamos un polígono usando la herramienta Smart Polygon de la caja de herramientas asignándole 3 lados para dibujar un triangulo.

4- Lo rotamos para convertirlo en la punta de la flecha, le modificamos el ancho y le aplicamos Edit + Ungroup para soldarlo al cuerpo de la flecha. En este paso debemos alinear horizontalmente la punta de la flecha al cuerpo.

7- Tal como hicimos con el marco, unimos o soldamos los 2 elementos usando Modify + Combine paths + Union

8- Clonamos la flecha creada y la expandimos para obtener una mas ancha. Modify + Alter path + Expand Stroke con un valor de 8.

9- Le aplicamos un Split para obtener las 2 flechas que ilustraremos.

10- Seleccionamos la flecha mas grande y le aplicamos un relleno degradado o Gradient Fill Linear utilizando el color mas fuerte con una degradación al centro del color base.

11- Seleccionamos la flecha mas pequeña y dibujamos un rectángulo mas ancho encima colocado a partir de la mitad de su altura, usamos Modify + Combine paths + Punch y cortamos la mitad de la flecha.

12- Aplicamos un relleno degradado o Gradient Fill Linear utilizando el color blanco en ambos extremos, en el nivel de opacidad del color superior aplicaremos 60% y en el nivel inferior aplicaremos 0%.

13- Eliminamos las líneas de la flecha mas pequeña y a la flecha mas grande le cambiamos el color de la línea a blanco y la aumentamos a 4 pixeles.

14- Ahora agrupamos las 2 flechas, la reducimos de tamaño y le ajustamos las proporciones para que queden parecidas a la imagen:

15- Aplicamos una sombra y luego duplicamos para obtener la otra flecha a la que aplicaremos los colores ya definidos previamente. En este paso podemos jugar un poco con el tipo y la posición del Gradient para obtener mejores resultados. En este caso cambie el tipo de Gradient de ambas flechas de Linear a Radial.

Las Esferas

Bien, ahora nos toca crear las esferas, el objetivo es que parezcan que son de cristal:

1- Empezamos dibujando un círculo de 80 X 80 pixeles.

2- Aplicamos un Gradient Fill Linear utilizando los tres colores predefinidos aproximadamente igual que la imágen siguiente:

3- Aplicamos un efecto de Shadow and Glow + Inner Glow utilizando el color blanco.

4- Creamos una elipse de color blanco con la que conseguiremos un efecto de brillo en la parte superior de la esfera.

5- Degradamos la elipse repitiendo el método que usamos para el efecto de brillo de la flecha.

6- Duplicamos el círculo mas grande, le aplicamos un color negro solido y le eliminamos el efecto de Inner Glow. Dibujamos encima una elipse, la alineamos verticalmente y le fundimos con un Join. Finalmente escalamos de forma proporcional a un tamaño de 120 X 120 pixeles.

7- Le aplicamos un efecto de Gaussian Blur (aproximadamente 2.0) y le bajamos la opacidad a un 10%.

8- Para crear la sombra dibujamos una elipse del color mas fuerte, le aplicamos un efecto de Gaussian Blur (aproximadamente 5.8) y le bajamos la opacidad a un 45%.

9- Escribimos un numero 1 de color blanco, en mi caso usé una tipografía Arial en negrita a 60 puntos justificada al centro.

10- Duplicamos las esferas y colocamos las flechas encima.

11- Editamos los colores y los números.

12- Aplicamos el color respectivo a cada sombra de cada esfera.

13- Aplicamos una sombra leve a los 3 números (1,2,3).

El Reflejo

En este paso agregaremos el reflejo de las esferas.

1- Seleccionamos una esfera junto con su respectivo número, la agrupamos y duplicamos.

2- Al duplicarla seleccionaremos con la herramienta sub select la sombra de cada esfera y la eliminaremos.

3- Convertimos el grupo de objetos en una imagen en Modify + Flatten Selection y la rotamos 180 grados verticalmente (Flip Vertical).

4- Le aplicamos un efecto difuminado mediante el menú Commands + Creative + Fade Image y le bajamos la opacidad a un 40%.

5- Repetimos este proceso a cada una de las esferas.

Listo! Ahora solo resta agregar las imágenes que se insertarán en los marcos, algún texto y si deseamos, algunos detalles que le agregarán mayor realismo.

Espero que les sea útil y hasta la próxima.

Descargar los archivos de este Tutorial.


Creando gráficos Web 2.0 usando Adobe Fireworks by Bismarck Carreras is licensed under a Creative Commons Reconocimiento-No comercial 3.0 Unported License.
Based on a work at Bismarck Carreras.
Permissions beyond the scope of this license may be available at comudo.blogspot.com.

Estas preparado para ir a una entrevista como diseñador web?

Si inicias como diseñador web, es bueno que leas estos 8 pasos que pueden servirte para que tu entrevista sea diferente y satisfactoria. Estos pasos no garantizan que vas a obtener trabajo (claro está), pero te podrían ayudar ya que la entrevista a un diseñador web no es como las de otras profesiones donde te ponen a llenar formularios de 3,4,5 paginas, junto con eso un test, etc.

1. Crea tu portafolio

Una tarjeta de presentación o el proyecto de graduación de la universidad o colegio no son suficientes para salir a la calle en busca de trabajo como diseñador web…debes mostrar algo más. Si aplicas para un trabajo tan comercial como el diseño web debes demostrar que tienes conocimientos de “web comerciales” o web orientadas a negocios y no me refiero necesariamente a e-commerce. La mejor manera de ir a esa entrevista es crear un sitio web en donde aparezcan algunos ejemplos de tus trabajos. Puede ser un cd interactivo. Si no tienes muchos trabajos realizados pues la solución es imaginarte algunos clientes para entonces crear unos bocetos donde puedas mostrar cuáles son tus habilidades como diseñador web.

2. Investiga

Si vas a un sitio en busca de trabajo, lo ideal sería que investigues sobre la empresa, el estilo de trabajo de ese lugar, cuales trabajos han realizado, cuáles son sus clientes etc., eso puede ayudarte, porque puedes ver la calidad de sus trabajos, la tecnología que usan entre otras cosas por lo cual podrás deducir si tus conocimientos podrían ser útiles en ese lugar. Aunque no siempre esto será seguro, es una buena práctica.

3. Entonces prepara algunas ideas

Después de haber investigado ya tendrás información del estilo y como trabajan en esa empresa. Piensa y sugiérele cosas relevantes que ellos perciban como mejoras. Este punto es importante en especial cuando vas a una empresa en donde ellos están pocos interesados en tu creatividad y más interesados en cómo pueden sacar beneficios de esta, (abre los ojos).

4. Vístete de manera adecuada

Si, lo sé!, se como es tu estilo, y también estoy de acuerdo contigo, si eres diseñador o publicista y vas a una agencia de publicidad o un estudio de diseño a buscar empleo verán tu portafolio, no tu imagen. Pero imagina que la ocasión sea ir a una empresa diferente, donde el único de tu área serás tú, donde todos tendrán pantalón de tela y camisa hasta las mangas, de seguro te veras diferente y esa gente no nos ve de esa manera…créeme!.

No es necesario ir en camisa y pantalones de telas con unos bien lustrados zapatos, pero recordar que no vas para un concierto de rock.

5. Cuando ya estés en la entrevista

Compórtate como una persona normal, deja los nervios y cada vez que hables demuestra que sientes pasión por lo que haces. Trata de transmitir que tú eres el indicado y que puedes llevar beneficios a la empresa, a fin de cuentas ellos necesitan dinero, por eso necesitan un diseñador. Posiblemente quien te entreviste tenga conocimientos y experiencia en el área, así que no digas mentiras, siempre la verdad.

6. Cuanto voy a cobrar

Esto es complicado, pero cada quien tiene un valor, tienes que saber valorar tu trabajo y lo que sabes (eso cuesta). Lo ideal sería siempre que te hagan una propuesta y tu examines, pero si te toca decir primero cuanto estas dispuesto a recibir, pide un poco más de lo que realmente quieres, pero no demasiado. El objetivo de ellos como empresa será pagarte por algo que estés satisfecho, pero trataran de pagarte lo menos posible, no te prostituyas, mantén en mente que tu trabajo tiene un valor y exígelo.

7. Haciéndote preguntas

Es posible como mencione antes que la persona que te entreviste tenga conocimientos en diseño. También es posible que esta persona haga preguntas técnicas a las cuales tengas o no respuesta. Siempre admite cuando no sabes algo, no es ventaja decir que sabes algo cuando no es así.

8. Punto final

Y sobre todo recuerda que ser diseñador grafico y ser diseñador web “no es lo mismo”. Ser diseñador web no es conocer al maximo Photohop, Illustrator, Freehand, Dreamweaver. Recuerda que las empresas que hacen su website, lo hacen con el propósito de vender un producto, idea o servicio, así que el diseño web viene muy envuelto con lo que es usabilidad, marketing, accesibilidad, motores de búsqueda, lenguajes de programación entre otras cosas que se toman en cuenta a la hora de diseñar sitios web.

Esta la República Dominicana capacitada???

Bajando a Twitter del pedestal y específicamente hablando de como otras compañías no necesariamente las de Telecom, devén de tomar ventajas de todas las redes. Que interesante fuera que desde un minitexto poder chequear o postear los últimos 5 comentarios + 0 – sobre cualquier articulo o producto que tengas en tus manos dentro de un supermercado, librería o hasta el mercado publico. Seria como Wikipedia se encuentra con Twitter pero desde en tu dispositivo móvil mas basico. Lo importante es tener un soporte al tomar una decisión. Tal ves sea irrelevante en nuestro país pero todos los medios conducen hacia esta práctica. Bing? de la Microsoft, nuevos dispositivos móviles y el mercadeo en medios sociales en general se trata de esto, en como manejar las informaciones.

Ojalá y a la hora que uno de nuestros ciudadanos se encuentre comprando un medicamento, via sms pueda verificar si es original o no. Podrías recibir hasta información extendida ya que estamos acostumbrado ir a la farmacia y comprar algo parecido a lo que nos recetaron. Esto solo nos costaría alrededor de RD$2. Es rentable? Yo pienso que sí, la salud y la educación de nuestro país tiene que estar por encima de una quiniela. Las plataformas y las redes están hay, solo falta intención o creatividad del lado corporativo y ayudar a crear consciencia al consumidor.

Esto también crearía una base de datos paralela a la de las informaciones de los artículos, nos brindaría información del consumidor cuales pueden ser de uso a organizaciones como la ONE o hasta llegar a sustituir los visitadores medicos ya que conoces directamente el consumidor. Lo ideal para una compañía como Pfizer, Bayer, etc. seria que el consumidor constantemente consultara con su medico si puede usar x medicamento. Insisto en que la República Dominicana ha estado estancada en la transición del mercadeo masivo hacia al 1+1, era de la información.

República Dominicana intenta actualizarse!!!

Estuve buscando cuales de nuestras compañías en la República Dominicana están usando los medios sociales como facebook y twitter, que estrategias están implementando y que tanto seguimiento le dan. Sentí que aun su presencia esta un poco tímida. Pude encontrar Plaza Lama, Brugal, Anthony's y unas cuantas otras.

Al parecer las compañías pueden que se sientan un poco limitadas y a la vez desvanecen sus intentos basados en el feedback que reciben. Hasta el día de ayer Plaza Lama tenia solo 1,300 fanáticos en facebook, Brugal 5,740 pero Anthony's mas de 18,000 seguidores. Esto es obviamente un reflejo según el target de sus consumidores y que plataforma de red es que con mas frecuencia usa este consumidor.

De los últimos años dentro de las compañías mas admiradas en este país están las de telecomunicación. Esto es simplemente por que son los dueños de las redes mas amplias y usadas por los dominicanos. Años atrás cuando el mercadeo masivo dominaba los medios, la ex-compañía Baninter gozaba del privilegio de ser dueños de casi todos los medios de publicidad, lo cual les permitía escalar imparablemente. Si logramos implementar nuevas maneras de usar los medios de telecomunicaciones estaríamos expuestos a una audiencia mucho mas amplia, tal vez llegar hasta tío Raúl quien juega domino en la esquina y su único medio de comunicación es un teléfono básico y prepago. Creo que la compañía Viva hace el intento con su nueva campaña "actualízate por solo un peso", Viva TuTwit y 323 MESSENGER. Esto por lo menos educa al consumidor y le abre camino a los agregadores a implementar nuevas campañas.

Adobe Flash en el iPhone

Adobe Flash antes conocido como Macromedia Flash ha sido un método o herramienta de mucho uso a la hora de crear websites más interactivos, pero con el avance de las tecnologías han surgido otras alternativas.

En la actualidad es muy usual navegar sitios web desde teléfonos móviles, pero existe el problema de que los teléfonos móviles tales como iphone, Blalckberry entre otros, aun no permiten visualizar contenido flash en sus aparatos.

Por esa razón, Adobe ha decidido entrar al mercado con su nuevo “Adobe Creative Suite” que incluirá el “Packager for iphone” que permitirá a los desarrolladores en flash acceder al iphone.

Fuente: Adobe

Celulares y dispositivos móviles: tiempo de pensar en las mujeres, en los chicos y en los jubilados

(www.neomundo.com.ar)- Los fabricantes de teléfonos celulares tendrán que empezar a personalizar sus productos si quieren llamar la atención de nuevos grupos demográficos (llámense mujeres y jóvenes nacidos dentro de la cultura de la comunicación permanente), aseguran los analistas de mercado.

Y es que según la consultora Gartner, hacia el 2018 el mundo ya estará lleno de jóvenes y mujeres que no demandarán en su trabajo productos pensados exclusivamente para el ámbito empresarial, sino también para el consumidor masivo. Ellos querrán usar en su puesto de trabajo los mismos dispositivos o servicios que los empleados en su casa.

El 68% de la población mundial son mujeres y niños que se pueden beneficiar de las ventajas de la tecnología móvil. Sin embargo, y cómo ocurre en otros muchos campos, los dispositivos móviles están pensados por y para los hombres.

Los vendedores de telefonía móvil tendrán que afrontar el cambio demográfico que están sufriendo las empresas y personalizar sus productos para dar cabida a ese otro 68%.

Hoy día, el perfil más in mente es el del usuario del teléfono móvil es un adulto occidental con una edad comprendida entre los 20 y 64 años. Este perfil representa curiosamente sólo al 32% de la población mundial. Si se extrapola ese dato al ámbito empresarial ocurre exactamente lo mismo.

Sin embargo, la realidad de las empresas está cambiando, al ritmo en que varía también el tipo de mano de obra: cada vez más mujeres y grupos étnicos se están incorporando a los puestos laborales y, por supuesto, usan dispositivos móviles para realizar su trabajo.

Los productos móviles tendrán que afrontar la diversidad de género y demográfica, haciendo evolucionar y diferenciando los dispositivos a través de una mayor variedad, explica Mónica Basso, vicepresidenta de investigación de Gartner.

. Esta tendencia, junto a la progresiva consumerization de las tecnologías de la información (término inglés que describe el proceso por el cual el usuario está demandando utilizar en su entorno de trabajo las mismas herramientas que emplea en su esfera personal: móvil, mensajería instantánea, blogs, telefonía IP, comunidades o redes sociales) y la evolución del mercado laboral hacia los jóvenes y las mujeres, obligará a las empresas a repensar la estructura y lo procesos de su trabajo.

En el transcurso de simposium, los analistas de Gartner han discutido tres tendencias demográficas y de género que, a su parecer, influirán en la adopción de la tecnología móvil de aquí a 2018 en las empresas.

En primer lugar, las empresas irán dando paso a los baby boomers, en detrimento de los trabajadores que están a las puertas de la jubilación. Este hecho hará que las organizaciones tengan que idear planes de carrera más diversificados.

Con esto en mente, las empresas deberán ir desarrollando programas para empleados en diferentes estadios de su carrera profesional o en función de sus edades.

A esto se sumarán los hechos de que la diversidad étnica y de género aumentará en paralelo a la mano de obra inmigrante, multiplicando, además, la actividad con países emergentes y la presencia de mujeres.

Por otro lado, los nativos digitales (nuevas generaciones nacidas totalmente en la era digital) aportarán a las empresas nuevas culturas, preferencias y capacidades.

Su poder dentro de las organizaciones crecerá porque poseen más conocimientos tecnológicos, mayor familiaridad con las redes sociales y con los teléfonos inteligentes, así como con productos de consumo y modelos de negocio más innovadores. Además, su capacidad para recopilar información también es mayor.

Una nueva mezcla de usuarios jóvenes reemplazará el perfil menos variado de aquellos que se jubilan. Serán las empresas que mejor entiendan la diversidad de los requerimientos y las expectativas (de estos nuevos usuarios) las que consigan mejores niveles de satisfacción y productividad para sus clientes, comenta Basso.

El impacto de la consumerization será más visible debido a la presencia en las empresas de nativos digitales y mujeres. Estos nuevos usuarios van a demandar más opciones en los dispositivos, y preferirán aplicaciones y servicios más dirigidos al usuario normal que específicamente a las empresas.

Los analistas de Gartner aseguran que en 2015, la gente personalizará el 90% de la información, las herramientas y los recursos educativos y tecnológicos que usará en el trabajo o en casa.

La personalización es la clave para captar la atención de las expectativas de los diferentes tipos de usuarios. Esas expectativas pueden ser colmadas en el software de un móvil, en los servicios o en los accesorios.

Pese a que hay cientos de dispositivos móviles y modelos disponibles en el mercado, lo cierto es que la personalización es muy limitada hoy en día. Ésta tiene más que ver con lo estético, lo cosmético (cubiertas con colores y materiales llamativos, temas y tonos de llamada) o con los accesorios, comenta Basso.

La personalización, sin embargo, está olvidando aspectos esenciales, como es la funcionalidad y la forma. Ambos factores son asignados, dice Gartner, rígidamente a los dispositivos dependiendo del mercado a los que van dirigidos. Eventualmente -puntualiza Basso- la forma y la función de los dispositivos móviles serán reinventados.

Fuente: Yahoo Noticias

Empezar a Usar CSS - Cuarta Parte

En la Tercera Parte de esta serie de artículos “Empezar a Usar CSS” pudimos a entender, cuándo y porqué utilizar cada uno de los selectores según nos convenga.

En este Post conoceremos las reglas para declarar y escribir las hojas de estilos, cuándo es conveniente tenerlas dentro de la misma pagina HTML o llamarlas e importarlas desde un enlace.

Declarar las hojas de estilos dependerá del sitio desde donde queremos incluirlas, atendiendo a esto tendremos 3 formas diferentes de hacerlo:

1-En la misma pagina HTML.
La hoja de estilo se declara dentro de la misma pagina HTML incluida en el TAG HEAD. Para eso utilizaremos el elemento CSS STYLE.

2-Dentro del mismo elemento o TAG HTML que se de desea estilizar.
Se conoce como estilos “in line” o en línea. Le aplica estilos solo a ese elemento, no es recomendable su uso ya que no es reutilizable y si se usa de forma repetida en una pagina HTML contribuye a que su peso sea mayor en KBs, además de que en caso de corregir o realizar cambios en dichos estilos es mas complicado. Es recomendable solo en casos completamente necesarios.

3-Importado o llamado desde un archivo CSS externo.
La hoja de estilos es un archivo .css completamente independiente, es la forma mas recomendada. Con esto se cumple 100% la regla de separar la estructura HTML, el contenido de la apariencia del sitio.
El uso de este tipo de hoja de estilos es mas dinámico ya que en caso de que queramos cambiar la apariencia de un sitio solo modificamos este archivo .css sin necesidad de tocar la estructura HTML.

En un próximo Post veremos cómo crear los contenedores principales (head, main body, footer) de un sitio web conociendo los estilos de posición, sitios elásticos o estáticos y sus trucos para lograr el efecto deseado, también como evitar algunos dolores de cabeza que suceden a todo quien se inicia en el mundo de las hojas de estilos CSS.

Hasta la próxima.