Secretos de diseñadores y publicistas

Libro mágico photoshop

2016-03-29T17:38:00.000-07:00

Hola, después de mucho tiempo sin publicar, quiero traer para ti un nuevo videotutorial para realizar una composición en photoshop que he llamado "libro mágico". Su autor: un publicista bogotano ( https://www.facebook.com/FabianElPublicista/ ) el cual recomiendo que sigas para ver muchas ideas y uno que otro truco que te sacarán de apuros en algún momento, pues evidentemente es un apasionado por la herramienta.

En este video tutorial encontraras cosas que en algún momento he mencionado en mi blog, cómo algo que realmente no sabia, el uso de la herramienta borrar fondo que casi que es el santo grial para casi caulquier photoshopero.

Sin mucho más que decir dejo el tutorial de nuestro colega publicista:

Tutorial efecto 3d en photoshop

2015-08-20T08:06:00.000-07:00

Hola amigos, hoy quiero compartir con ustedes un tutorial de photoshop muy visto en internet, pero seguramente les será de utilidad para crear un efecto 3d basados en una foto normal. Verás que la foto usada es de mala resolución y que el fondo usado no se ve de ninguna forma profesional, realmente en esta oportunidad no tuve el tiempo de realizar la entrada y pedí ayuda, sin embargo creo que funciona para ilustrar un técnica, de esta manera pido disculpas a nuestros lectores.

Esta "hermosa obra de arte" fue sacada de: https://youtu.be/eeYm0zTR0sA

Este turial creo que tiene mejores acabados pero es básicamente lo mismo: https://youtu.be/L04tlKT1WoQ

De esta manera empezamos este tutorial para photoshop:

1. Abrimos la imagen con Photoshop, la duplicamos (Ctrl + J) y creamos una nueva capa.

2. Vamos a la herramienta selección y dibujamos un cuadro.

3. Click derecho y contornear y le ponemos 12 px.

4. Le damos click en Edición, Transformar y Perspectiva

5. Con el puntero, manejamos el cuadro de tal manera que quede con la inclinación deseada para dar la sensación de profundidad.

6. Creamos una máscara de capa.

7. Vamos a herramienta pluma y hacemos el siguiente trazado:

8. Creamos otra mascara a la capa de abajo y con herramienta pluma contorneamos el marco y lo que sale fuera de él en la imagen.

9. Luego de contornear la imagen, le damos clic derecho y hacer selección.

10. Herramienta selección, clic derecho y selección inversa o (Ctrl + Shift + i)

11. Luego clic derecho, rellenar y ok

12.Creamos otra capa debajo y le podemos dar un degradado a nuestro gusto.

Y listo!

Mejorar el contraste de las fotos en Photoshop

2015-06-18T11:19:00.000-07:00

Después de un buen rato de no publicar, hoy quiero hablar de algo común en el medio para mejorar el contraste de las fotos en Photoshop. Si bien existen muchas formas de hacer esto, hoy les quiero mostrar cómo hacerlo fácil y efectivamente, sobre todo porque en ocasiones cuando mejoramos el contraste nuestras fotos se pueden ver en ocasiones raras.

Hay que decir que siempre que necesitemos aumentar los contrastes de las fotografías y que estas queden lo más natural posible deberías experimentar con este truco hasta conseguir los resultados esperados.

Manos a la obra:

Lo primero que hacemos es sacar una copia de nuestra capa (control + j).
Luego vamos al menú superior > Imagen > Ajustes > niveles > automático > ok.
Duplicamos la capa (control + j)
Vamos al menú superior > imagen > ajustes > ecualizar
Ahora en el modo de fusión ponemos luz suave con una opacidad entre el 30 y 40%

Las Novedades del photoshop cs6

2014-06-27T19:27:00.000-07:00

Hola, todo cambia en pequeña o gran magnitud y el diseño no se podía quedar atrás. Veo con nostalgia el pasado, cuando cogimos por primera vez esta maravillosa herramienta que tanto tiempo nos ha tenido en embelesados frente a él. El photoshop ha sido por excelencia la herramienta para la construcción de imágenes en formato bitmap, así que es demasiado útil para tratar fotografías y hacer diseño web.

Hoy por hoy vamos en la versión CC (creative cloud ) versión a la cual no he tenido la oportunidad de probar, esto por una cierta apatía a probar los programas que recién salen, pues considero que es mejor esperar a que el mercado haga una prueba y no tener inconvenientes sobre la marcha.

Bajo estas circunstancias este año he llegado al photoshop cs6 y poco a poco he encontrado cambios importantes en el manejo del programa, tanto así que me he tomado el tiempo de buscar una que otra respuestas en el google sobre el programa.

Por esta razón hoy quise compartir con ustedes este video sobre los "nuevos" cambios del photoshop, me hubiera gustado haber realizado este video y contarles todo con detalle pero desafortunadamente el tiempo es oro y toca invertirlo prioritariamente.

Estas novedades en photoshop cs6 las puedes ver con más detalle en el link anterior, o simplemente ver el video a continuación:

Espero que te haya sido de utilidad como a mí. Si es así no estaría mal que lo compartas o comentes :).

Dientes Blancos con photoshop

2013-10-10T09:33:00.000-07:00

Hoy quiero mostrarles la forma de blanquear los dientes de una persona usando photoshop. Aunque este tutorial está en varias partes de la web quisiera hacer el mío para enseñarles a usar los comandos rápidos y darles uno que otro tip para ahorrar tiempo.

Para comenzar he descargado una foto de internet (obviamente tiene los dientes amarillos):

Para ahorrar tiempo yo he arrastrado esta imagen directamente al programa ya me sale.
Ya que de otro modo sería: “guardar imagen como”, luego en photoshop: ctrl + O (abrir), buscar la imagen y click en abrir.

Siempre que trabajemos sobre una imagen es aconsejable sacar una copia de nuestra capa para no perder la original: ctrl+j o también podemos arrastrar la imagen desde la capa al icono crear capa nueva

Yo siempre he creído que la base del photoshop es hacer selecciones, y dependiendo de los detalles de selección, nuestro retoque va a quedar mucho mejor. Sin embargo como “el tiempo es oro” en esta ocasión vamos a crear una selección rápida (sin embargo ustedes pueden usar la pluma (letra P), o lazo poligonal (letra L) entre otras).
Para hacer nuestra selección rápida vamos a presionar la letra Q, o vamos al este icono:

Ahora presionamos la letra B, y luego dibujamos nuestra mascara acercándonos lo suficiente a la imagen. Yo prefiero usar pinceles con los bordes difuminados (para cambiar el pincel sin tener que ir hasta la parte de arriba lo podemos hacer con el click derecho del mouse), señalamos los dientes:

Si por alguna razón nos hemos salido de los dientes podemos borrar nuestra selección presionando la letra E o dándole click en la herramienta borrador.
Cuando hayamos terminado de “pintar” nuestra mascara volvemos a presionar la letra Q o el icono de mascara rápida y vamos a ver nuestra selección tal y como la conocemos, sin embargo tenemos seleccionado todo menos los dientes así que invertimos la selección: ctrl+shift+ I o vamos al menú selección y luego invertir.
Ahora vamos blanquear los dientes presionando ctrl+u o:

En este panel vamos al desplegable que dice amarillos y en la saturación de ponemos -100

Ya tenemos nuestro dientes blancos!, pero según mi juicio creo que aun se ven feos, así que vamos darle al ctrl U, pero esta vez dejamos “todos” y le ponemos luminosidad +30
Finalmente le damos Ctrl + D y quitamos la selección:
Usando las selecciones y el panel de tono/saturación podemos hacer muchos efectos y retoques todo es que practiquen.

Si te gustó comparte ;)

Como crear logotipos y logos

2013-08-28T13:12:00.000-07:00

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

Efecto repujado sencillo en photoshop

2012-11-23T10:26:00.000-08:00

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)

Algo sobre colores web

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.

Como hacer lluvia en una foto con photoshop

2011-12-05T09:30:00.000-08:00

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.

Como convertir un html a PDF

2011-11-24T11:51:00.000-08:00

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

Como hacer una caricatura en photoshop cs2 cs3 cs4 cs5

2011-04-27T18:46:00.000-07:00

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

Como hacer emoticones en photoshop

2011-01-03T21:34:00.000-08:00

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.

Agregar campos en el formulario de registro joomla 1.5x

2010-11-14T20:47:00.000-08:00

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 ;)

Efecto para banners en flash y as2

2010-11-12T21:43:00.000-08:00

Hoy vamos a aprender a hacer un interesante efecto que puede ser utilizado en banners o en lo que se les ocurra.

Sobra decir que toca abrir el flash, pero he encontrado gente que nada le parece obvio, así que “por favor ejecute su flash versión 8 en adelante”.
Ahora le decimos “archivo de flash (AS2)” .
Este tutorial lo voy a hacer con cs4, pero como vengo usando el flash en versiones anteriores la verdad no me acostumbro a tenerlo con la nueva interfaz, así que voy a ventana > espacio de trabajo> clásico.
Configuramos el tamaño que queremos, en este caso 230px X 173px:

Importamos una imagen de fondo ctrl+R, presionamos ctrl+k para que nos salga el panel de alineación y le decimos que nos alinee con respecto a la escena tanto vertical como horizontal.:

Creamos una nueva capa:

Ahora hacemos un cuadro del color que queramos y lo convertimos a clip de película con la tecla F8:

Ahora entramos en el clip dándole doble click al cuadro. Señalamos nuevamente el cuadro y lo convertimos nuevamente en clip de película (F8) para poder animar por movimiento.
Vamos al fotograma número 20 y presionamos F6 para poner un fotograma clave. Luego nos situamos entre los dos fotogramas (1 y 20) y presionamos el click derecho y le ponemos crear interpolación clásica. (Si no convertimos el objeto a click de película el programa nos crea automáticamente el clip, pero cuando tenemos un proyecto grande vamos a tener problemas por utilizar esos nombres genéricos que crea el programa, como animar1, animar2 etc.)

Nos paramos en el primer fotograma y le damos click al cuadro para que nos salgan las opciones de estilo, y le ponemos un alpha al 100%:

Luego vamos al último fotograma y hacemos lo mismo, opciones de estilo>alpha, pero esta vez le ponemos 0%.

Si publicamos (Ctrl+enter) vamos a ver un cuadro titilando, así que cerramos y continuamos con el código.
Vamos a pararnos en el primer fotograma y vamos a presionar F9, dejamos presionado la tecla “Esc” y presionamos seguidamente la letra “S” y luego la letra “T” esto con el objetivo de hacer un stop “stop();”, seguidamente vamos a escribir esto:

onRollOver = function(){
gotoAndPlay (2)
}

Bien ahora salimos del clip dándole click a escena 1:

Ya afuera vamos a mantener la tecla “alt” mientras arrastramos nuestro cuadro (para mantener una misma trayectoria en esta copia de instancia dejamos presionada la tecla “shift” luego de arrastar y no soltar). De esta forma vamos a arrastrar y soltar tantas veces sea necesario para cubrir de manera homogénea toda la imagen:
(para señalar varios clips de manera independiente deja presionado el botón “shift” mientras das click en los clips)

Cuando tengamos tapada toda nuestra imagen le damos publicar (ctrl+enter) y vemos k al pasar el mouse por las partes de nuestra película se nos va a descubrir la imagen y nos va a dar un efecto interesante.

Final:

Como siempre espero que te haya gustado y si puedes enlázame el blog ;)
Es importante que pruebes con distintos tamaños, colores y animaciones para que le saques provecho a este humilde tuto.

Hasta pronto.

Como hacer contorno con fondo transparente en photoshop

2010-09-25T18:39:00.000-07:00

Primero que todo pido disculpas a nuestros visitantes por no publicar seguido como lo hacia anteriormente, pero el trabajo me ha quitado mucho tiempo para compartir información.

En esta ocasión quiero colaborar con algo sencillo pero que para la persona que no lo sepa puede llegar a ser un dolor de cabeza. Pues bien, voy a mostrarles como hacer un simple contorno usando una figura vectorial.

Como siempre lo primero que vamos a hacer es abrir un documento nuevo: crl+n , ponemos un fondo ya sea arrastrando nuestro .jpg desde la carpeta en donde lo tenemos o simplemente lo jalamos desde internet hasta nuestro archivo nuevo.

Ahora creamos nuestra figura vectorial presionando la letra “u”. y seleccionamos el color blanco (esta es la clave para que quede transparente) y hacemos nuestra figura:

TIP: Es posible que nos salga el cuadro, pues para cambiar a circulo presionamos shift+ u tantas veces como lo necesitemos.

Vamos al botón Fx y seleccionamos trazo:

Escogemos nuestro color y el grosor de la línea. Luego presionamos ok

Para finalizar vamos a modos de fusión y le damos Multiplicar y listo:

Como vemos también funciona con las fuentes:

Si te gustó, enlazanos desde tu página.

Tutorial Virado en photoshop ( efecto envejecido)

2010-08-02T19:58:00.000-07:00

Hoy me sacudo un poco la pereza para enseñarles como hacer un virado y/o efecto envejecido a una foto en photoshop.

Aunque este tutorial puede parecer un poco básico, la verdad es que usando un poco la imaginación podemos conseguir otro tipo de resultados.

Lo primero que vamos a hacer es conseguir una foto, en este caso:

Presionamos ctrl+J para sacar una copia de nuestra capa.

Presionamos ctrl+shift+u para desaturar (poner en blanco y negro nuestra foto):

Ahora le damos click a crear nueva capa de relleno o ajuste:

Ponemos color uniforme y seleccionamos un café como el que yo he escogido y le damos OK:

Finalmente ponemos esta capa como luz suave y ya está:

Esta última le he puesto dos texturas grunge que encontré por google, a una le he puesto luz suave y a la otra le he puesto multiplicar. Espero les haya gustado el efecto de envejecido / virado en photoshop.

Se te gustó enlaza este blog.

Efecto sueño en photoshop

2010-07-12T21:39:00.000-07:00

Hoy quiero enseñarles un efecto en photoshop que según mi criterio simula un sueño, muy visto en series o en películas.

Lo primero que hacemos es sacar una copia de nuestra imagen: (ctrl+j o arrastramos nuestra imagen hasta el icono de duplicar capa)

Vamos a filtro > desenfoque gaussiano> y le damos este parámetro. Lo importante es no darle mucho ni poco:

Ahora vamos a nuestra paleta de capas y ponemos sobre poner:

Finalmente podemos dejarlo hasta ahí, o también podemos duplicar la capa a la que le hemos puesto el desenfoque para marcar mucho más el efecto.

Si te ha gustado enlázame.

PNG transparentes en IE6

2010-06-29T14:29:00.000-07:00

No es nada raro que estemos creando una página con css y en el momento de probarla en el odioso Internet explorer 6 nos damos cuenta que no salen los png transparentes. Aquí es cuando empezamos a buscar como locos la solución a este problema.

Pues bien, existen varias posibilidades, entre ellas archivos javaScript; que para mí no fueron útiles, quizás porque no seguí correctamente las instrucciones; sin embargo encontré este código css el cual me funcionó perfectamente, por esto quiero compartirlo con ustedes:

#capaPng {
height:300px;
width:400px;
background-image:url(imagenes/img.png) !important;
background-image:none;
filter:none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dixso.net/wp-content/examples/css/png-ie/imagenes/img.png');
}

Es sumamente importante poner la ruta absuluta para la imagen PNG en la línea "filter", por otro lado y no menos importante, es colocar la altura (height) y anchura (width).

Con esto seguro ya podrá trabajar imágenes PNG. Sin embargo otro problema muy común con estas imágenes PNG es cuando las queremos como fondo en nuestros botones o incluso en un input, ya que los botones dejan de ser pulsables y el input parece ser una imágen más. La solución es la siguiente:

En el css para que los links con fondo PNG en IE6 funcionen se debe cumplir lo siguiente:

* La capa que tiene el filter no puede tener “position:absolute”. Por encima de ella sí se pueden poner divs con posicionamiento absoluto conteniéndola.
* A la capa filter debe aplicarsele estilo mediante identificador id=”", con class=”" no funcionaría.
* Los elementos activos contenidos en la capa filter deben tener definido explícitamente el atributo position a absolute o relative.

Gracias ha:
http://www.tripix.net
http://dixso.net

Como cambiar de hosting nuestro joomla

2010-06-18T12:32:00.000-07:00

Hola, en ocasiones tememos cambiar de hosting porque nuestra página está hecha en un gestor de contenidos como joomla. Así que nos entra el miedo de perder nuestro trabajo. Por esto hoy traigo la solución para cambiar de hosting nuestro joomla sin perder lo que ya hemos hecho (quiero aclarar que esto lo he encontrado en el caché de una página que ya no existe):

"Bueno, los pasos para la mudanza, son bien simples y los enumero a continuación:

1. Hacer un backup de la base de datos. Esto lo pueden hacer utilizando la opción “exportar” desde phpMyAdmin (herramienta con la que probablemente cuenten en su hosting).

2. Hacer un backup de TODOS los archios existentes en la instalación actual de tu sitio (vía ftp por ejemplo o bien utilizando algún sistema de backup ofrecido por tu hosting).

3. En el nuevo servidor, hacer una instalación limpia de Joomla! utilizando la misma versión que tenías instalada en el viejo hosting. Esto es para asegurarnos la compatibilidad de funciones, etc. Entonces si antes tenías una 1.5.14, para la nueva instalaciones tenés que descargarte una 1.5.14, subirla vía ftp al nuevo servidor e instalarla. Cabe recordar que previamente a la instalación tenés que crear la base de datos en el nuevo servidor (no es necesario que el nombre de la base y el usuario sean los mismos que los anteriores. Si estas cambiando de servidor es muy probable que no puedas asignarle el mismo nombre de base y nombre de usuario).

4. Acá viene lo bueno. Subir (y pisar o sobreescribir) todos los archivos de la vieja instalación al nuevo hosting. TODOS menos (y el más importante) configuration.php. Porque no hay que pisar este archivo y los demás si?. Este archivo contiene la configuración del nuevo entorno, por lo cuál si lo pisas con el de la vieja instalación se te va a armar un quilombo de la puta madre. Asi que NO SUBAS EL ARCHIVO CONFIGURATION.PHP TE DIJE!!!.

5. Solo nos falta restaurar el backup de la base, para ello utilizamos nuevamente phpMyAdmin e importamos el script del backup de la vieja base a la nueva. Acá previamente hay que ELIMINAR todas las tablas de la nueva instalación ya que elscript anterior viene con los CREATE TABLE necesarios para restaurar la base completa.

6. Navegar el sitio, probablemente todo ande de maravillas :P

Con respecto a EXPORTAR e IMPORTAR, vale aclarar que al hacerlo no deberían tocar ninguna opción. Así como las presenta de manera predeterminada, así deberían quedar. Con esto nos aseguramos que en ambos casos la operación se realizará correctamente. Una variante de esto es crear el script de exportación con la opción “Añada DROP TABLE”, si hacemos esto, no será necesario eliminar las tablas de la nueva instalación antes de importar ya que ésta sentencia eliminará y creará cualquier tabla que encuentre en su camino.

Para resumir:

1. Exportar la base de la vieja instalación.
2. Backup de archivos y carpetas vía ftp.
3. Instalar Joomla! en el nuevo servidor.
4. Subir y pisar todos los archivos del paso 2 menos configuration.php.
5. Importar la base del paso 1.
6. Voila!

Vale aclarar que estos pasos pueden probarlos en su pc para ver si todo anda bien y asegurarse que el paso a producción no traerá problema alguno.

Existen extensiones que hacen esto por nosotros pero para que complicarse tanto si los pasos son bien pedorros?."

Por mi parte me ha servido un montón, espero les sirva igual.

Sacado de: http://www.estoesproduccion.com.ar

---------------------------

Hace poco he tenido que cambiar varias páginas de hosting, y al ser tantas tuve que replantear la forma de hacer este cambio de hosting y encontré una solución más practica.

La idea es solo subir los antiguos archivos al hosting nuevo, subir la antigua base de datos y modificar el configuration.php:

    var $host = 'localhost';
    var $user = 'Nuevo usuario';
    var $db = 'nueva base de datos;

Y listo.
Hasta pronto.

Como crear y usar Favicon.

2010-05-26T19:23:00.000-07:00

Un favicon en general es ese pequeño icono que tienen las páginas web en la parte superior; si quieres profundizar mira este enlace: http://es.wikipedia.org/wiki/Favicon.

Lo primero que vamos a hacer es crear nuestro icono, para posteriormente insertarlo en nuestra página.
Según mi experiencia, este icono se puede crear en photoshop:

Descargamos e instalamos el plugin para guardar en formato .ico desde photoshop: http://www.freedownloadmanager.org/es/downloads/Enchufe_de_uni%C3%B3n_de_Icono_para_Fototienda_38086_p/free.htm
Luego abrimos nuestro photoshop, Ctrl+N y le damos las dimensiones de 16x16 px.
Importamos nuestra imagen, Ctrl+t , Ctrl + 0 y dimensionamos nuestra imagen para dejarla al tamaño de nuestro lienzo.... De ahi en adelante es darle rienda suelta a tu imaginación.
Para terminar guardamos como .ico

Ahora ya tenemos nuestro .ico. Es un proceso, aunque no muy largo si se podría acortar:

Entra en esta página: http://www.favicon.cc/ o esta http://www.html-kit.com/e/favicon.cgi?m=1
y ya, jejeje.

Ahora vamos a usar nuestro Favicon:

Lo que vamos a hacer es colocar este código en nuestro html entre las etiquedas del head:

[head]
[link rel="shortcut icon" href="favicon.ico" /]
[/head]

*sustituir los [ ] por un menor que y un mayor que.

Como es obvio tienes que subir el favicon.ico y tu archivo .html en la misma ruta para que funcione.

Si te gustó enlázame.

Nuevos logos para la inspiración 170

2010-05-26T18:46:00.000-07:00

,

Tomado de http://www.tripwiremagazine.com

Tutoriales para hacer iconos profesionales

2010-05-16T09:36:00.000-07:00

Auque existen lugares para descargar iconos, es importante saber como se elaboran, ya que muchas veces no encontramos iconos personalizados. Por tal razón les dejo este compilado de tutoriales para elaborar iconos de aspecto profesional en photoshop :

How to Make a Professional Buddy Icon in Photoshop

How to Make a Professional Buddy Icon in Photoshop

2. Design a Stylish Mail Icon in Photoshop

Design a Stylish Mail Icon in Photoshop

3. Create a Stylized First Aid Icon in Illustrator

Create a Stylized First Aid Icon in Illustrator

4. Create a Cute Panda Bear Face Icon

Create a Cute Panda Bear Face Icon

5. How To Create a Detailed Apple iPad Icon in Photoshop

How To Create a Detailed Apple iPad Icon in Photoshop

6. Creating a Modern, Glossy Mouse Icon in Photoshop

Creating a Modern, Glossy Mouse Icon in Photoshop

7. Design a Vintage Radio Icon in Photoshop

Design a Vintage Radio Icon in Photoshop

8. Creating a Toaster-Popping Illustration

Creating a Toaster-Popping Illustration

9. Beginner Illustrator Tutorial– Create a Vector RSS Icon

Beginner Illustrator Tutorial– Create a Vector RSS Icon

10. Create A Vector Art Twitter Bird Character Icon In Adobe Illustrator

Create A Vector Art Twitter Bird Character Icon In Adobe Illustrator

11. How to Create a Vector Safari Compass in Illustrator

How to Create a Vector Safari Compass in Illustrator

12. How to Create an Envelope Icon in Photoshop

How to Create an Envelope Icon in Photoshop

13. Icon design tutorial:How to make a Calendar icon

Icon design tutorial:How to make a Calendar icon

14. Icon Design Tutorial: Drawing A Pencil Icon

Icon Design Tutorial: Drawing A Pencil Icon

15. How to Create a Basic House Icon in Photoshop

How to Create a Basic House Icon in Photoshop

16. Create an envelpe icon with a satin feel

Create an envelpe icon with a satin feel

17. PC Mouse Tutorial

PC Mouse Tutorial

18. Create A Briefcase Icon

Create A Briefcase Icon

19. How to Create a Golden, Vector Compass in Illustrator

How to Create a Golden, Vector Compass in Illustrator

20. How to create a Television Icon

How to create a Television Icon

21. Create a glossy high tech 3D speaker icon

Create a glossy high tech 3D speaker icon

22. Create a Leather-Textured, Realistic Briefcase Icon

Create a Leather-Textured, Realistic Briefcase Icon

23. Share This Icon

Share This Icon

24. Create a Vintage TV Set Icon in Illustrator

Create a Vintage TV Set Icon in Illustrator

25. How to Create a Vector Sketchbook

How to Create a Vector Sketchbook

26. Wii Mote Controller Tutorial

Wii Mote Controller Tutorial

27. How to Design a Set of Multicolored Buddy Icons

How to Design a Set of Multicolored Buddy Icons

28. Illustrating a Business Briefcase in Windows 7 Style

Illustrating a Business Briefcase in Windows 7 Style

28. Make a 3D Pencil and Paper Icon in Photoshop

Make a 3D Pencil and Paper Icon in Photoshop

30. How to Create a Juicy RSS Feed Icon

How to Create a Juicy RSS Feed Icon

31. Monitor Icon Design

Monitor Icon Design

32. How To Create An Academy Icon From Simple Shapes

How To Create An Academy Icon From Simple Shapes

33. Create A Stylish And Sleek Play-Station Portable Icon

Create A Stylish And Sleek Play-Station Portable Icon

34. Photoshop Scissor Icon

Photoshop Scissor Icon

35. LG LCD Monitor Icon

LG LCD Monitor Icon

Extraido de http://www.webanddesigners.com

Hacer iconos 3d en illustrator

2010-04-28T10:57:00.000-07:00

Esto es una técnica rápida para hacer íconos u “logos” en 3d usando degrades en illustrator.

Lo primero que vamos hacer es poner la letra “t” y luego damos click en el lienzo para escribir un texto. En este caso “3D Logo” con un color gris claro.
Con el texto señalado vamos a efecto > deformar > arco y le damos estos parametros:

Ahora vemos a efecto > 3D> extrusión y biselado. Ponemos una extrusión de 20 pt y jugamos con la rotación x, y, z:

Ahora vamos expandir la apariencia. Con nuestro texto señalado vamos a Objeto>expandir apariencia y desagrupamos dándole click derecho a nuestro texto o con el texto señalado presionamos (Ctrl+Shift+G); es necesario desagrupar unas cuatro o cinco veces para tener el objeto en varias partes.

Señalamos la extrusión letra por letra (para señalar objeto por objeto es necesario mantener presionado shift) . Luego presionamos shift +F7 y nos saldrá la una paleta, le damos click en la pestaña buscar trazos. En modos de forma le damos al primer ícono que se llama unificar. Ahora le damos clik derecho sobre nuestra extrusión y le decimos organizar > enviar detrás. Luego hacemos lo mismo pero con el texto base (en este caso el gris más claro), como se puede dar cuenta no es necesario decirle enviar adelante.

Aplicamos el degrade que se encuentra generalmente al lado derecho del lienzo. Como tenemos dos objetos texto base y la extrusión vamos combinar los colores claros al frente (texto base) y colores de la misma gama pero oscuros en la extrusión:

Es importante hacer modificaciones con diferentes figuras y degrades apra conseguir otros resultados.
Espero les haya gustado., hasta pronto,
Basado en el tutorial de: http://www.ndesign-studio.com/tutorials/3d-logo

Retoque de caras humanas en Photoshop

2010-04-19T21:34:00.000-07:00

Esto es una recopilación de retoques fotográficos hechos en photoshop basados en la cara humana.
Espero les guste tanto como a mi:

tomado de http://indeziner.com

Como modelar un objeto sencillo en 3d max

2010-04-08T09:37:00.000-07:00

Para las personas que quieren aprender 3d Max y por cuestiones de dinero les ha sido difícil o imposible aprenderlo, les dejo este tutorial de 3d max para aprender a modelar un objeto sencillo como una tostadora.

3ds max - modelado por objetos - tostadora from Andrés Morelli on Vimeo.

Cortesía de Andrés Morelli.

Como instalar patterns y pinceles photoshop cs3

2010-04-06T12:01:00.000-07:00

Hola. Alguien durante esta semana me preguntó algo que es basico pero que muchas personas que están empezando con este tema del diseño o simplemente a usar el photoshop no saben. Como instalar nuestros pinceles y/o motivos:

Lo que hacemos es poner nuestros archivos .ABR (para pinceles) en la ruta:
C:\Archivos de programa\Adobe\Adobe Photoshop CS3\Ajustes preestablecidos\Pinceles

y archivos .pat (motivos) en la ruta:

C:\Archivos de programa\Adobe\Adobe Photoshop CS3\Ajustes preestablecidos\Motivos

Finalmente abres el photoshop y listo, cualquier pregunta no dudes en hacerla.
Hasta pronto.