INFORMATICA Y OCIO

Ottoniel · Ultima edición por Ottoniel el Jue Feb 01, 2007 11:45 pm; editado 8 veces

Creando un Autoplay desde cero
By Ottoniel

Introducción:
Bueno en este pequeño tuto aprenderemos a crear nuestro propio autoplay desde el diseño hasta el programa.exe ya funcionando. Espero y esto les sea útil en un futuro.

Materiales:
Adobe Photoshop (Diseño)
Multimedia builder (Funciones)

Nivel
Medio

Paso 1:
Primero que nada creamos un documento a 640X480 transparente (El documento lo hago así de grande solo para tener más comodidad al trabajar si gustas puedes modificarlo). Ya hecho esto creamos un rectángulo redondeado con un radio de 6xp. El documento nos debe quedar más o menos así.

Ahora nos vamos a Añadir estilo de capa

Añadimos los siguientes valores:

Echo esto nos debe quedar más o menos así:

Paso 2
Ahora creamos una capa encima de la que ya tenemos y nos debe quedar así:

Ahora presionamos la teclaCtrl y damos clic sobre la capa que tenemos abajo que es donde esta nuestra futura interfaz. Ya listo esto nos vamos a Selección, luego Modificar y por ultimo Contraer y le damos un valor de 2px
y si todo nos sale bien el documeno se verá así.

Ahora que tenemos seleccionado esto nos vamos a Herramienta degradad

. Luego proseguimos a configurar dejándolo de esta más o menos así:

Paso 3
Ojo no quitas la selección que has creado de ser así tienes que repetir el paso dos. Ahora nos ubicamos en la capa de arriba y aplicamos el degradado quedandonos más o menos así.

Echo nos Ubicamos en herramientas Marco elíptico

.Ahora creamos un trazo en el medio de nuestra ventana, más o menos de esta manera.

Ahora presionamos clic con el botón secundario de mouse, nos vamos a calar y le damos un valor de unos 35pixeles. Damos aceptar y presionamos la tecla Supr o Delet Según el idioma de nuestro teclado. Repetimos esto hasta lograr más o menos esto.

Paso 4
Muy bien ahora agregamos en la parte superior de nuestro futuro autoplay un Rectángulo redondeado con un radio de 6px. De manera que el documento nos quede más o menos así.

Bien con esto ya preparado agregamos estilo de capa con los siguientes valores.

Aplicado esto se tiene que ver más o menos así:

Bueno para no hacer más grande el tuto porque por lo visto será muy largo, ahora le agregamos un logo a nuestro gusto o texto en mi caso yo agregué esto y me quedo así.

Paso 5
Bien ahora agregaremos los botones que es donde estarán las categorías o nombres de los programas instalar, bueno como ustedes gusten.

Ahora creamos un Rectángulo redondeado a de manera que se vea más o menos así.

Ahora tomamos la capa donde está el rectángulo y nos vamos al menú Capas, luego Renderizar/Capa. Esto hará que nuestro rectángulo sea editable, de manera que lo podamos cortar. Ya logrado esto cortamos en la parte superior del rectángulo de manera que nos quede algo como esto.

Ya con este pequeño logro, agregamos Estilo de Capas, con los siguientes valores.

Con esto logramos algo más o menos así.

Paso 5
Ahora presionas tecla Ctrl y das clic la capa donde tienes el rectángulo que será un futuro botón y se debe ver más o menos así.

Ahora que tenemos nuestra selección nos vamos al menú Selección luego a Modificar/Contraer y le damos un valor de 2pixeles y nos debe quedar algo parecido a esto.

Ahora que ya tenemos nuevamente otra selección creamos una capa encima de la que tenemos el rectángulo, ojo no quites la selección porque si no tendras que hacerla de nuevo. Bien ahora nos vamos a degradado y lo configuras de esta manera.

Echo todo esto aplicas el degradado de abajo asía arriba y nos quedará de esta manera más o menos.

Ahora recortamos la parte inferior del degradado para lograr esto.

Paso 6
Bien ahora que ya hemos creado el primer botón de nuestra interfaz para el futuro autoplay necesitamos crear otras similares, para lo cual solo copiaremos las capas con las que hemos formado nuestro botón, pero para no liarnos mucho con las capas, nos ubicamos debajo de la capa donde esta ubicado el rectángulo azul en cual esta nuestro logo y creamos Un conjunto nuevo en donde meteremos las capas del botón[b]. Para crear el conjunto nos vamos a donde está un pequeño icono con una carpeta como lo demuestra la imagen

Aclarado lo anterior creamos el conjunto y lo nombramos [b]Boton 1 nuestras capas se verán más o menos así.

Luego de esto introducimos las dos capas con las que formamos el futuro botón dentro del conjunto, para esto solo las arrastras hasta donde esta el icono de la carpeta. Y nos quedará de esta manera.

Paso 7
Teniendo ya todas las capas, damos clic en el icono de la carpeta, esto hará que todas las capas sean seleccionadas al mismo tiempo como si fuecen una sola y las ubicamos de esta manera.

Nuevamente damos clic en el conjunto y ahora nos vamos a Capas/Duplicar conjunto de capas. Esto creará otro conjunto idéntico al que ya tenemos y por lógica tendremos un botón nuevo, ahora solo movemos el conjunto nuevo quedándonos de esta manera.

Repetimos la acción hasta lograr todos los botones.

Con esto ya casi tenemos nuestra interfaz casi completa.

Paso 8
Ahora solo ajustamos la parte de abajo, para esto solo creas un nuevo grupo con la ventana, el rectángulo grande (el de color blanco XD), junto con el efecto gris y lo ajustamos de modo que la parte de abajo quede más junta con los botones, tal y como se ve en la imagen.

Finalmente solo le agregamos texto y elegimos las categorías que más creamos convenientes. Creo que no hace falta explicar como agregarle texto y si es así solo posteen el ¿Cómo agrego texto? Para modificar el post. Bien en mi caso yo he agregado esto y me ah quedado así.

Paso 9
Ahora ajustaremos el lienzo a nuestra interfaz, para esto tomamos la Herramienta Marco rectangular o presionamos M que es su atajo de teclado y hacemos una selección bastante ajustada a nuestra interfaz tal y como se muestra en la imagen.

Ahora nos vamos al menú Imagen y finalmente le damos en Recortar y con esto ya nuestro documento estará ajustado a la ventana. Es importante tomar en cuenta el recorte ya que esto nos servirá para crear la ventana en Multimedia Builder y así el autoplay quede mas ligero.
Finalmente creamos una capa al final de todas y la rellenamos de color negro. De manera que nos quede el documento así.

Paso 10
Bueno esto ya queda a opción de cada quien, esto lo estoy haciendo solo para trabajar un poco más ordenado. Bien aclarado esto nos vamos a Disco local C, estando ahí Creamos una carpeta con el nombre Autoplay, dentro de esta carpeta creamos otras dos. La primera con el nombre de Ventana y la Segunda con el nombre de Botones. En estas carpetas es donde guardaremos las imágenes.

Esta es una muestra de cómo tienen que quedar el interior la carpeta Autoplay

Bien ahora guardamos el documento en formato png en la dirección que hemos creado. La cual sería C:\Autoplay\Ventana, y le damos el nombre de Ventana

En un futuro necesitaremos generar un recorte de acuerdo a la forma de nuestra ventana para que esto se nos sea posible en el futuro haremos lo siguiente:

1. Necesitaremos una imagen que represente toda nuestra ventana, de color blanco y fondo de color negro. Como no se como explicar muy bien esto les dejo una muestra de la imagen que necesitamos hacer.

Esta imagen tiene que ser identica y con las mismas medidas de la imagen de la interfaz.

2. Lograr esto es muy simple lo que tenemos que hacer es poner invisible las capas que están sobre el rectángulo blanco. Para poner invisibles las capas damos clic en el pequeño icono que tienen las capas en la parte izquierda tal y como lo muestra en la imagen.

Quitamos las capas que sean necesarias hasta que nos quede algo como esto.

Como se puede observar todavía tiene el borde Azul. Esto hay que arreglarlo XD, para arreglar esto modificamos el estilo de capa que hemos agregado y le damos los siguientes valores.

Atención
Estos erán los valores anteriores:

Recuerda muy bien estos valores ya que depues tienes que porner visibles todas las capas y dejar el docuemto tal y como estaba.

Valores nuevos

Ya logrado esto nuestro resultado será este:

Ahora solo lo guardamos en formato .png en la dirección de trabajo que es C:\Autoplay\Ventana y la nombramos Máscara.

Paso 11
Nuevamente ponemos visible todas las capas, cambiamos los valores del trazo por los anteriores y si todo nos sale bien dejamos la interfaz tal y como estaba. Para ponerlas visibles solo das clic donde estaba el icono del pequeño ojo.

Y con esto nuevamente nuestra interfaz se tiene que ver algo así

Paso 12
Muy bien ahora vamos a modificar los botones de nuestra interfaz, para esto damos clic en la pestaña que tienen los grupos de cada botón, esto hará que se desplieguen las capas que cada uno contienen y podamos modificar donde esta el rectángulo.

Bien tomamos la capa donde esta el rectangulo el cual es el que da forma al boton. Modificamos y agregamso algunos valores de la siguiente manera.

Si todo nos sale bien nuestro documento tiene que verse de esta forma. O bueno dependiendo de cual botón modificaste, ya que te puede variar el orden, pero de que un botón tienen que quedar en azul, tienen que quedar XD

Paso 13
Ahora tenemos que aplicar los mismos valores a cada uno de los botones pero para no nos matemos poniéndoles los valores uno a uno, buscamos el botón al que le modificamos los valores y Presionamos donde dice Estilo nuevo como se muestra en la imagen.

Luego te sale una ventana le das OK[/] y ya tienes un nuevo estilo creado.
Ahora solo lo buscas en los estilos por lo general te sale al final.
[b]Ventana de estilos

Se lo aplicas a cada una de las capas a modificar hasta lograr esto.

Y bueno como el texto queda un poco mal de color negro en mi opinión, solo lo cambiamos de color. En mi caso yo lo puse de color blanco con un pequeño borde gris, y me quede de esta manera. Ustedes lo pueden dejar al gusto.

Es todo por ahora. Y yo que pesaba que con un diseño que se ve simple no se me haría ten extenso el tuto XD. Pero bueno ya lo terminaré. Salu2
_________________

Moctezuma · Publicado: Mar Ene 30, 2007 11:40 pm **Título del mensaje**:

Excelente Ottoniel, lo que va hasta ahora esta más que bien, espero con ansia lo que falta, saludos.
_________________
. . . . :: WwW.MoctezumA.tK :: . . . . .

. . . . ..:: Mi Existencia No Sera En Vano ::.. . . . .
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

Dragon-Black · Publicado: Mie Ene 31, 2007 1:25 am **Título del mensaje**:

ya espero que lo completes Very Happy

_________________

Mi vida: Diseñador grafico, Diseñador web, programador php, html, css basico, aprendiz java
<? = "hola mundo">
<p>Hola mundo</p>
System.out.println("Hola mundo");
alert("Hola mundo");

Ottoniel · Publicado: Mie Ene 31, 2007 8:40 pm **Título del mensaje**:

Claro que lo voy a completar XD
_________________

malder · Publicado: Mie Ene 31, 2007 10:46 pm **Título del mensaje**:

Ottoniel, Mis felicitaciones un tutorial bien explicado y extenso, se agradecen tus aportaciones Wink

_________________
Un titulo descriptivo te da mayor posibilidad a encontrar una buena ayuda.
Por favor lee las normas

karlos! · Publicado: Jue Feb 01, 2007 4:13 pm **Título del mensaje**:

Exelente tutorial Ottoniel, estoy esperando con ansias la otra parte Very Happy

_________________

http://esCualquiera.net

LiquiD1988 · User destacando Registrado: 26 Nov 2006 Mensajes: 250

Continualo!!!! Queremos mas!! xD. Esta genial el tuto. Felicidades
_________________

<br>

Pagina Web del Clan de Counter Strike Source Lambda Team
www.lambdateam.com

IaM_SePia · Yo soy el foro Registrado: 07 Feb 2007 Mensajes: 833

Una pregunta, porque no hacen esto con programacion? (visual basic, java?)
_________________
Sólo hay 10 tipos de personas, las que entendemos código binario, y las que no...

dilton · Publicado: Vie Feb 16, 2007 7:52 pm **Título del mensaje**:

me gusta pero un poco largo
_________________

Blog de informatica -> http://elblogdedilton.blogia.com

Ottoniel · Publicado: Dom Feb 18, 2007 5:17 am **Título del mensaje**:

	Índice del Foro Foroz comunity :: Tutoriales photoshop	Todas las horas están en GMT + 1 Hora Ir a página 1, 2 Siguiente
Página 1 de 2