[Gráficos] U Design [1 Clase]


 
 
Herramientas Desplegado
  #1  
08/04/2012
Predeterminado U Design [1 Clase]
Hola compañeros, está vez vengo con la Escuela de User Bars, para dar mis conocimientos a todos ustedes, y más que nada puedan hacer sus Bars de una forma intermedia y espectacular.

Lista de Alumnos


1.-@Javi4315?
2.-@Reddo
3.-@Javimo
4.-@Balziken
5.-@†ruben†
6.-@Pokemati
7.-@lokitodark
8.-@Charlos
9.-Pollito3d
10.-@Peter-Gef
11.-@Metalero
12.-@Shika
13.-@Sherox
14.-@Cheve_X
15.-@MenuAvatar98
16.-@yayomola
17.-@ssoq?oz ?p
18.-@Foxz
19.-@Wey


Antes que nada, necesitan una herramienta de apoyo, la cual es la que yo utilizo, seguramente muchos la conocen, pero he visto que no saben usarla, ni sus funciones tampoco.
He visto que también las hacen con programas Online, pero en está escuela vamos a mejorarlas!
AmitySource User Bar Generator
Así es, ¿Para que matarse el tiempo haciéndola desde 0, cuando la puedes generar tu?
El link de Descarga está más abajo

¿Qué herramientas necesitaremos?
"AmitySource User Bar Generator" - Desde la 1 clase, será utilizada.
"Photoshop" - Desde la 7 clase, será utilizada (Para los que no puedan descargarla, se omitirá esta clase, son solamente 2, solo será utilizado para agregar más imágenes y transparencia, si así lo desean.
"Paint"
Al igual que photoshop, para añadir más imágenes.
"Imageshack- PhotoBucket"
Aceptare trabajos que estén únicamente subidos en esos servidores.

Okey, para la primera clase, la dejare en un Spoiler, para no hacer mucho espacio en el tema.

Ver Primera Clase


Vamos a descargarnos el AmitySource User Bar Generator "Link más abajo", y vamos a instalarlo en nuestro ordenador (Soportado para cualquier PC, incluso lentas)

Abrimos nuestro programa y veremos distintas funciones:
Parte superior- Text&Colors, Effects, Overlay Image y Save & Open.
Bien ahora explicare sus funciones:
Text & Colors: Está función nos permitirá agregar un texto cualquiera, mover y centrar la posición que
nosotros queramos. Tenemos 4 flechas que nos permitirán mover nuestro texto.
Text X Position: Mover el Texto de Derecha e Izquierda.
Text Y Position: Mover el Texto de Arriba a Abajo.

Ahora tenemos los colores: "Esta parte es muy importante, ten cuidado de que los colores no se pierdan"

Color 1: Superior o Inferior
Color 2: Superior o Inferior
Básicamente tenemos un botón que dice Horizontal, podemos cambiar las posiciones de nuestros colores seleccionados.
Swap: Cambia de lugar los dos colores.
Ahora, está parte es algo difícil, por que no se trata de solamente poner los colores y ya, si no de que
combinen perfectamente los colores, una buena combinación sería rojo con negro, azul con negro, verde con negro, ect.
Pero existen muchas más. El secreto está en como quieres que luzca.
"Abajo dejo los códigos para los colores"
---------------------------------------
Parte 2
Ahora vamos con los effects:
Tenemos lo que son los Pattern Opacity y Glass Opacity

Pattern Opacity: Su función es agregar efectos a la bar, ya sean rayas o rombos.
Glass Opacity: Su función es agregar un poco de especie de neblina o como le quieran llamar, a la Bar, ya sea en distintas opciones.

Ahora les saldrá una lista en Pattern Opacity, las que yo escojo son 4x4 LR Diagonal, 4x4 RL Diagonal y Dost Pattern.
En Glass Opacity hay distintas opciones, la más usual que uso es la de Elise Bottom, pero pueden elegir la que crean más cómoda.
Tenemos más abajo una opción de Add colored Border, les saldrá un cuadro en negro, para añadir una linea debajo de la bar, "Aconsejo la de color negro" tal y como está.

Después nos encontramos con Add Glow Effect: Añadira una especie de niebla alrededor de la bar, pueden usarla si gustan, pero por mi preferencia la Desmarco.
------------------------------------
Parte 3
Overlay Image: Añadir una imagen a la Bar, "Solo podrán añadir una imagen en formato JPG", si desean añadir más, véase la clase de Photoshop+Paint "Aún no llegamos a esa clase"

Ahora nos encontramos con un botón Choose, elejid la imagen que querais "Transparente", y marcar la casilla Add image.
Del otro lado, nos encontramos con Opacity, eso ya depende de como quieran que se marque la imagen.
Luego nos encontramos con dos Image Position pero con diferentes funciones:
Image position: Centra o mueve la imagen a donde quieras.
Image Zise: Agranda la imagen en distintas direcciones.
Dos botones de Reset, para para omitir los cambios.

Una vez listo el proceso vamos a Save&Open, en ella encontramos distintas operaciones:
New: Añade un nuevo proyecto.
Open: Abre el Proyecto existente.
Save: Para guardar tu proyecto existente.

Save" Coloreado en Azul": Para guardar nuestra bar en formato JPG, "Quizás en PNG"

Eso es todo el tuto que hay de UserBar v2.2. La tarea se muestra abajo, junto con la descarga del programa.



Bien ahora ya sabemos utilizar el programa, ¿Qué sigue?
Demostrar lo aprendido en el tuto, y la tarea es la siguiente:

1 Claseeberán hacerme una bar de lo aprendido, OjO: SIN IMAGEN, puro texto, colores demás etc.
Entregaron Yayomola,lokitodark,balziken,Rikku,Wey,Giga,truben t,Cheve_X,Javi4315?,Sherox,Shika
Pokemati

¿Por que sin imagen?
Para ver como progresan en su creatividad, usando combinaciones de colores
La próxima Clase usaremos la imagen.

¿Como calificare?
Eso depende de como se vea a la vista la bar:
  • Tareas- 45%
  • Puntos Extras (Photoshop) 5%
  • Exámenes 50%

Alumnos eliminados:
Pollito3D
Peter-Gef
Wey

Las tareas las pueden entregar cuando sea, siempre y cuando no se pase del 1 examen.
Eso es todo, a partir de hoy vamos a probar lo aprendido del 1 tuto.
Las tareas deberán ser entregadas en esté mismo post, no MP.
Si tienen alguna duda, que sea por Mp, en el post no.

Se despide, Gender





  #2  
08/04/2012
Predeterminado RE: U Design [1 Clase]
Aquí esta la Tarea #1, espero que esté bien



Una duda que tuve al hacer la UserBar, en color ¿Se puede poner por hexadecimal?, porque solo vi RGB y lo de HLS que no se lo que es XD

Saludos, se despide yayomola.


Edito:
Ya hice una nueva UserBar, espero que esta esté mejor

  #3  
08/04/2012
Favorito RE: U Design [1 Clase]
Bueno ya termine la tarea aqui esta:

pd:aqui lo corregi gender






  #4  
08/04/2012
Predeterminado RE: U Design [1 Clase]
Aqui mi tarea No hagas caso a mi MP, ya se solucionó todo.


Saludos ^^
  #5  
08/04/2012
Predeterminado RE: U Design [1 Clase]
  #6  
09/04/2012
Predeterminado RE: U Design [1 Clase]
Aqui esta mi tarea , espero que este bien :
  #7  
09/04/2012
Predeterminado RE: U Design [1 Clase]
Haber no, creo que ninguno de ustedes me ha comprendido, antes que nada se tiene que remover al completo en "Effects" "Pattern Opacity" y Glass Opacity"

Yo decía algo así:


Nota:
Nunca dejen al 100% los "Pattern Opacity" y Glass Opacity" como se muestra en la imagen, solo un 25 o 15%.

Ahora los voy a motivar a todos ustedes:







Las tres Bars mostradas están hechas por mi. "La primera bar se tiene que hacer con el Photoshop y el Paint"

Vamos se que pueden hacer lago mejor, así que inténtelo, ustedes pueden.
No calificare hasta que haya resuelto eso.
Y @yayomola ¿Te refieres así? 3fab00, en hexadecimal, pues no sé a que refieres.

Todas sus dudas deben decirlas por MP, no aquí, aquí solo se entregan trabajos.

A los demás Usuarios, ¡Hagan sus Tareas! tienen hasta el examen que tienen.
  #8  
09/04/2012
Predeterminado RE: U Design [1 Clase]
No chicos no me están entendiendo, lean de nuevo una vez mas
el post principal, "Los colores deben ser bonitos y deben de combinar",
no abusen del Pattern Opacity y del Glass Opacity.
Como dije, lean y lean hasta que se les quede grabado.
Los 3 primeros que me impresionen, ¡No hacen examen"
  #9  
09/04/2012
Predeterminado RE: U Design [1 Clase]
bueno esta es la final,


bueno esta es la mejor que he hecho .
  #10  
09/04/2012
Predeterminado RE: U Design [1 Clase]
Felicidades! vas por buen camino @Giga



Lean este pequeño spoiler, es importante:

Aclaración


Yo entiendo que cada uno tenga sus gustos, que cada uno
pueda tener como usar sus cosas, entiendo lo que dices.
Pero un buen color y una buen control de opacidad lo hace
ver más bonito.
Ahora quiero que desmarques la casilla add glow effect,
quiero que pongas en el primero color un color azul, y el 2 uno negro.
Ahora desmarca horizontal- en pattern opacity selecciona hasta la 2 raya
y aplica cualquier efecto, ahora Glass opacity, igual hasta la 2 raya
aplica la que más te guste y dime: ¿Que diferencia encuentras en la tuya y en la nueva?
Solo trato de ayudarte, quiero que te expreses, pero los colores hazlos que se noten, de eso se trata la 1 clase.


¡Alumnos hacer sus tareas, estoy seguro de que aprenderán mucho!

Alumnos que entregaron tarea:
@Giga

Los demás deben leerse de nuevo el post o visualizar la bar de Giga, para que mejoren los effects
 

Herramientas
Desplegado

Permisos para publicar mensajes
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los BB code están Activado
Los Emoticones están Activado
El código [IMG] está Activado
El Código HTML está Desactivado
Trackbacks are Activado
Pingbacks are Activado
Refbacks are Desactivado



Extra
Estilo clásico
La franja horaria es GMT +1. Ahora son las 01:39.