Ahorra tiempo con Photoshop Layer Comp

Posted by Wigo | Filed under Diseño, Tutoriales

Una de las tareas más engorrosas a la hora de diseñar interfaces es exportar todas las pantallas, que hemos ido diseñando, con sus menús, submenús, acciones, animaciones etc.. Recordando siempre las capas o conjunto de capas que tenemos que habilitar/deshabilitar para formar todas las secciones.

Pues bien, nuestra querida aplicación Photoshop, incluye una funcionalidad llamada Layer Comps, que, lo que hace básicamente, es grabar los estados de visibilidad/invisibilidad de todas nuestras capas en un instante determinado. Dándoles un nombre y pudiendo añadir una descripción.

Vamos a ver un ejemplo:

Tenemos un avatar de messenger que al hacer click sobre él, nos desplegará un menú, y la ultima acción del menú (otras posibilidades) desplegará un submenú

 

clip_image001

En nuestro diseño, el avatar seria el grupo de capas llamada Avatar, el menú seria el grupo options y el submenú seria el grupo morePossibilities

 

 

clip_image001[6]

Vamos a ir grabando la navegación de este sencillo menú, con Layer Comps. Para ello abrimos el panel de layer comps (window > layer comps)

clip_image002

Ahora para el primer paso, deshabilitamos options, de esta manera solo se verá el avatar puesto que morPossibiilities esta dentro de options

Ahora nos vamos al panel de layer comps y creamos una nueva layer comp

Nos pedirá introducir un nombre , jugar con la visibilidad, o grabar su posición para realizar animaciones, también cambiar el estilo de la capa, a su vez, podremos introducir un comentario descriptivo sobre esta composición. En nuestro caso AvatarBase.

clip_image001[8]

A continuación deshabilitamos la capa morePossibiliities y habilitamos la capa optiones, y nos vamos a layer comp y guardamos una nueva comp.

clip_image001[10]

Importante: realizar primero el switch de visibilidad en las capas y por ultimo guardar el estado, a este segundo estado lo llamaremos AvatarPressedMenu.

Por ultimo quedaría habilitar el grupo morePossibilities y crear una nueva layer comp. Llamada AvatarPressedSubmenu.

clip_image001[12]

Usando los controles de layer comp (flechas) podemos ir avanzando o retrocediendo en nuestra navegación.

Y ya tenemos nuestra navegación simple creada. PERO AHORA VIENE LO MEJOR !!!

De la manera habitual, tendríamos que ir seleccionando el estado y guardando nuestra imagen, darle un nombre y así sucesivamente… pero teniendo nuestras composciones ya creadas podemos exportarlas automaticamente con un script, y nuestro querido photoshop nos generará una exportación de todas las capturas…

Por tanto, ahora nos vamos a File > Scripts > Layer Comps to Files

clip_image001[14]

clip_image001[16]

 

En la ventana emergente elegimos la carpeta destino, el prefijo de nuestro nombre, que se genera automáticamente (prefijo_numerodelayercomp_nombrelayercomp.filetype)

Seleccionamos también el tipo de archivo a generar, y clickeamos sobre “Run”

El Photoshop empezará a correr el script, mostrándonos un mensaje de finalización

 

clip_image001[18]

 

Y aquí tenemos nuestros archivos generados ON THE FLY…. recién salidos del horno.

clip_image001[20]

 

RAPIDO SENCILLO Y PARA TODA LA FAMILIA….. Y lo mejor de todo es… AHORRAMOS SUFRIMIENTO Y TIEMPO.

Tags: , , ,

Read more | Comments (0) | December 4th, 2009

WPF – Cómo arrastrar objetos

Posted by Wigo | Filed under Tutoriales

En este tutorial sobre WPF explicaré como crear el típico efecto de arrastrar un objeto, en este caso un círculo, utilizando los eventos de ratón y un poco de ayuda del code-behind.

Siguiendo este tutorial podemos conseguir el efecto de arrastrar cualquier objeto, el fallo es que al clickear sobre el objeto no arrastramos desde el punto justo desde el que hemos pinchado, así que modificando este tutorial, pensando de otra manera, conseguiremos el efecto deseado.

Read the rest of this entry »

Tags: , , ,

Read more | Comments (1) | November 10th, 2008

Integrando Plogger en WordPress

Posted by Wigo | Filed under Tutoriales


Plogger es, por el momento, la mejor forma de crear una galería de tus fotos preferidas para tu web en php, es sencillo de manejar, sencillo de instalar pero el problema viene cuando nosotros..(los frikis beloggers) no nos conformamos con tener una galería “a parte del blog” y queremos integrarla con nuestro theme (que tanto hemos sufrido para que quede bien bonito)

Aprovechando que mi compañero blogero Pablo Garcés de Memorias de un Náufrago me pidió la implementación de plogger en su blog, voy a dar una explicación para que lo intenteis vosotros mismos en plan bricomanía.

Como una imagen vale más que mil palabras, así es como quedaría La Esfera Negra con Plogger integrado.

Para conseguir ésto tendréis que seguir estos pasos:

Paso 1

Descargar Plogger y extraer los archivos.

Paso 2

Subir los archivos a una carpeta de tu blog, yo las puse en /gallery .

Paso 3

Instalar Plogger como bien explican sus intrucciones.

Para instalar, subir todos los archivos de tu distribución Plogger a tu servidor web. Luego ejecutar _install.php desde la barra de dirección del explorador web. Este script te orientará a través del proceso de instalación.

Paso 4

Abrir el archivo index.php de Plogger.

Dentro encontrarás el código basico, solo nos interesan estas tres lineas:

require(“gallery.php”);
the_gallery_head(); ?>
the_gallery();

Estas lineas son las que ejecutan Plogger y son las que necesitamos para integrarlas en un nuevo index.php de Plogger.

Paso 5

Sea cual sea el theme que estés usando, copia/download y luego abre el head.php e index.php. Este par de archivos serán insertados en el nuevo index.php de Plogger.

Desde el panel de control de WordPress: Presentación>Editor de temas. y copiamos el código de Encabezado y Plantilla de página principal.

Paso 6

Crear un nuevo archivo llamado index.php. Éste sera el nuevo index.php de Plogger que vamos a crear.

Paso 7

En la primerísima línea poner:

Ésto le dira al nuevo index.php quese redirija un directorio arriba para encontrar wp-blog-header.php, un archivo muy importante.

Si por alguna razón instalaste Plogger en algún otro lugar tendrás que modificar la dirección relativa para que el require funcione. Por ejemplo, si Plogger fue instalado en /images/gallery tendrás que cambiar el código a:

De esta forma iremos dos directorios arriba para cazar el wp-blog-header.php.

Paso 8

En la segunda línea poner:

require(“gallery.php”); ?>

Éste es el primero de los tres archivos que necesitamos para ejecutar Plogger.

Paso 9

Después de estas dos líneas, pegar el header.php de tu theme.

Paso 10

Antes de poner:

Este es el segundo de los tres archivos que necesitamos para ejecutar Plogger.

Paso 11

Ahora, despues de donde copiaste el archivo de cabecera (header.php) pega el código de tu index.php de tu theme original.

Paso 12

En la parte donde está la información de las anotaciones, (normalmente contenidas en un div que suele ser div class=”entry” o div class=”post”) borra todo lo que está dentro y dejalo pelao. Dentro de éste div vacío escribe ésto:

Éste es el código final de Plogger, donde aparecerá el contenido de la galería.

Paso 13

Guarda este nuevo archivo como index.php y subelo a tu directorio de Plogger. Para mí era /gallery.

Paso 14

Mira a ver que tal te ha quedado. bonito verdad ?

Si os surge algún problema o preguntas, ya sabeis, aquí estamos, éste tutorial (que es casi una traducción en inglés del original) lo podeis encontrar en esta dirección, gracias a él conseguí montar Plogger en WordPress después de mucho buscar.

Read more | Comments (4) | November 7th, 2006