He trabajado en algunos proyectos de diseño web, tanto locales como para personas que viven lejísimos de mí, esa es una de las ventajas de este tipo de trabajo -diseñador freelance o como dicen algunos, diseñador desempleado ¡ja!-.

Quisiera hablarles de todos los proyectos pero prefiero enfocar una entrada para un proyecto para no hacerme bolas.

Usuario Compulsivo es un blog de novedades y demás hierbas, pertenece a Carlos, para quien he elaborado una serie de diseños anteriormente. El blog trabaja sobre WordPress, sistema para el cual yo maqueté y diseñé un theme, personalizado para los blogs de Carlos específicamente (es por eso que varios diseños en mi portafolio se parecen, son para el mismo cliente quien los pide con la misma estructura para que exista uniformidad entre todos sus blogs).

Quise hablar de Usuario Compulsivo para mostrarles el logotipo, que a mí me gustó bastante como quedó:

El título primero lo trabajé en Illustrator para hacer el efecto 3D luego fue retocado en Photoshop.

El icono del usuario lo hice en Photoshop, tiene alrededor de 10 capas de luces y sombras, acá una vista un poco más grande:

Esto de hacer la ilustración del icono del usuario me gustó mucho, y es de lo más importante, quise hacerlo así porque es muy común ver por ahí que hacen un logotipo para alguna web y lo primero que buscan es descargarse iconos existentes y pegárselos al logo… Por favor amigo diseñador, si vendes diseño entonces diseña.

Espero que unos meses o años después pueda regresar yo a ver este mismísmo post y comparar mis diseños de entonces con los de ahora, y pueda ver mejoría… y tenga fama y dinero y mujeres.

No soy experta en nada, pero quiero aprender de todo :)

~*~

PD. Ójala y no se aburran de este tipo de entradas, que parecen un poco spammeras, pero aclaro, esto NO es un post patrocinado, es más bien una forma descarada de auto-marketing y presunción.

Pues por fin lo hice, se llama Chak Theme (chak es rojo, en maya, sí, se me dificultó ponerle nombre ¡ja!), y lo puedes descargar desde Oh! Gráfico para usarlo en tu blog de WordPress con hosting propio (no se puede en wordpress.com, esque luego preguntan).

Más vale tarde que nunca ¿no?

PD. Sí, es gratis.

La idea de esta iniciativa para bloggers latinos es la de armar un espacio donde todos podamos crear nuestros diseños y participar, siendo o no diseñadores, siendo o no buenos en lo que hacemos. ¿Es un concurso? Sí. Con una modalidad un poco distinta a la que pueden ver en todos los concursos que se lanzan a diario. Esta vez no se necesita postear nada en sus blogs, sino simplemente anotarse y respetar las fechas establecidas.

Incluso el método para elegir al ganador es diferente: ni una sola cabeza elige, ni lo dejamos a manos del azar. En esta ocasión, la elección del ganador estará a cargo de un grupo de 5 bloggers que se destacan por su calidad en el diseño. Personas que, siendo de distintos países, son conocidos por todos los que frecuentamos la blogósfera de Latinoamérica: Kozmica, Marcos Mora, Publistyle, Darío Pineda y Gonzalo Castillo.

Pero… hay un invitado especial que se sumará a ese grupo de 5 y que dejará su opinión para elegir al mejor. Se trata de Nick Pagano, diseñador y blogger de Think Design Blog, y único administrador de ThinkFour diseño gráfico.

BASES Y CONDICIONES

Con el jurado armado, la dinámica es muy simple: cada blogger deberá diseñar su propio Wallpaper, a partir de una frase que se va a proponer el día del lanzamiento en cada lugar de recepción (enlaces más adelante). Tienen un límite de una semana para ir armando sus trabajos, con la posibilidad de presentar 2 como máximo. El estilo que quieran darle es totalmente libre, siempre y cuando se mantenga la frase que se propone.

El jurado elegirá al ganador valiéndose de una serie de características: innovación del diseño, capacidad para incluir la frase, creatividad, entre otras cuestiones.

¿Qué gana el autor del mejor Wallpaper? Además de mis felicitaciones, una suma de 50 dólares entregados vía Paypal + un año de hosting pago y, si lo amerita, un theme para WordPress inédito.

¿Solamente gana el primero? En realidad no. El segundo mejor wallpaper se ganará 1 dominio gratuito por 2 años + 6 meses de hosting pago. Por más que no haya dinero para los demás, con los mejores trabajos que recibamos haremos un pack de Wallpapers para inspiración que será distribuido en más de 20 blogs de diseño e Internet. Cada trabajo estará acompañado por el nombre de su creador y su sitio.

Como leyeron antes, la idea es moverse y animarse, más allá del premio, a abrir el Photoshop, Illustrator, Paint o el programa que sea. La dinámica es más que simple: uno organiza, el jurado elige, ustedes diseñan y todos nos divertimos. En líneas generales, éstas son las bases y condiciones de la iniciativa:

- Del 11 al 13 de Junio para anotarse. Los lugares de recepción son los siguientes:

• FotoBeta
• ForoBloggers
• Conexión Blogger

- Del 14 al 15 de Junio se envían los trabajos a iniciativadb@gmail.com con nombre y blog del participante;

- El día Miércoles 17 de Junio el jurado se pronuncia y elige al ganador;

- Una semana más tarde se lanza el pack con los Wallpapers, donde aparecerán los trabajos más destacados con nombre y blog del creador.

Espero que se anoten en esta iniciativa y en las que seguramente vendrán si esta tiene el éxito que todos esperamos. Por último tengo que recordarles que D+B se lleva a cabo gracias al apoyo de todos los bloggers que accedieron a extender la noticia y, particularmente, al auspicio de 3 empresas de Alojamiento Web que decidieron dar una mano con el premio: DataWeb Hosting, SaniHosting y Net Services Argentina.

~

Pues bien, eso es todo, no tienes nada que perder y mucho que ganar desde los premios ya mencionados hasta la gloria, ¡espero ver sus participaciones por ahí!

¿Se acuerdan de que anduve un tiempo de decidiosa a ver si abria un nuevo blog o no? Pues ¡sopatelas! que ya hasta esá online y todo.

Se llama oh! gráfico y pues básicamente engloba temáticas del diseño gráfico, carrera que estoy estudiando y para no mezclar peras con manzanas pues decidí abrir ese blog y así queda todo organizadito.

Sí es cierto que hace rato no posteaba algo en este blog pero andaba dejando listo aquel, ahora ya parece estar todo en calma y tengo tiempo pa’ los dos, no se preocupe asté, que no voy a abandonar este por nada del mundo -o eso digo, muajaja-.

Así que en resumen este post es una invitación para que pasen a verlo y si quieren pues me dejan un comentario felicitándome por lo bonito que me quedó.

Orita está chiquitito recién nacido, es mi nuevo bebé, ¿qué regalo le traes al bebé?

Eh, no, el refrán original va así “el que mucho abarca poco aprieta”.

Y como se han de imaginar pues se refiere a que el individuo que abarca mucho pues no aprieta tanto. Duh.

Basta ya de tonterías… A lo que voy.

Hace pocos días, me llegó una ideototota a la cabeza. Así de golpe. Mientras platicaba con Briones por el msn, de como él hizo su blog empezando con la idea de tener notas y apuntes útiles a la mano para él y para compartirlos. Y luego pensé “¡oh!, estaría chido hacer eso de lo que yo sé”.

Y yo sé muchas cosas, pero a lo que me refería es a lo de Diseño Gráfico. Para los que no lo sepan, estoy estudiando eso en la universidad y aunque no soy profesional aún pues me gusta mucho, es una de mis pasiones, eso me lleva a investigar, buscar cosas útiles y aprender muchas cosas nuevas.

Entonces pensé:

“Oh, cielos, yo podría compartir mis conocimientos y hallazgos sobre el diseño gráfico con toooodo el mundo en un blog sólo de ese tema, y haría tutoriales y análisis y recomendaciones y un montón de cosas fantásticas… Pero me tendría que preocupar por hosting para ese blog, porque estaría bueno hacerlo en wordpress, y un dominio, y mantenerlo actualizado… Y si publico todas esas cosas fantásticas de diseño gráfico en este blog, pero no estaría muy lleno de todo o aaaay ay… me duele la cabeza…”

Como muchos ya sabrán soy una indecisa de primera, y a veces me mata tener que elegir entre 2 cosas y duro una eternidad decidiendo.

Así que tomé una decisión -¡oh!- preguntarles a ustedes mis fieles lectores -o infieles, eso no lo sé- ¿qué es lo que mejor les parece?

Opción 1:
Publicar todo ese contenido de diseño gráfico en este mismo blog, junto con todo lo demás que ya publico aquí, total, si ya hablo de blogging y tengo una pequeña categoría de diseño, es más hasta hice un tutorial para vectorizar ¡qué más da! Sólo es cuestión de seguir añadiendo contenido a este blog, y habrá más variedad, aprovechando que con este ya tengo tiempito y ya tiene sus lectores. Esta opción tiene la característica de ser más cómoda, puesto que no hago nada más que seguir publicando entre los muchos temas de los que hablo.

Opción 2:
Armar un blog nuevo, desde pensar en un buen nombre, comprar el dominio, conseguir hosting, crear toda la imagen (header,logos, theme), y todo eso para un espacio dedicado solamente al diseño gráfico. Nada de mis otras notas raras ahí, todo limpio. Esta opción es la menos cómoda, porque me tendría que poner las pilas para hacer todo eso, y además después tener la dedicación para mantener los 2 blogs bien actualizaditos y no dejarlo abandonado como implica el refrán.

Si de verdad te leíste todo eso, pues ya nada te cuesta dejar una opinión…

:D

Me puse a comparar los formatos de imagen, sin mucho tecnisismo. No soy experta pero en mis andares de diseñadora ya he sabido cuales formatos sirven mejor y en qué casos son más recomendados, esta vez hablaré sólo de 4, el BMP, JPEG, PNG y GIF.

BMP (Bits Maps Protocole)

Es de los más pesados, nada recomendado para usar en tu sitio web o blog, es mejor usar otro tipo de archivo que pese menos. El único punto a favor que le veo es que es muy nítido y claro, no se distorsiona la imagen cuando la guardas en este tipo de archivo. Pero a decir verdad yo raramente -casi nunca- lo uso.

JPEG (Joint Photographic Experts Group)

Es el formato de imagen más difundido, la mayoría de las imágenes que encuentras en internet están en este formato. Está bien cuando quieres que no pese mucho la imagen (hablando de kilobytes) para descarga y mostarlas en tu sitio pero también se degrada la calidad, se pierde nitidez. Así que hay que usarlo con cuidado, estando consciente de que algunos detalles se verán un poquito borrosos. Cuando quieres apreciar los detalles es mejor usar el PNG.

PNG (Portable Network Graphics)

Como ya antes lo había dicho es mi formato favorito. Es relativamente ligero y, lo que me encanta, es que no pierde nitidez, queda clarito, como un BMP pero sin ocupar tantos kilobytes. Yo lo uso casi siempre para guardar mis diseños en imagen, es más, la cabecera de mi blog y otros detalles similares los guardo en este formato. Otra cualidad del PNG es la transparencia, es decir -sabiéndolo manejar- podemos dejar un fondo invisible, para que se acople con el fondo general de lo que estemos diseñando, o el fondo de nuestro blog o web. Lo malo es que el Internet Explorer no lee esa transparencia, y es el navegador web más usado, por eso en caso de necesitar el efecto de fondo invisible en una imagen es mejor el GIF.

GIF (Compuserve GIF)

Es un formato muy ligero, y lo mejor es que la transaprencia usada en este tipo de archivo lo leen todos los navegadores. Otro punto a favor es que con el GIF se pueden hacer una secuencia de imagenes (lo que muchos conocen como GIFs animados), por ejemplo, la mayoría de los emotíconos (smilies) del messenger que usan animación estan en este formato.

Cada quién usa el formato que más le convenga, pero que quede claro que hay un montonal más de formatos de imagen, aunque creo que los que acabo de describir son los más usados.

Como lo prometido es deuda, este es un tutorial para ustedes -que mucho me han pedido, pa’ que vean que si los escucho- para vectorizar imágenes. Trataré de hacerlo simple, como si nunca hubieras agarrado el Illustrator.

Yo estoy usando el Illustrator CS en inglés (ya hay nuevas versiones pero creo que de todos modos aplica este tutorialito).

Bien, supongamos que quieres vectorizar una foto de una chica bien sensual, y dá la casualidad que yo tengo una foto mía, que es lo mismo, así que en eso nos vamos a basar. No tiene que ser una super foto clarísima, lo importante es que tú puedas apreciar los rasgos para vectorizar. La que yo usé incluso esta toda pixeleada.

Primero, abres un nuevo documento en Ilustrator, yo siempre lo abro en default que creo es una hoja tamaño carta, en fin, el tamaño a tus necesidades. Copias y pegas la imagen que quieres agregar o desde el menú File y en Place, con eso podrás examinar hasta poner tu foto en el área de trabajo.

Bien, ya tienes tu foto puesta, ahora lo mejor es que en donde administras las capas (Layers) bloquees esa capa para que de ahí no se te mueva y no rayes en ella.

Luego para empezar a vectorizar haces una nueva capa.

Tener la capa de la foto original bajo las otras es lo más práctico.

Ahora lo bueno, a vectorizar.

Ya teniendo seleccionada la capa nueva comenzamos a vectorizar, puedes empezar por donde quieras. Yo empezaré por el cabello.

Seleccionas la herramienta pluma (pen) y comienzas a dibujar las áreas con los tonos más claros, como los brillos. La pluma funciona como “uniendo puntos”, luego de que los unas todos usas el gotero (eyedroper) y con el seleccionas un color de la foto para que el vector seleccionado se rellene de ese color. Eso te servirá para conservar colores originales.

Luego ya teniendo dibujados todos los tonos claros, nos vamos a un segundo tono, más oscuro.

Y los dibujamos justo encima de los claros, solo que al terminar cada vector presionas Ctrl + [ eso hará que el vector más oscuro se vaya atrás de el claro. Si no te funciona esa combinación de teclas haces click con el botón derecho sobre el objeto y le pones Arrange y Send to Back. Así ira quedando cada tono más oscuro atrás de los que ya dibujaste.

Y así te vas, vector por vector, y agregando más niveles tonales, cada vez un color más oscuro. Entre más tonos más trabajo, pero se verá genial.

Yo le dí al cabello 7 tonos y así queda:

NOTA: Puedes crear tantas capas como desees para separar tus vectores, yo prefiero agrupar por zonas, para no tener muchisimas capas. Uso por ejemplo una para el cabello, otra para la piel, otra para la cara (ojos, nariz, boca), pero cada quién hace las capas que quiera.

Terminamos con el cabello y creamos otra capa nueva, en esta haremos la piel de la cara. Quitamos la opcion de ver la capa del cabello para que no nos estorbe. Y cubrimos toda la zona de piel de la cara con un solo elemento, pasándonos un poquito por encima del cabello para que no queden huecos entre las 2 capas.

Creamos otra capa más para hacer los ojos, las cejas, la boca y detallar la oreja. Mientras trabajas en una capa puedes, y recomiendo, hacer invisibles a las demás para ver la foto en el fondo y seguir usándola como guía. Puedes también, al terminar cada capa quitar la visibilidad de la foto para ver como va quedando todo.

No olvides ordenar las capas como deberían de ir para que se vean bien, arriba de todas el cabello, luego las facciones, y al último la zona de la cara. Para mover las capas solo las seleccionas con el botón izquierdo del mouse y las arrastras más arriba o abajo, según lo quieras.

Hasta ahora, con ojos y todo, llevaríamos algo así:

¡Ya está casi terminado!

Ahora vamos a agregar más capas, pero esta vez atrás de las que ya tenemos, para el cuello y agregaremos unas sombras para detrás de la oreja y bajo el mentón. Y para rematar y dar contraste un enorme cuadro negro bajo todas las capas (con el rectangle tool).

Y aquí tenemos el resultado:

NOTAS Y TIPS:

• Cuando algo no te convenza hazlo de nuevo.
• Para los que ya más o menos le saben pueden utilizar también la herramienta Warp, para transformar elementos.
• Si no te gusta algo en la foto puedes darle forma tú mismo a algo completamente diferente (como yo lo hice en el mechón de cabello que sale por el cuello, los labios, quitar arrugas, papada, etcétera, etcétera…).

Ahora sí, lo pidió el pueblo y se los traje, un tutorial para vectorizar en Illustrator, como yo sé que no soy perfecta (aunque me falte poquito), habrán quedado dudas sin resolver. Aquí mismo me preguntan y veré que puedo hacer por ustedes.

Recuerden que no se nace sabiendo, así que paciencia, mucha paciencia.

¡A vectorizar!

No se si se hayan fijado pero de hace tiempo que en todos lados ponen logotipos con efecto brillosito (glossy en inglés). Hay también montones de sitios para hacerte botones glossy gratuitos. Y tutoriales también.

Digo yo que es una moda.

O sea es lo “in”.

En ese caso mi logo y mi header estan pero requete chafas… no me contesten.

No sé, no quiero ser de ese tipo de gente a la que le disgusta lo que le gusta a la mayoría pero ya hay suficientes logos de ese estilo ¿no?, se supone que el logo de tu web o blog debe ser original.

La verdad me tienen un poco aburrida esa clase de logos.

¡Abajo la glossymanía!

Puedes descargarlos desde aquí en una carpeta ZIP y usar el que te guste, son libres y cualquiera puede usarlos. Aunque no es obligatorio ponerme un enlace, los links de agradecimiento y menciones son bienvenidos.

:)

Link de descarga / Descárgate el paquetito completo de íconos.

Acrobat Reader: Un maromero al que le gusta leer mucho.
Aerografía: Rama del diseño gráfico, especializada en la rotulación de aviones.
Advertising: Amenazar a un diseñador para que no cante en el área de trabajo.
Adobe: Casa productora de software que es fría en verano y cálida en invierno.
Ai: expresión de dolor de un diseñador herido
Aliasing: Ponerse apodos entre los diseñadores.
Background: Patio trasero de la casa de un diseñador
Bold: Detergente utilizado por los diseñadores.
Brush: acción de sonrojarse cuando te chulean un diseño
Caja de X: La caja de un tipo desconocido.
Churriguerezco: Diseño gráfico obtenido despues de echarse un churro.
Clipart: Acción de crear figuritas con clips.
Convertir a curvas: Estado de las diseñadoras cuando asisten mucho al gimnasio
Crop: diseño que es basura!
Diapositiva: Un día perfecto para Diseñar.
Dreamweaver: Diseñador poco productivo y somnoliento.
Estilógrafo: Diseñador gráfico de muy buen vestir.
Flash: Super héroe de la multimedia.
Fotografía digital: Acción errónea de poner el dedo en el lente de la cámara.
GIF: Imagen que se regala.
GIF animado: Imagen que se regala generalmente con escenas felices.
Godete: Expresión que usan los diseñadores gangosos cuando estan molestos.
Illustrator: Primo de Terminator y al que le gusta mucho dibujar.
Justificar: Acción de un diseñador de poner pretextos o explicaciones a una cagazón.
Layer: Nombre dado a aquel diseñador que suele decir muchas mentiras.
Pantone: Shampoo suave en gran variedad de colores.
Plotter: Apellido del mago de las impresiones en gran formato.
Quark Express: Graznido veloz.
Quick Mask: Acción de las diseñadoras de maquillarse a gran velocidad.
Saturación: Sucede cuando un diseñador tiene demasiado trabajo y poco tiempo
Screen: Película de terror preferida de algunos diseñadores.
Señalética: Señal de moral cuestionable.
Separación de color: Diseño gráfico con tendencias racistas.
Shape: dícese del manazo que se da a un diseñador en la nuca para que despierte o entienda algo
Shortcut: Pequeña cortada, que generalmente viene precedida de un bleeding.
Sprite: Rico refresco favorito entre muchos animadores.
Tipómetro: Diseñador desconocido de pequeña estatura.
Tipo móvil: Diseñador desconocido al que se le puede colocar en cualquier sitio.
Trade: acción de llegar después de la hora de entrada
Versalitas: Acto de mirar salas pequeñas.
Web: Estado de cansancio de un diseñador gráfico.
Webmaster: El más flojo de los diseñadores.
Zoom: sonido que produce un diseñador muy rápido.

Aún sigue, pero yo extraje los que más me gustaron, acá esta el diccionario original.