miércoles, 28 de agosto de 2013

Como crear logotipos y logos

Este post está hecho para todo aquel que quiere aprender a crear logotipos, logos para empresas o para productos, incluso para personas que quieren un “logo gratis”. Sin embargo hay que tener en cuenta que para hacer un logotipo profesional necesitamos capacitarnos y trabajar arduamente para tener la experiencia que nos permita crear una marca solida, que cree nexos con nuestro consumidor y así mismo que facilite nuestras ventas.

Pero bueno, aquí va nuestro tutorial para crear logotipos:

Primero que todo definamos logotipo: Un logotipo es un identificador gráfico que representa distintos aspectos de una empresa, producto o servicio (Logos (en griego λóγος -lôgos- ) significa: la palabra en cuanto meditada, reflexionada o razonada, es decir: "razonamiento", "argumentación", "habla" o "discurso".) y tipos del latín typus que significa modelo, carácter grabado) . De esta forma lo primero que tenemos que hacer es identificar los conceptos queremos comunicar.

Los conceptos pueden ser abstractos como por ejemplo: Seriedad, solidez, bienestar, jovialidad, elegancia, pureza etc. o también pueden ser concretos: Casa, balón, televisor, zapatos.

Ya identificados los conceptos que queremos comunicar, pasamos a identificar nuestro grupo objetivo (nuestros clientes potenciales), ya que todo esfuerzo publicitario va ir dirigido a este. Aquí una guía básica de cómo hacerlo (http://www.ehowenespanol.com/definir-publico-objetivo-como_112736/). Ahora que hemos definido a quien le vamos a vender es necesario filtrar nuestra lista de conceptos, de esta manera ya tenemos una guía para empezar a diseñar.

En un papel vamos a dibujar los conceptos que tenemos, por ejemplo: Bienestar. Piense en que figura representa el bienestar y trate de fusionarlo con la misión de su empresa o las funciones de su producto. Estas fusiones pueden ser mediante colores, formas y jerarquías (tamaños).

Ahora que ya tenemos distintos bocetos de la imagen de nuestro negocio, procedemos a digitalizar nuestros bocetos. Primero los scaneamos y los redibujamos en un programa vectorial, yo recomiendo Adobe Illustrator , esto es muy importante ya que si lo hacemos en un programa de mapa de bits el logo no nos va a servir para las distintas aplicaciones que le queramos dar.

Después de tener vectorizados nuestros bocetos podemos añadir efectos de luz y sombras para ganar mayor impacto, obviamente si nuestra marca lo permite.

Estos son un par de ejemplos de lo que se pretende conseguir:






Recuerde que los individuos no compramos productos y servicios, compramos marcas. Si necesita apoyo profesional en el desarrollo de su marca (diseño de logos, carpetas, brochures, web, multimedia, etc). Contáctenos > La P publicitaria

viernes, 23 de noviembre de 2012

Efecto repujado sencillo en photoshop

En esta ocasión quiero mostrarles un truco para hacer un repujado sencillo en photoshop.
Este efecto es muy usado en el diseño web.

Creamos una nueva capa de relleno:

Click en Color uniforme:


Usamos un color, en este caso gris (#dfdfdf para el fondo y #d5d5d5 para el objeto)

En este caso voy a hacer un texto, pero funciona con también con las formas. En el momento que tenemos nuestro texto, vamos a la capa y hacemos el efecto de sombra paralela:


Usamos estos valores:


Para mi ejemplo he agregado una sombra interior para el logosímbolo de la P Publicitaria.






lunes, 5 de diciembre de 2011

Como hacer lluvia en una foto con photoshop

Para hacer lluvia en una foto vamos a seleccionar una imagen y la vamos a poner en nuestro photoshop. Para esto la arrastramos desde nuestra carpeta hasta el programa o le damos  archivo > colocar..Al colocar la imagen vamos a tener que darle ctrol + j para duplicar la capa y sobre la capa le ponemos Rasterizar capa para poder aplicarle efectos.


Damos click en nueva capa:



Seleccionamos el tarrito de pintura:


Señalamos el color de frente negro y el fondo blanco:

Damos click en el lienzo para pintar de negro:


Filtro> ruido > añadir ruido y le ponemos los siguientes valores:






Filtro>desenfocar > desenfoque de movimiento y ponemos los siguientes valores:






En los estilos de capa vamos a poner “trama”:




Con esto ya tenemos nuestra lluvia, si queremos hacer las gotas un poco más visibles o grandes, podemos presionar: ctrl+t y agrandar la capa.

Si tenemos mucha luz nos vamos a la capa en donde está nuestro paisaje o foto y presionamos ctrl+j para duplicar nuevamente la capa, luego ctrl+shift+U (para convertir en blanco y negro una imagen en photoshop) y en modo de capa, en donde pusimos la trama, esta vez ponemos luz suave. Si aún está muy soleada, vamos a nuestra capa base (la del paisaje en color) y presionamos ctrol+m y ahí jugamos con la línea para poner menos luz. Si aún se ve muy colorido podemos modificar el color mediante ctrl+u desde nuestra capa base.


jueves, 24 de noviembre de 2011

Como convertir un html a PDF

Hola, despues de tanto tiempo sin publicar, quiero compartir con ustedes algo muy util, convertir un html y css a un PDF.

Sencillo, vamos a entrar a esta página:
http://www.htm2pdf.co.uk/

Allí ingresamos la dirección de nuestro sitio y posteriormente le damos "convert"




Esperamos y le damos "Download PDF". De esta forma vamos ver como queda y lo guardamos.
Me parece tan buena esta herramienta online que recomiendo que le gasten una cervecita a su creador:

Donate

If you like this service you might like to buy me a beer





miércoles, 27 de abril de 2011

Como hacer una caricatura en photoshop cs2 cs3 cs4 cs5

Hola, después de un buen rato de no poder escribir debido al increíble volumen de trabajo que he tenido, vuelvo con un nuevo tutorial para te enseñará a hacer una caricatura partiendo de una fotografía.
Como es de esperarse lo primero que vamos a hacer es importar la fotografía, en este caso yo he buscado la foto en mis archivos y la he arrastrado hasta el photoshop previamente abierto.
Cuando tengamos nuestra foto en el programa pulsamos ctrl+”j” para sacar una copia de nuestra capa actual. Este paso es importante para tener nuestra capa original intacta y poder volver a ella cuando queramos.
Como sabemos, las caricaturas son representaciones gráficas de una  persona o una situación, utilizando una como figura retórica la hipérbole (exageración), entonces lo que vamos a hacer es exagerar los rasgos de la persona.  De esta forma vamos a filtros>licuar…





En este panel vamos a hacer todo. Con 3 herramientas “deformar hacia adelante”, desinflar e inflar
Herramienta deformar hacia adelante (la del dedito).  Esta herramienta permite desplazar los pixeles.
Inflar y desinflar, como lo indica su nombre expande hacia afuera y hacia adentro los pixeles.




Ahora solo es cuestión de usar las herramientas de una manera creativa y listo.





En mi caso le he agrandado le he estirado la oreja, la boca y los ojos. Adicionalmente he puesto saturado el color para darle un poco más de vida a la foto (ctrl+”u”) y nada más.
Si te gustó enlázanos o da click en donde no te puedo decir jejeje

lunes, 3 de enero de 2011

Como hacer emoticones en photoshop

Hoy quiero enseñarles como hacer emoticones para el Messenger desde el photoshop cs5, obviamente sirve para versiones anteriores como cs4 y cs3.

Para comenzar quiero hacer una breve introducción al concepto de animación, ya que esto nos servirá para entender distintos programas como flash o after effects.

Hay que decir que un emoticon es un gif animado. Entendiendo la animación como una secuencia de imágenes que puestas en secuencia generan una precepción de movimiento en nuestra mente. De esta forma para hacer una animación es necesario tener mínimo 2 fotogramas (imágenes) para crear la ilusión de movimiento.


Aunque tenemos 2 formas de hacer las animaciones, yo opto por usar la línea del tiempo y no el cuadro por cuadro, ya que desde aquí podemos usar una interpolación de movimiento (interpolación: el programa automatiza las animaciones, de esta forma ponemos un fotograma de inicio y otro de final, haciendo que nuestro ordenador genere automáticamente las imágenes entre uno y el otro).

Los emoticones son algo muy básico pero aprendiendo a usar esto podrás empezar a animar cosas en el after effects.

Ahora si vamos con nuestro emoticones:
Creamos una nuevo documento de 50x50 px con el fondo que queramos (transparente, blanco, negro o del color que queramos):


Buscamos dentro de nuestros documentos la imagen que queremos usar y la arrastramos hasta nuestro photoshop y soltamos en nuestro lienzo. Cuando hacemos esto en versiones anteriores nos suele poner el tamaño total de la imagen, así que lo que tenemos que hacer es presionar ctrl + t y luego ctrl + 0 (cero) lo cual nos permitirá escalar la imagen:



Para los que usamos cs5 es necesario presionar click derecho y poner “rasterizar capa”
Ahora presionamos ctrl + j para duplicar la imagen y vamos a hacer una por una las modificaciones a nuestro personaje o foto.

Yo le he dado filtro > licuar y le he puesto la herramienta del dedo (deformar hacia adelante) para cerrarle los ojos y hacerle una sonrisa al gato:








Voy a arrastrar la capa fondo hacia la basura:

Ahora voy a ventana>Animación . Lo cual va hacer que nos salga una línea de tiempo en la parte inferior en donde vamos a tener una por cada capa.

Vamos a tomar nuestra primera línea del tiempo y la vamos a hacer más corta, tomandola desde el final y arrastrándola hasta el comienzo (buscamos que nos salgan las flechitas <->):



(notese que nos aparece un fondo ajedrezado, si no te sale es porque tienes habilitado el ojo en la capa, el cual hace que se oculte nuestra capa)
Ahora vamos con nuestra segunda capa, en donde vamos a hacer lo contrario, vamos a recortar la línea del tiempo en sentido contrario (desde el comienzo hasta que se acabe la línea del tiempo de la primera capa <->)


En este momento si movemos la cabeza lectora vemos como cambia nuestra imagen, pero vamos a hacerle algo más para ver cómo funciona la interpolación de movimiento en photoshop y en AE (after Effects)

Vamos a la línea del tiempo más larga y nos hacemos donde comienza, presionamos la flechita para que nos muestre las opciones y pulsamos el relojito de posición. Este relojito lo que va a hacer es darnos una posición inicial lo vamos a notar porque nos ha puesto un rombo amarillo. Aquí podemos empezar a mover o dejar esta posición como la inicial:


Ahora movemos la cabeza lectora un poco más hacia adelante y movemos nuestra imagen, yo lo que he hecho en este ejemplo es subir la foto del gato, si lo estamos haciendo bien nos va a aparecer otro rombo pero de color gris que simboliza que hay un nuevo cambio:

Si movemos nos la cabeza lectora vemos como va quedando nuestra animación, así pues vamos a otro segundo y movemos nuevamente hacia abajo, vamos más adelante y movemos hacia arriba etc…:


Cuando tenemos nuestra animación deseada vamos a una barrita azul para acortar el tiempo de reproducción y la acortamos hasta que queramos que se vea:

Para publicar nuestra gif animado presionamos: crtl+alt+shift+s o vamos a archivo guardar para web y dispositivos y allí vamos a ponerle que nos guarde como gif:


Ya tenemos nuestro gif animado. Combinando distintos efectos de photoshop, tiempos y modos de exportación, lograremos mejore gif ;), ten en cuenta que el peso debe ser lo mínimo.
 

domingo, 14 de noviembre de 2010

Agregar campos en el formulario de registro joomla 1.5x

Hace poco tuve la necesidad de agregar más campos un formulario de registro para nuestro joomla 1.5x, entonces como buen investigador me di en la búsqueda de aquella valiosa información y lograr minimizar los costos de mi cliente.

Pues bien, lo que encontré es que se puede hacer mediante un componente que se llama Community Builder, pero a mi modo de ver es un componente muy extenso para solo añadir un par de campos nuevos en nuestro formulario de registro, sin embargo también es una salida.

La solución que vi más viable fue modificar nuestras tablas en la base de datos y en un par de archivos de nuestro gestor de contenidos gracias a un foro que encontré en internet ( http://www.joomlaspanish.org/foros/showthread.php?t=31225 ):


" Hola a todos:
hace unos días tuve que añadir unos cuantos campos al registro de usuarios en Joomla 1.5.7 y tras buscar en el foro vi que no estaba bien documentado para esta versión, pero si para Joomla 1.0.xx.

Despues de navegar un poco por la red encontré como hacerlo y de paso lo he traducido para ponerlo a disposición de quien lo necesite.

Saludos!

Advertencia: El siguiente ejemplo implica modificar el código del núcleo de Joomla. Esto conlleva una serie de riesgos si se realiza mal, como la posible perdida de funcionalidad del componente de registro y la necesaria reconfiguración del sistema para poder recuperarlo. Por eso es absolutamente necesario hacer copias de seguridad de todos los archivos que editemos para poder volver a la situación original en caso de desastre.


Por supuesto, no me hago responsable de posibles fiascos, yo he realizado estos pasos uno a uno y puedo confirmar que funciona en una instalación limpia de Joomla 1.5.7 en mi servidor de pruebas
# Apache 2.0.59
# MySQL 5.0.41
# PHP 5.2.6

Dicho esto, pasamos a la acción.

La página de registro Joomla normalmente contiene suficiente información para la mayoría de sitios web. Ciertos webmaster que desean mejorar la información del usuario, por lo general, usan el component Community Builder que ampliar los campos del registro. Sin embargo, es totalmente posible crear nuevos campos del registro sin necesidad de instalar otros componentes, mediante la modificación de algunas líneas en el código del core de Joomla. Aquí te indicamos cómo hacerlo.

En este ejemplo, vamos a añadir los campos Negocio y Teléfono al formulario de registro de usuarios, sin embargo esto solo es un ejemplo y puedes modificarlo para agregar el campo que quieras

El primer paso es agregar los campos campos a la tabla de usuarios en nuestra base de datos.
Nosotros usaremos el phpMyAdmin para realizarlo, pero puedes realizarlo de otra forma si conoces como. Las siguiente consultas en SQL añaden estos campos:



ALTER TABLE jos_users ADD business VARCHAR (100) NOT NULL AFTER name;


y despues


ALTER TABLE jos_users ADD phone VARCHAR (100) NOT NULL AFTER business;



Una vez que se hayan creado las columnas, verifica que se han creado correctamente y comenzaremos a modificar código de 4 archivos de joomla

Segundo paso, modificar el archivo libraries/joomla/database /table/user.php para insertar los nuevos campos. Un avez abierto buscamos estas lineas de código


var $name = null;

      /**

      * The login name

      *

      * @var string

      */

      var $username = null;



e inmediatamente después añadimos estas dos lineas (en este caso con las variables bussiness y phone, pero ya sabes que podrás usar otras siempre que el mantengas el nombre de las variables para todas las lineas de código que agregues)


var $business = null;

    var $phone = null;



Tercer paso, modificar el código que muestra la página de registro en el archivo components/com_user/views/register/tmpl/default.php Una vez abierto el archivo buscamos el siguiente código:


<tr>

<td width="30%" height="40">

<label id="namemsg" for="name"><?php echo JText::_( 'Name' ); ?>: </label> </td>

<td>

<input type="text" name="name" id="name" size="40" value="<?php echo $this->user->get( 'name' );?>" class="inputbox required" maxlength="50" /> * </td>

</tr>



he inmediatamente despues añadimos:


<tr>

    <td width="30%" height="40">

    <label id="businessmsg" for="business"><?php echo JText::_( 'Business' ); ?>: </label> </td>

    <td>

    <input type="text" name="business" id="business" size="40" value="<?php echo $this->user->get( 'business' );?>" class="inputbox required" maxlength="50" /> * </td>

    </tr>

    <tr>

    <td width="30%" height="40">

    <label id="phonemsg" for="phone"><?php echo JText::_( 'Phone' ); ?>: </label> </td>

    <td>

    <input type="text" name="phone" id="phone" size="40" value="<?php echo $this->user->get( 'phone' );?>" class="inputbox required" maxlength="50" /> * </td>

    </tr>




Cuarto paso, modificamos ahora el archivo components/com_user/views/user/tmpl/form.php, que es el que muestra los campos a rellenar por el usuario al registrarse, buscamos el siguiente código:



<tr>

      <td width="120">

      <label for="name">

      <?php echo JText::_( 'Your Name' ); ?>:

      </label>

      </td>

      <td>

      <input class="inputbox" type="text" id="name" name="name" value="<?php echo $this->user->get('name');?>" size="40" />

      </td>

      </tr>

      <tr>



e inmediatamente despues añadimos:


<td width="120">

    <label for="business">

    <?php echo JText::_( 'Business' ); ?>:

    </label>

    </td>

    <td>

    <input class="inputbox" type="text" id="business" name="business" value="<?php echo $this->user->get('business');?>" size="40" />

    </td>

    </tr>

    <tr>

    <td width="120">

    <label for="phone">

    <?php echo JText::_( 'Phone' ); ?>:

    </label>

    </td>

    <td>

    <input class="inputbox" type="text" id="phone" name="phone" value="<?php echo $this->user->get('phone');?>" size="40" />

    </td>

    </tr>



Quinto paso, ahora vamos a modificar la página que muestra los datos del usuario en el backend, editando el archivo: administrator\components\com_users\views\user\tmpl \form.php en el cual buscamos el siguiente código:


<tr>

                    <td class="key">

                        <label for="email">

                            <?php echo JText::_( 'Email' ); ?>

                        </label>

                    </td>

                    <td>

                        <input class="inputbox" type="text" name="email" id="email" size="40" value="<?php echo $this->user->get('email'); ?>" />

                    </td>

                </tr>



e inmediatamente despues añadimos este otro código:




<tr>

                    <td class="key">

                        <label for="business">

                            <?php echo JText::_( 'Business' ); ?>

                        </label>

                    </td>

                    <td>

                        <input class="inputbox" type="text" name="business" id="business" size="40" value="<?php echo $this->user->get('business'); ?>" />

                    </td>

                </tr>

                <tr>

                    <td class="key">

                        <label for="phone">

                            <?php echo JText::_( 'Tel' ); ?>

                        </label>

                    </td>

                    <td>

                        <input class="inputbox" type="text" name="phone" id="phone" size="40" value="<?php echo $this->user->get('phone'); ?>" />

                    </td>

                </tr>



Eso es todo, para que funcione correctamente, aunque nos falta un pequeño detalle, tanto en la administración como en la página de registro nos salen las etiquetas Business y Phone, por lo que tendremos que acudir a los archivos de idioma para ponerlo en el idioma de Cervantes, Rosalia de Castro, Ausiàs March o el que corresponda...
En mi caso y asta que saquemos la versión andaluza de Joomla, acudo al archivo languages/es-ES/es-ES.com_user.ini y añado estas dos lineas (aquí donde lo coloques es indistinto...)

PHONE=Teléfono
BUSINESS=Negocio

Con lo que en la parte pública ya estaría traducido, después accedemos a

administrator/languages/es-ES/es-ES.com_user.ini y repetimos la acción, así ya tendremos en nuestro idioma tanto la parte pública como la administración


Ahora tienes un par de campos adicionales en la tabla de usuarios, y más información disponible para su uso.

Asegrate de tener copias de seguridad antes de hacer este cambio!

Espero que te sea útil y solo me queda darle las gracias al usuario de joomla.org jtullous por ponerme en el camino para hacerlo y a usuarios de otros foros que me ayudaron a resolver un pequeño problema de sintaxis en la consultas a MySQL

Espero que os sea útil"


A mi me funcionó perfectamente, aunque no son campos requeridos, para esto hay que estudiar más o pagarle al ingeniero. Te recomiendo que hagas los pasos al pie de la letra porque hay cosas que parecen obvias pero al final la terminamos liando. Ahh y obviamente si tienes dudas o comentarios lo puedes hacer en el foro de donde saqué la info: http://www.joomlaspanish.org/foros/showthread.php?t=31225

Como siempre, si te sirvió o gustó no seas desagradecido enlaza el blog ;)