TUTORIAL DE DISEÑO GRÁFICO

Información antes de comenzar....

¿Qué voy a encontrar en este tutorial?
Primero de todo, bienvenidos a todos y todas al primer tutorial de Diseño Gráfico de Atomic.
En este tutorial, podrás aprender técnicas para comenzar e introducirte en el mundo del diseño gráfico.

¿Qué necesito?
Primero de todo, y lo más importante un Ordenador Personal.
Segundo, algunos programas de retoque fotográfico. Algunos de los más comunes son:
-   Paint Shop Pro
-   Animation Shop
-   Photoshop
-   Image Ready
-   Fireworks...
Hay muchísimos, pero con algunos de estos ya tendrás más que suficiente.

¿Cómo consigo estos programas?
Principalmente, para quedar bien... Comprándolos, pero como cuestan bastante dinero, pídeselos a algún/a colega.

El programa que se ha utilizado para hacer el tutorial, no lo tengo... ¿Cómo consigo hacerlo con los programas que yo dispongo?
Pues ves al Tópico de “Prácticas y Dudas” y pregunta si alguien sabe hacer lo mismo que el tutorial que deseas, pero con otro programa.

Tengo dudas, ¿Dónde puedo poner mis preguntas y que estas sean respuestas?
Todas dudas, que tengáis irán en el tópico Prácticas y Dudas,  así que en este tópico solo irán tutoriales hechos por los users, cualquier respuesta que no sea un tutorial aquí, será movida, o eliminada.

¿Cuál es el mejor tamaño para hacer una firma?
Sean, del tamaño que sean te pueden salir o muy bien o muy mal, solo hace falta paciencia, y dedicación. Así que es imposible decir un tamaño por esta razón y por que cada foro es diferente, en algunos te dejarán hacer firmas muy, muy grandes, mientras que en otro muy pequeñas.

En el caso de este foro, Atomic, se permiten firmas de entre 500 – 575 píxeles de ancho y 150 – 175 de alto.

¿Dónde puedo encontrar imágenes para ponerlas en mis firmas?
Pues en algún buscador que pueda buscar imágenes... Aquí hay unos cuantos...
http://www.google.es
http://www.lycos.es
http://www.wanadoo.es
http://www.altavista.es

¿Dónde puedo encontrar Fuentes True Type?
Hay páginas en las que puedes encontrar muchas fuentes y de las más variadas, aquí hay algún ejemplo:
http://www.fontreactor.com

¿Qué es una Fuente True Type?
Gracias a las fuentes, tienes diferentes estilos de letras con las que poder escribir por ordenador.

¿Cómo instalo una Fuente?
Para Windows XP: Inicio > Panel de Control > Fuentes

Abres la carpeta de “Fuentes”, y cojes la fuente que quieres instalar y la arrastras hasta la carpeta “Fuentes”.

¿Dónde consigo Brushes para mis dibujos?
Aquí hay muchas:
http://browse.deviantart.com/resources/app...wse&offset=1177

¿Qué son las “Brushes”?
Si gracias a las fuentes consigues escribir de formas distintas, se puede decir, que gracias a las Brushes consigues varios estilos para pintar, o para hacer trazados.

¿Cómo las instalo?
Como en cada programa es diferente, mejor será que se haga en un tutorial aparte.

Ya he hecho la imagen... ¿Cómo la puedo colgar en Internet?
Hay muchas páginas que te permiten subir tus imágenes a Internet, aquí tienes algunas...

http://photobucket.com
http://www.zippyimages.com/
http://www.imageshack.us/

O si lo prefieres, lo puedes subir a sitio donde también hacen hospedajes a páginas web:
http://www.iespana.es
http://www.lycos.es
http://www.miarroba.com
http://www.wanadoo.es

Entre otras... Te proporcionan bastante espacio para subir imágenes, así que con que crees una sola cuenta en alguno de estos sitios tendrás más que suficiente.

¿De quién es este tutorial?
Principalmente no tiene “dueño”, ya que todos participamos en él y lo hacemos para ayudarnos unos a otros, pero tampoco seas list@ y lo enseñes, o lo pongas en tu web, sin darnos crédito y llevándote todo el mérito.

Bueno, creo que con esta pequeña introducción hay más que suficiente para comenzar ha aprender.
Pero recordad que este tópico es SOLO para tutoriales, está PROHIBIDO poner respuestas tipo: “Hey buen tutorial XXX” (XXX = nick del usuario que sea), o cosas por el estilo, si tenéis dudas, sugerencias etc... Las ponéis en el tópico de “Prácticas y Dudas” o sino un MP a la persona.

Y por último que se me olvidaba, había pensado que podíamos numerar los tutoriales, por ejemplo, la persona que haga el primer tutorial que ponga el nombre del tutorial seguido de un número entre paréntesis. Así los usuarios podrán poner “Práctica del Tutorial X” (X = El número del tutorial).

Para los que queráis saber de dónde surgió la idea, y como le dimos forma, id aquí.


Muchas Gracias... ¡A dibujar!





Tutorial Básico (No. 1)

Abrir un archivo nuevo.
Programas: La mayoría de los programas se abren de la misma manera. Así que utilices, el que utilices, vas a poder seguir el mismo método.

1.   Archivo > Nuevo
2.   Luego seleccionas el tamaño de la imagen.
3.   Y por último elige si quieres que el color del lienzo sea de color, o transparente.

Cómo Añadir fondo de un color.
Programas: Como en el caso anterior, se pueden utilizar en la mayoría, ya que son conceptos muy básicos que la mayoría de los programas utilizan.

1.   Abre un archivo nuevo.
2.   Y si el color del fondo que elegiste no te gusta, coge la herramienta del cubo de pintura, es la herramienta más útil para rellenar lo máximo posible en el mínimo de tiempo.

Nota: Alomejor, a algunos no os sale la herramienta del cubo de pintura a la primera, para que aparezca haced lo siguiente:
Photoshop: Vais a la herramienta “Degradado”, hacéis clic con el botón derecho, y saldrán dos opciones, una que es la que ya tenéis seleccionado por defecto (que es “Degradado” y luego otra que es “Bote de Pintura”, pues seleccionáis esta última, y listo.

Añadir texto a la imagen.
Programas, absolutamente todos tienen esta función, todavía no he visto ninguno con el que no se pueda.

1.   Abrid el archivo en el que queréis añadir el texto.
2.   Luego id a la herramienta “Texto” (siempre se simboliza por una “A”), así que haced clic en ese icono.
3.   Vais al lugar en el que lo queréis insertar, y haces otra vez clic. Y os saldrá como un recuadro en el que podéis escribir.
4.   Un vez que hayáis escrito, si queréis cambiar las propiedades:
En “Photoshop”: Arriba os saldrán las propiedades de Tipo de letra, tamaño, centrado etc...
Mientras que con el  “Fireworks”, os saldrán abajo todas las propiedades de manera ordenada, y escrito qué es cada cosa.

Como añado una imagen a la firma.
Se puede hacer con todos los programas, pero no todos tienen la misma dificultad yo ahora lo pondré de las dos maneras que sé, con Photoshop y Fireworks si luego alguien quiere añadir una forma, que me envíe un MP y lo edito.

Con Fireworks

1.   Abrimos el archivo en la que vamos a poner todas las imágenes.
2.   Ahora vamos a Archivo > Importar y busca las imágenes que quieres poner.
3.   Y haz lo mismo hasta que consigas que estén todas las imágenes.

Con Photoshop

1.   Abre el archivo en la que vamos a poner todas las imágenes.
2.   Ahora le vamos a Archivo > Abrir... Y traemos la imagen que queremos.
3.   Haz lo mismo con todas las imágenes que quieras importar
4.   Y por último para metedlas en el archivo final, clikas en una, y la arrastras hasta conseguir meter la imagen dentro del archivo deseado.

Como borrar el fondo de la imagen.
También se pueden hacer con casi todos los programas, pero yo me voy a casar en los que yo acostumbro a utilizar. Que son el Fireworks y el Photoshop.

Con Fireworks
1.   Abrimos el archivo.
2.   Si no pusimos las imágenes las añadimos ahora.
3.   Una vez que ya las tengas, coges la herramienta de la goma de borrar (no tiene pérdida por que es una goma, normal y corriente). Y clikamos en una de las imágenes que quieres borrar.
4.   Una vez que esté seleccionada, cogemos la goma como habíamos dicho, y ¡a borrar se ha dicho!

Nota: A veces alomejor puedes tener problemas y no ver muy bien, para eso agranda la imagen. Clic en el botón derecho > Aumentar y Reducir > Y escoge una cantidad. No hay que ser exagerado y elegir un 1000% con un 200 o un 300% tendrás suficiente.

Con Photoshop
1.   Abre el Archivo.
2.   Coge la herramienta “Lazo Poligonal” (Recuerdo, si no os aparece, y os sale “Lazo” solo, clikad con el botón derecho y seleccionad “Lazo Poligonal”).
3.   Ves cortando alrededor de la foto, intenta tener buen pulso, y no te comas la imagen.
4.   Cuando tengas unas especies de “hormiguitas” (o rayitas que se mueven alrededor de la imagen). Haz clic con el botón derecho y selecciona “Hacer Trazado en uso”. Pon los parámetro que quieras, pueden variar según la imagen, así que ves probando.
5.   Y por último, clikas en la imagen, y la arrastras hasta el archivo de imagen final, en el que quieres que esté.



Bien, este ha sido mi primer tutorial de cosas básicas ^___^ Espero que os sirva a los que estáis comenzando, yo no tuve la oportunidad que me explicaran así que lo he intentado hacer lo mejor posible.
Recordad, prácticas y dudad al otro tópico.

Prácticas y Dudas

¡Hasta Otra!

EFECTOS ESPECIALES 1

Programa: Photoshop

Necesitais un dibujo y el programa, claro XD

Primero abre el dibujo al que le queras aplicar lluvia.
Ponlo en modo Color RGB (Imagen-->modo-->color rgb)
Crea una nueva capa (Capa-->Nueva capa) y rellenalo de color negro u otro color que sea oscuro.
Aplica un filtro de ruido (filtro-->ruido-->añadir ruido). ponlo en monocromatica y gaussiana. aplica la cantidad que desees, pero advierto que a ams cantidad de ruido, mas lluvia.

Ahora debes ir a filtro-->desenfocar-->desenfoque de movimiento, marca unos 40 o 50 pixeles, y el angulo sera el que siga la lluvia en su direccion (recomiendo unos 48º)
Vete a la ventana de capas y dale al modo aclarar, ahora las zonas negras habran desaparecido.

Luego vete al cuadro de dialogo de niveles (imagen-->ajustes-->niveles) y desplazalo hasta conseguir la lluvia


RESULTADO (este es un ejemplo mas claro que el dibujo que estaba usando yo, porque el fondo es mas oscuro, asi que ya sabeis)

TUTORIAL IMAGENES GIF

Programa Photoshop e Image Ready

Bien, como he visto que hay gente que no sabe hacerlos, aquí estoy yo para ayudarles

Lo primero será tener una imagen que queramos convertir en gif animado abierto en photoshop.
1
A continuación, en la barra de opciones de trazado (pincel, selección..ya sabes a que barra me refiero) hay un dibujo que indica el paso a image ready, haz clik y espera a que se abra el programa.
Ahora debes ir a Ventana-y activar Animación
2
Ahora entra en la pestaña de capas (igual que en photoshop) duplica la capa de la imagen y en ella haz la modificación correspondiente (si son varias, haz cada modificación en una capa diferente)
Luego, en la ventana de la animación, verás el dibujo. Para crear la animación hemos de ir paso por paso: oculta o activa als capas correspondientes para ver el 1º paso. Luego, en la ventana animación pulsa el botón de duplicar, y aparecerá otra vez el dibujo, aora oculta-activa las capas para que se vea el siguiente paso (la imagen de antes+la modificacion), vuelve a duplicar..así hasta que acabes la animación.
3
Luego pasaremos a una etapa opcional, suavizar la animación, para que quede más natural. Para ello pulsa uno a uno cada "cuadrito" de la ventana animación y luego dale al botón que se indica en la imagen que os muestro(intercalar). Saldrá una ventana con opciones, en ella elegirás los pasos intermedios que habrá (yo suelo poner 3) y cuando termines...
4
Paso penultimo e imprescinfdible: En cada "cuadrito" de la animación has de marcar el tiempo en el que ese dibujo aparecerá. Yo pongo por cada paso 0,1, excepto en el último, que subo a 1 o 2 segundos
5
y ahora--> archivo-->guardar optimizado
6
ponle titulo y ve a verlo *o*
resultado

1. Kuro-chan, este tema no sirve para dejar comentarios, si quieres decir algo opiniones  o dudas debes escribirlos en el post de al lado de "Dudas Y Prácticas" Si no esto se llenaria de desvios.

2. Si que he puesto como es la foto al principio.
Así que por favor, no dejemos aquí más comentarios.    

Tutorial: Hacer firmas con animaciones (GIF)

Programas: Animation Shop 3

Vaya un tutorial más, eh... ^__^ Bueno, hacia tiempo que queria hacer firmas de este tipo y por fin encontré un tutorial (que entendí, ¡¡¡weeee!!!) y bueno ahora os lo voy a explicar a vosotros.
Se trata de en una firma o imagen sin movimiento, se le pueda acoplar una pequeña animación de una imagen en gif (con movimiento, vamos). En todo caso si no os queda muy claro, mejor será que comenzemos y lo probéis por vosotros mismos.

En mi caso utilizé esta firma: Firma de prueba
Junto a este gif: Gif de prueba

Entonces, una vez que ya tenemos lo anterior, podemos comenzar.

El primer paso es abrir el Animation Shop 3 (normalmente viene con el Paint Shop Pro). Y entonces abrimos la firma y el gif.

[Imagen] Paso "huan"

Entonces ahora nos vamos con gif, y contamos cuantos fotogramas tiene. Para eso desplazamos la barra del gif hasta el final y clikamos en el último fotograma. En mi caso Tiene 56 fotogramas .

Ahora vamos a la firma, y la duplicamos tantas veces hasta tener el mismo número de fotogramas que en el gif. [Imagen] Paso chu

Para duplicar, simplemente clikemos en la última imagen (estamos en la firma, eh, no en el gif) y pulsamos con el botón derecho y nos saldrá un submenú, entonces clikamos en duplicar, como podéis ver en la imagen anterior. En caso de que os paséis hacéis un clik normal en el último fotograma y pulsais la tecla "suprimir".

Ahora, seleccionamos la ventana de la firma y vamos a: "Editar > Seleccionar todo"
Luego seleccionamos la ventana del gif y vamos a: "Editar > Seleccionar todo", y ahora "Editar Copiar".

Volvemos a la ventana de la firma y presionamos "Control + E" Entonces la ventana de la firma te saldra el gif (justo al lado con el puntero del ratón), entonces lo mueves con el ratón hasta colocarlo en el lugar que quieras.

Ahora hacemos click con el botón derecho y nos vamos a "Propiedades de marco" y escojéis una velocidad adecuada a la imagen, o según la velocidad que tenéis pensada, y le damos a "Aceptar" (no os preocupéis si no es lo que queréis, podéis modificarlo luego).

Volvemos ha hacer click con el botón derecho y vamos a "Porpiedades de animación" y lo modificáis según tengáis pensado.

Ahora si lo queréis ver váis a "Ver Animación" y veréis como os ha quedado el blend. ^__^

Por último vamos a: "Archivo > Guardar como > ... " Ponéis el nombre y guardáis como GIF, escojéis la calidad (media, por que no estropea demasiado la imagen y será más rápida de cargar). Clikáis en aceptar y listo. ^__^

Y ahora cuando suba lo que me ha salido a mi editaré y lo pondré.

EDITADO:

TUTORIAL: BORDES DE TEXTO
PROGRAMA: MACROMEDIA FIREWORKS


Bueno, empezemos:

Bueno, primero para insertar el borde debes haber escrito lo que querias.
Para que te aparezca la opcion de borde, pincha aqui:

http://www.jotapeges.com/v5//out.php/i12373_Dibujo.bmp

Entonces te aparecera esto aqui:

http://www.jotapeges.com/v5//out.php/i12382_Dibujo2.bmp

Y pinchas te aparecera una ventanita com muchos colores. Si quieres un borde normalito como este:

http://www.jotapeges.com/v5//out.php/i12452_Dibujo3.bmp

Pero si queres unos bordes mas atrevidos, pincha en el boton que esta de bajo de los cuadraditos de colores.

Te apareceran:
Basic
air Brush
Calligraphy
Charcoal
Crayon
Dashet
Felt tip
Oil
Pencil
Watercolor
Random
Unnatural.

Yo lo tengo en ingles, espero que lo hayais entendido bien.




 

Tutorial: Efecto rayado
Programa: Photoshop

Hola, cuánto tiempo! Esta vez vengo para enseñaros cómo hacer un efecto rayado


Chulo, verdad? Vamos allá!

Primero abre la imagen en la que quieras poner el efecto (Archivo - Abrir) y aségurate de que es del modo RGB (Imagen - Modo - RGB).

Ahora duplica la capa (Capa - Duplicar Capa o Ctrl+J).

Seguimos; ponemos en la nueva capa un desenfoque de movimiento (Filtro - Desenfocar - Desenfoque de Movimiento) y elegimos el ángulo y la distancia del desenfoque


Para imágenes de tamaño mediano recomiendo poner de distancia 82 píxeles, pero para imágenes pequeñas como un avatar es mejor poner una cantidad menor, y para imágenes muy grandes poner una cifra mayor

Por último, vamos a la ventana de capas y en la capa que hemos puesto el efecto le ponemos el modo que queramos. Yo recomiendo Superponer, pues suele funcionar muy bien, pero puedes poner el que tú quieras



Puedes postear tus dudas y prácticas sobre los tutoriales aquí ^_~ Hasta el próximo tutorial!

Hi!

Tutorial: Tentáculos 3D
Programa: Photoshop

Bien, ahora toca aprender a hacer unos Tentáculos en 3D sangrientos. Aquí los pasos:

1) Abrimos una imágen de 300 x 300 y fondo color #B9CCD9:
http://img88.imageshack.us/img88/2370/16ym.jpg

2) Hacemos una capa nueva (Capa -> Nueva -> Capa) sin ponerle ningún color:
http://img88.imageshack.us/img88/6176/24yp.jpg

3) En la Capa 1, hacemos un rectángulo como el de la siguiente imágen y lo coloreamos de negro:
http://img88.imageshack.us/img88/7484/32jd1.jpg

4) Creamos una capa nueva (Capa -> Nueva -> Capa) y tampoco le ponemos color. En la Capa 2, coloreamos el mismo rectángulo (o sea, NO se des-selecciona el otro rectángulo) de color blanco:
http://img88.imageshack.us/img88/925/41ax.jpg

5) Vamos a Filtros -> Desenfocar -> Desenfoque Gaussiano y le ponemos 6 píxels de radio.

6) Pulsamos Ctrl + e para unir las dos últimas capas y deseleccionamos pulsando Ctrl + d.

7) Ahora toca ir a Edición -> Transformar -> Distorsionar y creamos esta imágen:
http://img88.imageshack.us/img88/6800/58te.jpg
(Trás hacer esto, des-seleccionamos el "Tentáculo")

8) Trás esto vamos a Filtros -> Distorsionar -> Proyectar y le ponemos la forma que queramos a nuestro tentáculo. En mi caso, algo sencillo:
http://img88.imageshack.us/img88/8489/60mx.jpg

9) Ahora, tenemos que Plastificar nuestro Tentáculo (Filtros -> Artístico -> Plastificar) y poner estos valores:
- Intensidad: 9
- Detalle 9
- Suavizado 2
*Nota: Según el tamaño del tentáculo, hay que modificar los valores*
Y quedará algo así:
http://img88.imageshack.us/img88/3677/78ya.jpg

10) Ahora tenemos que darle sombra paralela (Capa -> Estilo Capa -> Sombra Paralela) y poner los valores IGUALES a esta imágen:
http://img88.imageshack.us/img88/8619/87ue.jpg
Y nos quedará algo así:
http://foroz.mildescargas.com/tutosps/tentaculos/sombra.gif

11) ¿Ya va quedando bien no?
¡Ahora, toca la parte artística en la que puedes soltar tu rabia a pinceladas!
Bajar estos brushes: Angry Blue Brushes

12) Cuando los bajemos, hacemos una nueva capa (Capa -> Nueva -> Capa) sin color y los brochazos los hacemos con color #A2171A
Aquí es la parte creativa. Con los brushes que bajamos antes, haz en la Capa Nueva lo que te apetezca, no pasa nada por que se salga el pincel.
http://img112.imageshack.us/img112/4319/90gh.jpg

13) Cuando tengamos todo listo y a nuestro gusto, vamos a la Capa del Tentáculo y pulsamos Ctrl dandole a la Capa a la vez, así se selecciona el contenido.

14) Sin hacer nada más, vamos a la Capa 1, la de los brochazos y vamos a Selección -> Invertir y damos a Supr para borrar lo que ha salido fuera.

15) Des-seleccionamos lo que hay y quedará algo así:
http://img112.imageshack.us/img112/4672/104pz.jpg

16) Ahora que tenemos el Tentáculo ensangrentado, tenemos que quitarle un poco de brillo. Vamos a Ajustes -> Brillo/Contraste y ponemos -25 en el brillo.

17) Después, vamos a Filtros -> Enfocar -> Enfocar.

18) Vamos a las opciones de fusion de la capa y cambiar el modo a "Luz Fuerte":
http://img112.imageshack.us/img112/4889/115bd.jpg
Y obtenemos algo estupendo para mi gusto:
http://img112.imageshack.us/img112/1899/125ry.jpg

Podeis hejar fluir vuestra vena artística y hacer varios tentáculos y, después, unirlos en una imágen a mogollón, esparcidos... Aquí la vena artística es lo que cuenta.

¿Que os ha parecido el Tutorial? Espero que os guste y sirva ^=^

By-By & ATTE: Beauty T.H.