¿Dudas, preguntas? ¿Quieres pedir un tutorial?
¡Deja tu comentario!
No olvides visitar el Canal de Youtube.
ADVETENCIA: por favor NO copien, distribuyan, ni guarden los tutoriales, si quieren compartirlos, pasen la dirección del blog, gracias.
¡Los comentarios son muy agradecidos!
DISEÑO
[Finalizado]
En este tutorial intentaré explicar algunas cositas básicas del photoshop y cómo utilizarlo.
Vamos a empezar con algo que es esencial que entiendas: las capas.
En photoshop se utilizan capas para trabajar, es decir que cada elemento que vayas añadiendo a tu diseño, será una capa, te lo puedes imaginar como una "pila de hojas", algunas trasparentes, otras recortadas, de distintos colores etc.
Cada capa que vayas agregando, tendrá un modo de fusión con las de abajo,
sería como el "tipo de papel", por decirlo de alguna forma.
puedes jugar con esto para crear distintos efectos:
Al lado de cada capa verás un ojito, al hacer click sobre él, podrás ocultar o dejar visible la capa:
debajo de las capas puedes ver algunos iconos muy útiles:
1- Enlazar capas. Es como poner dos capas a la misma "altura".
2- Estilo de la capa (agregar borde, sombra, etc.)
3- Crear una máscara.
4- Ajustes (brillo, contraste, etc.)
5- Crear un grupo de capas. Estos grupos son muy útiles si vas a utilizar muchas capas, y son una muy buena forma de organizarte.
6- Crear una nueva capa trasparente.
7- Borrar capa.
Al hacer doble click sobre la capa se te abrirá una nueva ventana, en ella puedes agregar distintos efectos a la capa, como borde, sombra, superponer un color, etc. a esto lo llamamos estilo de la capa.
Al hacer doble click en su nombre puedes cambiárselo:
También puedes arrastrarlas para cambiarlas de orden, y seleccionar más de una capa a la vez, utilizando control y cliqueando:
y si son muchas, solo tienes que seleccionar la primera, y la última con shift, y todas las de en medio se seleccionarán automáticamente.
No olvides también la opción de opacidad, que es la que controla que tan traslúcida es la capa, y la de relleno, que controla la traslucidad de la capa, pero no de los estilos que le agregues, como hace la opacidad.
Ahora vamos a seguir con el espacio de trabajo y las herramientas, yo realmente no utilizo todas, y solo te explicaré las esenciales para diseñar, porque otras como por ejemplo la pluma son para dibujar y vectorizar, y realmente no nos sirve demasiado.
Si te fijas la mayoría de las herramientas tienen un pequeño triángulito, eso significa que la herramienta tiene otras variantes, y para verlas y seleccionarlas solo tienes que hacer click derecho.
1- Herramienta para mover la capa. Solo tienes que hacer click y arrastrar.
2- Herramientas de selección.
Tip: Si presionas shift mientras seleccionas con esta herramienta, la forma te saldrá perfecta.
3- Lazos de selección.
Lazo
Lazo poligonal
4- Barita mágica (selecciona colores de tonos parecidos) y selección rápida.
5- Esta que son como dos esquinas superpuestas, sirve para recortar. Solo tienes que seleccionar lo que te interesa, hacer doble click y se recortarán todas las capas tu trabajo.
6- Cuentagotas, que sirve para tomar muestras de color. Solo haz click en tu trabajo en el color que quieres escoger.
7- Pinceles.
8- Goma de borrar.
9- Cubo de pintura.
10- Herramienta de desenfoque.
11- Herramienta de texto horizontal y vertical.
12- Herramienta de forma personalizada, que te permite crear distintas formas.
13- Selección de color. Puedes seleccionar dos a la vez, uno principal y otro secundario.
Si utilizas la flechita marcada, se intercambian.
Ahora vamos a seguir con los menús desplegables, al verlos quizá te sientas un poco agobiada, pero realmente no hay tantas cosas, y yo solo te voy a mostrar lo que considero útil.
Empecemos con "archivo":
aquí esta lo típico, abrir, cerrar, guardar, guardar como... (estas dos opciones las utilizamos para guardar nuestro archivo como .psd, es decir archivo de photoshop, a capas, que puedes abrir y editar o seguir trabajando con él después), también tenemos la opción de guardar para web y dispositivos, para poder guardarlo como imagen y subirlo a Internet.
En edición:
encontramos las opciones de paso atrás, paso adelante, rellenar (es como el cubo de pintura), contornear (poner borde a algo que tengamos seleccionado), también podemos trasformar de distintas formas y girar nuestra capa... y crear un pincel (definir valor de pincel) o un motivo (definir motivo).
También podemos configurar nuestro photoshop, yendo a preferencias (o apretando control+k), se te abrirá una nueva ventana donde podrás configurar como más te convenga tu photoshop, cambiar el tamaño de la vista previa de las fuentes o incluso modificar el color de fondo de tu espacio de trabajo o el de los cuadritos que representan un fondo trasparente.
En "imagen":
nos encontramos con los ajustes (brillo, contraste, la intensidad del color, poner en blanco y negro, etc.) si los aplicamos desde aquí los ajustes se aplican directamente en la capa, y solo los podremos deshacer con el pasó atrás, pero también podemos crear una capa de ajuste, y de esa forma poder borrarlo más fácilmente si después ya no nos gusta el resultado, pero entonces no solo afectará a esa capa, si no a todas las de abajo.
Aquí también podemos cambiar el tamaño de nuestro trabajo, y si nos hace falta espacio podemos aumentarlo con el tamaño del lienzo. También tenemos la opción de "recortar" que es la misma que vimos antes, solo que aquí antes de recortar primero tenemos que seleccionar con otra herramienta.
Luego tenemos "capa":
aquí podemos crear nuevas capas, grupos de capas, crear las capas de ajustes de las que hable antes, y combinarlas, de 2 en 2 (seleccionando las que queremos combinar, y con "combinar capas" o control+E) o todas de golpe (combinar visibles o Mayús+control+E).
Después tenemos "selección":
aquí podemos seleccionar todo (o usar control+A), si seleccionamos algo y luego quitamos la selección podemos recuperarla, podemos invertirla, (es decir que se seleccione lo contrario a lo que tengo seleccionado en ese momento).
También podemos modificar la selección agrandándola o achicandola y redondeando las esquinas (en "modificar").
En "filtro":
podemos agregar todo tipo de efectos a nuestro trabajo, solo tienes que ir probando y viendo cuáles te gustan, te recomiendo que vayas a la galería de filtros y allí los pruebes.
El filtro de "licuar" es el tan famoso que se utiliza para aumentar y disminuir el volumen en ciertas partes de las fotos (por ej: aumentar el tamaño de los ojos).
"Análisis", "3D", y "vista" realmente no los utilizo, en "ventana":
puedes ver los archivos que tienes abiertos, y abrir o cerrar distintas "ventanitas" en tu phothoshop a los que llamamos paneles, como estos que yo tengo aquí:
los puedes arrastrar y mover a donde quieras, igual que las capas, las herramientas, solo tienes que hacer click y arrastrarlos a donde quieras, o acoplarlas unas con otras y colocarlos.
Puedes moverlos clikeas y arrastras en los puntitos o el nombre del panel:
Estos son los que yo suelo tener y utilizar:
1. El panel de estilo son estilos ya echos o que creas tu y guardas para poder aplicar directamente en las capas y textos, son para ahorrar tiempo y no andar poniendo cada ajuste uno por uno.
2. Las muestras son como una paleta de colores que puedes elegir con el cuentagotas.
3. Cáracter y parrafo sirven para poder poner negrita, cursiva, etc. al texto.
4. Las acciones, son como "grabaciones" de los pasos que haz seguido en photoshop para conseguir un efecto, y puedes reproducirlos en distintos trabajos.
5. Los ajustes de siempre (brillo, contraste...)
6. Ajustes para pinceles, para poder pintar con dispersion o otros efectos.
Por último esta "ayuda":
donde encuentras explicaciones y ayuda online en la pagina oficial de adobe, pero realmente no le veo mucha utilidad.
-Fin del tutorial-
[Finalizado]
En este tutorial intentaré explicarte que recursos hay para editar y cómo utilizarlos.
Vamos a empezar con los que puedes descargar e instalar en photoshop.
Dependiendo de que recurso sea, los archivos pueden ser de distintos tipos: .ATN, .GRD, .ASL, .PAT, .ABR, etc.
Puedes descargarlos gratis de internet desde sitios como devianart, pero ten cuidado de no descargar demasiados o de descargar recursos que no te resulten útiles porque podrías sobrecargar tu photoshop y tardaría mucho en abrir, y lo digo desde la experiencia, es mejor que solo tengas los que sueles usar, y elimines los que uses solo ocasionalmente, y solo los cargues cuando los necesites.
La mayoría de ellos puedes instalarlos desde el "gestor de ajustes preestablecidos" que se encuentra en el menú "edición":
y en general lo puedes abrir desde las herramientas que permitan que les instales recursos (ahora lo verás).
Empecemos con los pinceles:
Los pincele sirven para pintar, y puedes crear y descargarlos con todo tipo de formas para decorar tus ediciones:
Para utilizarlos, solo tienes que seleccionar la herramienta, elegir un pincel de entre los que tengas instalados, ajustar el tamaño, y clickear directamente en tu trabajo.
Nota: El pincel pintara del color principal que tengas seleccionado.
Tip: Utiliza una nueva capa.
Su tipo de archivo es el .ABR, como ya he dicho puedes cargarlos desde el gestor, o directamente yendo a la herramienta, y haciendo click en "cargar pinceles", abres el archivo y listo:
Dependiendo de la cantidad de pinceles que traiga el archivo, puede tardar más o menos en cargar, pero suele durar solo unos segundos.
Mas abajo hay algunos pinceles por defecto que puedes cargar:
Si quieres ponerlos, clicka en "añadir" para que no se borren los anteriores que ya tenias:
Ahora bien, si quieres crear tu propio pincel, por ejemplo yo dibujaré un corazón...
[un poco deforme pero bueno xd]
solo tendrías que darle a "edicion->definir valor de pincel"
ponerle un nombre, click en ok y listo:
si no te gustó el resultado, solo tienes que dar click derecho y eliminarlo:
Tip: Si lo pintas de color, te quedará mas claro y algo "traslucido" (como a mi), mientras que si lo haz pintado con negro, te quedará totalmente opaco al pintar.
Recuerda que también con el panel de los pinceles puedes editar sus ajustes, para tener otros efectos al pintar con ellos, a mi me gusta el de "dispersión":
Sigamos con las muestras.
Como dije en el otro tutorial, las muestras son como una "paleta de colores" que puedes coger con el cuentagotas, realmente no tienen más utilidad que esa, que coger una muestra de color.
Te pueden servir cuando no sepas que color utilizar o te de pereza elegirlo "manualmente".
Su tipo de archivo es el .ACO. Puedes cargarlo desde el gestor o desde aquí:
(también trae muestras cargables por defecto)
Ahora vamos con los degradados.
Como te imaginarás, los degradados son dos o más colores que se mezclan suavemente:
Su tipo de archivo es el .GRD. Puedes cargarlos desde el gestor o desde la misma herramienta:
(también trae degradados cargables por defecto)
Para utilizarlos solo tienes que elegir uno, clickear, y sin soltar hacer una linea y soltar:
También puedes elegir que forma quieres que tenga con estos cuadraditos:
Puedes modificarlos haciendo doble click en la miniatura del degradado:
y moviendo los cuadritos para graduar el color, doble click lo podemos cambiar,
al terminar puedes guardar tu nuevo degradado en guardar:
Aunque no lo parezca, los degradados son un recurso muy, muy útil, te recomiendo tener muchos de ellos, porque con los métodos de fusión podrás crear efectos muy bonitos en las imágenes con ellos (ver el primer tutorial).
Ahora toca el turno a los estilos.
Los estilos son simples combinaciones de efectos que agregamos a la capa. Su tipo de archivo es el .ASL y se pueden cargar desde el gestor o desde aquí:
Para aplicarlos simplemente basta con estar en la capa y dar click en el estilo, pueden agregarse tanto a capas normales como textos, y para modificarlos solo hay que hacer doble click en la capa y modificar los ajustes a nuestro gusto (ver tutorial anterior).
También podemos crear nuestros propios estilos haciendo click aquí:
Para eliminar el estilo de la capa solo basta con arrastrar el "fx" (estilo) de la capa al tacho de basura:
o aplicar el estilo "sin estilo" de photoshop (normalmente aparece al principio):
Lo que sigue son los contornos:
Realmente no creo que sea necesario descargar más, a mi personalmente me basta con los predefinidos.
Son un ajuste en los estilos en las sombras, resplandor, bisel y relieve, y satinado:
Por ejemplo:
Si les haces doble click en el que tengas puesto, puedes personalizarlo creando una curva:
(solo clicka y crearas unos "puntos", al arrastrarlos cambias la forma de la curva y por tanto el "contorno")
Su tipo de archivo es el .SHC y puedes cargarlos desde el gestor y desde la ventana de ajustes de estilo:
Y casi para terminar, las formas personalizadas:
Su tipo de archivo es el .CSH, y puedes cargarlas desde el gestor y desde la herramienta de forma:
Lo que te permiten es crear formas o dibujos vectorizados:
(solo tienes que hacer click y arrastrar sin soltar para crear la forma)
Otros recursos que puedes instalar en photoshop y que me gusta utilizar son las acciones:
¡me encantan! su tipo de archivo es el .ATN y las cargas desde el panelito:
Para utilizarlas solo tienes que elegir la que quieres utilizar, y darle click al icono de reproducir (2):
Una recomendación que te hago, es que si vas a utilizarlas, abras tu trabajo dos veces, es decir que lo copies, porque si no te gusta el resultado, será muy difícil que vuelvas para atrás con el "paso atrás" a menos que la acción este creada en un grupo de capas, y si lo tienes a parte, solo borras la capa de la acción y vuelves a pegar una copia de tu trabajo original :)
También están los motivos o patterns,
Se instalan desde el cubo de pintura y su tipo de archivo es el .PAT:
También puedes crear tus propios motivos creandolos desde cero, o abriendo una imagen y yendo a Edición -> Definir motivo (igual que como se hace con los pinceles, [ver más arriba]).
Los motivos son imágenes que se utilizan como fondo, dicha imagen se utiliza como una especie de azulejo, que al pegar uno al lado de otro da sensación de continuidad, como un papel tapiz.
Ejemplos de motivos:
Por último están las herramientas, pero sinceramente no he intentado instalar ninguna, no he visto que me llamaran la atención, pero si quieres puedes buscarlas con el nombre de "PLUGINS".
Hasta aquí llegamos con los recursos instalables en photoshop, ahora vamos con recursos "aparte".
Una cosa que a mi me encanta descargar son las "fuentes" o tipos de letras:
Las puedes descargar de internet, una página que a mi me gusta es dafont, allí puedes encontrar miles de fuentes muy bonitas.
Una vez que elijas una que te guste, tienes que descargarla, normalmente obtendrás directamente un archivo .TFF, si no, un archivo zip o rar, del que solo tienes que extraer el .TFF, para esto tienes dos opciones:
1. click derecho en el archivo .rar o .zip y dar click en "extraer aquí" y te saldrá el archivo .tff en la misma carpeta en que estés.
2. click derecho en el archivo .rar o .zip y dar click en "extraer ficheros" y elegir la carpeta donde quieres que aparezca.
Una vez tengas el archivo:
para instalar la fuente tienes que copiarlo y pegarlo en:
Inicio -> Panel de control -> Fuentes
Se instalará automáticamente y podrás utilizarla en los programas que utilicen fuentes, como el block de notas, word, o el photoshop.
Nota: Si tenias el programa donde quieres utilizar la fuente abierto antes de instalarla, tendrás que cerrarlo y volverlo a abrir para que aparezca. Luego de instalar la fuente, puedes borrar el archivo .ttf y .zip/.rar del principio.
Tip: Puedes instalar mas de una fuente a la vez, solo selecciona todos los archivos .tff que hayas descargado.
Y ahora si, para terminar, los últimos recursos que nos quedan son los que no se instalan por ningún lado, y vienen a ser las texturas, los renders y los png.
Las 3 cosas son simples imágenes, y los renders con los png vienen a ser casi lo mismo.
Las texturas son imágenes con diferentes colores, formas, etc:
con las que jugando con los métodos de fusión consigues distintos efectos en las imágenes, por ejemplo:
Truco: Unas en especifico, que tienen el fondo negro con pequeños detalles de luz, como estas:
al ponerlas en modo de fusión "aclarar" el fondo negro desaparece y dan un efecto muy bonito de luces o brillos: (las puedes encontrar con el nombre de "lights"), ejemplo:
Por último ya, los renders y png son imágenes sin fondo, los renders normalmente se refieren a personajes, y los png a formas o dibujos de adorno, su uso se limita a copiarlos y pegarlos como decoración en tu trabajo.
También hay otros tipo de recursos como cd4 (imagen 3D abstracta) o stocks pero yo normalmente lo encasillo todo en "texturas" y las utilizo como me convenga.
La ultima cosa que puedes utilizar como recurso, son archivos .PSD
(como dije en el primer tutorial, archivos de photoshop, tu trabajo a capas).
Se suelen utilizar como sustituto de las acciones, ya que son más rápidos de poner, y al no tener que instarlos, el photoshop mejora en rendimiento.
Para utilizarlos, solo tienes que abrir tu trabajo, el archivo .PSD en modo ventana:
seleccionar todas las capas de ajuste del archivo .PSD, arrastrarlas a tu trabajo, y listo:
Eso es todo, practiquen y experimenten :)
-Fin del tutorial-
------------->(Sección en construcción a partir de aquí)<-------------
LAYOUTS
2.1 Diseño de layout.
(En construcción)
En este tutorial ya empezaremos a nuestro layout, vamos a empezar a hacer el diseño.
Pero primero que nada, voy a aclarar un par de cosas: no es realmente necesario que utilicen el photoshop, cualquier programa que ustedes tengan para editar les vale, yo explico con el photoshop porque es que yo utilizo.
Y segundo, el diseño es totalmente libre, pero siempre que sigan la estructura del layout de 3 partes, pueden utilizar las técnicas y lo que ustedes quieran para decorar, yo lo que voy a hacer es solo un ejemplo, pero ustedes echen a volar su imaginación!
También recuerden ser precavidas y guardar el archivo seguido por si el programa se les tilda o cualquier problema no pierdan su edición, ¡es muy importante!
Dicho esto, empecemos:
Vamos a crear un nuevo documento de 575px de ancho y el largo que ustedes quieran, pero les recomiendo que pongan más de mil, yo pondré 1500px "por si las moscas" para tener espacio de sobra.
Antes de empezar te recomiendo que borres el candado de la capa "fondo" (arrástralo al bote de basura de abajo) para que tengas mas libertad:
El primer paso que hago siempre es ponerle un fondo continuo, ya sea un color liso, un degrado horizontal (el color va de izquierda a derecha) o motivo.
Esta vez utilizaré un motivo, con el bote de pintura:
Ya que tengo mi fondo:
añadiré la imagen, en mi caso un render:
(control+a copiar todo,
control+c copiar control+v pegar
control+t para trasformar y cambiar el tamaño, girar etc., doble click para validar la trasformación)
En esta parte del layout, la de arriba, junto con la de abajo, la última, ustedes son libres de hacerlas como quieran, agreguen, desarmen, editen, corten, peguen, como deseen, tienen total libertad.
Por ahora, sigamos con la parte de en medio, es decir, donde se escribe.
Lo que suelo hacer es seleccionar un cuadrado grande y redondear las esquinas (seleccion -> modificar -> redondear) y le pongo unos 12px - 20px.
Aprovecho para borrar la parte que sobra del render, luego creo una nueva capa, la pinto con un color liso, y le agrego estilos, y sigo editando a mi gusto:
No pongas un motivo de nuevo si ya pusiste uno de fondo a menos que uno de los dos sea vertical, porque si no te será muy difícil hacer que coincidan, y cuando separes el layout en 3 partes y lo armes, la parte de en medio de saldrá cortada.
En esta parte tienen que tener mucho cuidado. Tiene que ser algo continuo para que después puedan recortarlo, recuerden que tiene que ser como papel tapiz.
Ya que acabé la parte de enmedio, y empezaré a agregar recursos (texturas, png, pinceles, degradados, ajustes...) y poco a poco a editar la cabecera y la parte final a mi gusto, también agrego el texto.
Agrego los últimos detalles, y añado más recursos, en cuanto doy por acabado el diseño, lo recorto con la herramienta de recortar si sobró espacio:
Combino todas las capas y agrego mas ajustes y/o actions si hace falta.
Ahora va una parte importante. Tenemos que cortar el layout en 3 partes:
Empezamos con la cabecera, y cortamos hasta donde el layout empieza a ser un "papel tapiz". Guardamos la imagen en "guardar para web y dispositivos", yo recomiendo el formato png-24, es el que tiene más calidad.
Ahora yo corto la parte final, de la misma manera, y la guardo.
Y ahora sí, vamos por la parte de enmedio. Con la mayor presición que podamos, intentamos recortar nuestro "papel tapiz".
Recuerda que lo que falta por arriba, lo cogemos por abajo, para que al recotar esta imagen y al repetirse como un azulejo, se vea continuo y no como cortado.
Guardamos otra vez para web y dispositivos.
¡y ya esta! tenemos nuestro layout acabado :)
2.2. Subida y uso de layouts.
(En construcción)
En esta ocasión les voy a explicar como subir el layout a internet, es decir conseguir escribir en él y subirlo a ohmydollz.
Bien, para empezar lo que necesitamos es un foro en aimoo u otro foro que permita la creación de TABLAS.
Si les da pereza o no quieren crear uno, les dejo en la descripción un foro que creé yo, y pueden utilizarlo si quieren (:
Lo primero que vamos a hacer es subir nuestras 3 partes del layout a un host de imágenes, es decir una web que permita subir imágenes, para obtener el link directo de ellas, yo utilizo imageshack, y ya las tengo aquí subidas.
Ahora bien, tenemos que ir a nuestro foro, a la sección que deseemos, y crear un nuevo tema.
Van a escribir dos cosas, lo que sea que ustedes quieran, por lo menos dos letras, yo tengo la costumbre de escribir "a" y "b".
y van a poner el cursor entremedio de esas dos letras o lo que hayan escrito, hacemos click en este iconito de aquí, y se nos abrirá una nueva ventanita pequeña. Y van a completarla de la siguiente manera:
Damos click en insert y esperamos unos segundos a que aparezca la tabla. Ahora solo utilizamos las dos letras para poder seleccionarla y copiarla.
Ahora nos vamos a ohmydollz y van a su quien soy, ahí pegamos la tabla, y antes de hacer nada, damos a validar. Ahora deberían poder ver las separaciones de la tabla en filas y colummnas, como rayitas punteadas, si no las ven, utilicen otro navegador, en firefox siempre funciona.
Lo que vamos a hacer es clickear segunda fila y apretar enter para estirar la tabla, hasta que la primera fila y la tercera se achiquen hasta no poder más, así
Ya que hicimos esto, vamos a la primera fila, y borramos todo el espacio que haya. todoooo! ahora volvemos a nuestros links de las imágenes, y copiamos el link de la cabecera, y lo colocamos con el arbolito.
Hacemos lo mismo con la parte de abajo.
Y ya está, ahora solo nos queda volver a validar, y el layout ya estará perfectamente puesto, y ya podemos escribir y colocar imágenes encima de él. Les recomiendo que usen la alineación centrada, y no se pasen del cuadrado que hicimos, usen letra pequeña y con un color que se lea bien :)
¡Y fin!
Espero de todo corazón que todo esto les haya servido, si tienen dudas pregunten (:
recuerden que tienen el foro comunitario para ayudarles^^
OTROS & EXTRAS
3. Cómo crear y usar un foro de aimoo.
(En construcción)
4. Crear cuenta en imageshack.us y utilizarla.
5. Hacer un gif.
(En construcción)
OHMYDOLLZ
6. Poner ropa DETRÁS del cuerpo de la doll.
(En construcción)
¡Deja tu comentario!
No olvides visitar el Canal de Youtube.
ADVETENCIA: por favor NO copien, distribuyan, ni guarden los tutoriales, si quieren compartirlos, pasen la dirección del blog, gracias.
¡Los comentarios son muy agradecidos!
DISEÑO En este tutorial intentaré explicar algunas cositas básicas del photoshop y cómo utilizarlo.
Vamos a empezar con algo que es esencial que entiendas: las capas.
En photoshop se utilizan capas para trabajar, es decir que cada elemento que vayas añadiendo a tu diseño, será una capa, te lo puedes imaginar como una "pila de hojas", algunas trasparentes, otras recortadas, de distintos colores etc.
Cada capa que vayas agregando, tendrá un modo de fusión con las de abajo,
sería como el "tipo de papel", por decirlo de alguna forma.
debajo de las capas puedes ver algunos iconos muy útiles:
1- Enlazar capas. Es como poner dos capas a la misma "altura".
2- Estilo de la capa (agregar borde, sombra, etc.)
3- Crear una máscara.
4- Ajustes (brillo, contraste, etc.)
5- Crear un grupo de capas. Estos grupos son muy útiles si vas a utilizar muchas capas, y son una muy buena forma de organizarte.
6- Crear una nueva capa trasparente.
7- Borrar capa.
Al hacer doble click sobre la capa se te abrirá una nueva ventana, en ella puedes agregar distintos efectos a la capa, como borde, sombra, superponer un color, etc. a esto lo llamamos estilo de la capa.
Al hacer doble click en su nombre puedes cambiárselo:
También puedes arrastrarlas para cambiarlas de orden, y seleccionar más de una capa a la vez, utilizando control y cliqueando:
y si son muchas, solo tienes que seleccionar la primera, y la última con shift, y todas las de en medio se seleccionarán automáticamente.
No olvides también la opción de opacidad, que es la que controla que tan traslúcida es la capa, y la de relleno, que controla la traslucidad de la capa, pero no de los estilos que le agregues, como hace la opacidad.
Ahora vamos a seguir con el espacio de trabajo y las herramientas, yo realmente no utilizo todas, y solo te explicaré las esenciales para diseñar, porque otras como por ejemplo la pluma son para dibujar y vectorizar, y realmente no nos sirve demasiado.
Si te fijas la mayoría de las herramientas tienen un pequeño triángulito, eso significa que la herramienta tiene otras variantes, y para verlas y seleccionarlas solo tienes que hacer click derecho.
1- Herramienta para mover la capa. Solo tienes que hacer click y arrastrar.
2- Herramientas de selección.
Tip: Si presionas shift mientras seleccionas con esta herramienta, la forma te saldrá perfecta.
3- Lazos de selección.
Lazo
Lazo poligonal
5- Esta que son como dos esquinas superpuestas, sirve para recortar. Solo tienes que seleccionar lo que te interesa, hacer doble click y se recortarán todas las capas tu trabajo.
6- Cuentagotas, que sirve para tomar muestras de color. Solo haz click en tu trabajo en el color que quieres escoger.
7- Pinceles.
8- Goma de borrar.
9- Cubo de pintura.
10- Herramienta de desenfoque.
11- Herramienta de texto horizontal y vertical.
12- Herramienta de forma personalizada, que te permite crear distintas formas.
13- Selección de color. Puedes seleccionar dos a la vez, uno principal y otro secundario.
Si utilizas la flechita marcada, se intercambian.
Ahora vamos a seguir con los menús desplegables, al verlos quizá te sientas un poco agobiada, pero realmente no hay tantas cosas, y yo solo te voy a mostrar lo que considero útil.
Empecemos con "archivo":
encontramos las opciones de paso atrás, paso adelante, rellenar (es como el cubo de pintura), contornear (poner borde a algo que tengamos seleccionado), también podemos trasformar de distintas formas y girar nuestra capa... y crear un pincel (definir valor de pincel) o un motivo (definir motivo).
También podemos configurar nuestro photoshop, yendo a preferencias (o apretando control+k), se te abrirá una nueva ventana donde podrás configurar como más te convenga tu photoshop, cambiar el tamaño de la vista previa de las fuentes o incluso modificar el color de fondo de tu espacio de trabajo o el de los cuadritos que representan un fondo trasparente.
En "imagen":
nos encontramos con los ajustes (brillo, contraste, la intensidad del color, poner en blanco y negro, etc.) si los aplicamos desde aquí los ajustes se aplican directamente en la capa, y solo los podremos deshacer con el pasó atrás, pero también podemos crear una capa de ajuste, y de esa forma poder borrarlo más fácilmente si después ya no nos gusta el resultado, pero entonces no solo afectará a esa capa, si no a todas las de abajo.
Luego tenemos "capa":
Después tenemos "selección":
También podemos modificar la selección agrandándola o achicandola y redondeando las esquinas (en "modificar").
En "filtro":
El filtro de "licuar" es el tan famoso que se utiliza para aumentar y disminuir el volumen en ciertas partes de las fotos (por ej: aumentar el tamaño de los ojos).
"Análisis", "3D", y "vista" realmente no los utilizo, en "ventana":
Puedes moverlos clikeas y arrastras en los puntitos o el nombre del panel:
Estos son los que yo suelo tener y utilizar:
2. Las muestras son como una paleta de colores que puedes elegir con el cuentagotas.
3. Cáracter y parrafo sirven para poder poner negrita, cursiva, etc. al texto.
4. Las acciones, son como "grabaciones" de los pasos que haz seguido en photoshop para conseguir un efecto, y puedes reproducirlos en distintos trabajos.
5. Los ajustes de siempre (brillo, contraste...)
6. Ajustes para pinceles, para poder pintar con dispersion o otros efectos.
7. Animación para crear gifs.
Por último esta "ayuda":
-Fin del tutorial-
En este tutorial intentaré explicarte que recursos hay para editar y cómo utilizarlos.
Vamos a empezar con los que puedes descargar e instalar en photoshop.
Dependiendo de que recurso sea, los archivos pueden ser de distintos tipos: .ATN, .GRD, .ASL, .PAT, .ABR, etc.
Puedes descargarlos gratis de internet desde sitios como devianart, pero ten cuidado de no descargar demasiados o de descargar recursos que no te resulten útiles porque podrías sobrecargar tu photoshop y tardaría mucho en abrir, y lo digo desde la experiencia, es mejor que solo tengas los que sueles usar, y elimines los que uses solo ocasionalmente, y solo los cargues cuando los necesites.
La mayoría de ellos puedes instalarlos desde el "gestor de ajustes preestablecidos" que se encuentra en el menú "edición":
solo tendrías que elegir que tipo de recurso quieres cargar al photoshop en la lista desplegable, dar click en "cargar", elegir el archivo y clickear en "hecho":
Empecemos con los pinceles:
Los pincele sirven para pintar, y puedes crear y descargarlos con todo tipo de formas para decorar tus ediciones:
Tip: Utiliza una nueva capa.
Su tipo de archivo es el .ABR, como ya he dicho puedes cargarlos desde el gestor, o directamente yendo a la herramienta, y haciendo click en "cargar pinceles", abres el archivo y listo:
Mas abajo hay algunos pinceles por defecto que puedes cargar:
Si quieres ponerlos, clicka en "añadir" para que no se borren los anteriores que ya tenias:
solo tendrías que darle a "edicion->definir valor de pincel"
ponerle un nombre, click en ok y listo:
si no te gustó el resultado, solo tienes que dar click derecho y eliminarlo:
Tip: Si lo pintas de color, te quedará mas claro y algo "traslucido" (como a mi), mientras que si lo haz pintado con negro, te quedará totalmente opaco al pintar.
Recuerda que también con el panel de los pinceles puedes editar sus ajustes, para tener otros efectos al pintar con ellos, a mi me gusta el de "dispersión":
Sigamos con las muestras.
Como dije en el otro tutorial, las muestras son como una "paleta de colores" que puedes coger con el cuentagotas, realmente no tienen más utilidad que esa, que coger una muestra de color.
Te pueden servir cuando no sepas que color utilizar o te de pereza elegirlo "manualmente".
Su tipo de archivo es el .ACO. Puedes cargarlo desde el gestor o desde aquí:
Ahora vamos con los degradados.
Como te imaginarás, los degradados son dos o más colores que se mezclan suavemente:
Su tipo de archivo es el .GRD. Puedes cargarlos desde el gestor o desde la misma herramienta:
Para utilizarlos solo tienes que elegir uno, clickear, y sin soltar hacer una linea y soltar:
También puedes elegir que forma quieres que tenga con estos cuadraditos:
Puedes modificarlos haciendo doble click en la miniatura del degradado:
al terminar puedes guardar tu nuevo degradado en guardar:
Aunque no lo parezca, los degradados son un recurso muy, muy útil, te recomiendo tener muchos de ellos, porque con los métodos de fusión podrás crear efectos muy bonitos en las imágenes con ellos (ver el primer tutorial).
Ahora toca el turno a los estilos.
Para aplicarlos simplemente basta con estar en la capa y dar click en el estilo, pueden agregarse tanto a capas normales como textos, y para modificarlos solo hay que hacer doble click en la capa y modificar los ajustes a nuestro gusto (ver tutorial anterior).
También podemos crear nuestros propios estilos haciendo click aquí:
Para eliminar el estilo de la capa solo basta con arrastrar el "fx" (estilo) de la capa al tacho de basura:
o aplicar el estilo "sin estilo" de photoshop (normalmente aparece al principio):
Lo que sigue son los contornos:
Realmente no creo que sea necesario descargar más, a mi personalmente me basta con los predefinidos.
Son un ajuste en los estilos en las sombras, resplandor, bisel y relieve, y satinado:
Por ejemplo:
Si les haces doble click en el que tengas puesto, puedes personalizarlo creando una curva:
(solo clicka y crearas unos "puntos", al arrastrarlos cambias la forma de la curva y por tanto el "contorno")
Su tipo de archivo es el .SHC y puedes cargarlos desde el gestor y desde la ventana de ajustes de estilo:
Y casi para terminar, las formas personalizadas:
Su tipo de archivo es el .CSH, y puedes cargarlas desde el gestor y desde la herramienta de forma:
Lo que te permiten es crear formas o dibujos vectorizados:
(solo tienes que hacer click y arrastrar sin soltar para crear la forma)
Otros recursos que puedes instalar en photoshop y que me gusta utilizar son las acciones:
¡me encantan! su tipo de archivo es el .ATN y las cargas desde el panelito:
Para utilizarlas solo tienes que elegir la que quieres utilizar, y darle click al icono de reproducir (2):
1. grabar tu propia acción.
3. crear grupo.
4. crear capa.
5. borrar.
Ejemplo de una acción:
También están los motivos o patterns,
Se instalan desde el cubo de pintura y su tipo de archivo es el .PAT:
Los motivos son imágenes que se utilizan como fondo, dicha imagen se utiliza como una especie de azulejo, que al pegar uno al lado de otro da sensación de continuidad, como un papel tapiz.
Ejemplos de motivos:
Por último están las herramientas, pero sinceramente no he intentado instalar ninguna, no he visto que me llamaran la atención, pero si quieres puedes buscarlas con el nombre de "PLUGINS".
Hasta aquí llegamos con los recursos instalables en photoshop, ahora vamos con recursos "aparte".
Una cosa que a mi me encanta descargar son las "fuentes" o tipos de letras:
Las puedes descargar de internet, una página que a mi me gusta es dafont, allí puedes encontrar miles de fuentes muy bonitas.
Una vez que elijas una que te guste, tienes que descargarla, normalmente obtendrás directamente un archivo .TFF, si no, un archivo zip o rar, del que solo tienes que extraer el .TFF, para esto tienes dos opciones:
1. click derecho en el archivo .rar o .zip y dar click en "extraer aquí" y te saldrá el archivo .tff en la misma carpeta en que estés.
2. click derecho en el archivo .rar o .zip y dar click en "extraer ficheros" y elegir la carpeta donde quieres que aparezca.
Una vez tengas el archivo:
para instalar la fuente tienes que copiarlo y pegarlo en:
Inicio -> Panel de control -> Fuentes
Se instalará automáticamente y podrás utilizarla en los programas que utilicen fuentes, como el block de notas, word, o el photoshop.
Nota: Si tenias el programa donde quieres utilizar la fuente abierto antes de instalarla, tendrás que cerrarlo y volverlo a abrir para que aparezca. Luego de instalar la fuente, puedes borrar el archivo .ttf y .zip/.rar del principio.
Tip: Puedes instalar mas de una fuente a la vez, solo selecciona todos los archivos .tff que hayas descargado.
Y ahora si, para terminar, los últimos recursos que nos quedan son los que no se instalan por ningún lado, y vienen a ser las texturas, los renders y los png.
Las 3 cosas son simples imágenes, y los renders con los png vienen a ser casi lo mismo.
Las texturas son imágenes con diferentes colores, formas, etc:
con las que jugando con los métodos de fusión consigues distintos efectos en las imágenes, por ejemplo:
Truco: Unas en especifico, que tienen el fondo negro con pequeños detalles de luz, como estas:
al ponerlas en modo de fusión "aclarar" el fondo negro desaparece y dan un efecto muy bonito de luces o brillos: (las puedes encontrar con el nombre de "lights"), ejemplo:
Por último ya, los renders y png son imágenes sin fondo, los renders normalmente se refieren a personajes, y los png a formas o dibujos de adorno, su uso se limita a copiarlos y pegarlos como decoración en tu trabajo.
También hay otros tipo de recursos como cd4 (imagen 3D abstracta) o stocks pero yo normalmente lo encasillo todo en "texturas" y las utilizo como me convenga.
La ultima cosa que puedes utilizar como recurso, son archivos .PSD
(como dije en el primer tutorial, archivos de photoshop, tu trabajo a capas).
Se suelen utilizar como sustituto de las acciones, ya que son más rápidos de poner, y al no tener que instarlos, el photoshop mejora en rendimiento.
Para utilizarlos, solo tienes que abrir tu trabajo, el archivo .PSD en modo ventana:
seleccionar todas las capas de ajuste del archivo .PSD, arrastrarlas a tu trabajo, y listo:
Eso es todo, practiquen y experimenten :)
-Fin del tutorial-
------------->(Sección en construcción a partir de aquí)<-------------
LAYOUTS 2.1 Diseño de layout.
(En construcción)
En este tutorial ya empezaremos a nuestro layout, vamos a empezar a hacer el diseño.
Pero primero que nada, voy a aclarar un par de cosas: no es realmente necesario que utilicen el photoshop, cualquier programa que ustedes tengan para editar les vale, yo explico con el photoshop porque es que yo utilizo.
Y segundo, el diseño es totalmente libre, pero siempre que sigan la estructura del layout de 3 partes, pueden utilizar las técnicas y lo que ustedes quieran para decorar, yo lo que voy a hacer es solo un ejemplo, pero ustedes echen a volar su imaginación!
También recuerden ser precavidas y guardar el archivo seguido por si el programa se les tilda o cualquier problema no pierdan su edición, ¡es muy importante!
Dicho esto, empecemos:
Vamos a crear un nuevo documento de 575px de ancho y el largo que ustedes quieran, pero les recomiendo que pongan más de mil, yo pondré 1500px "por si las moscas" para tener espacio de sobra.
Antes de empezar te recomiendo que borres el candado de la capa "fondo" (arrástralo al bote de basura de abajo) para que tengas mas libertad:
El primer paso que hago siempre es ponerle un fondo continuo, ya sea un color liso, un degrado horizontal (el color va de izquierda a derecha) o motivo.
Esta vez utilizaré un motivo, con el bote de pintura:
Ya que tengo mi fondo:
añadiré la imagen, en mi caso un render:
(control+a copiar todo,
control+c copiar control+v pegar
control+t para trasformar y cambiar el tamaño, girar etc., doble click para validar la trasformación)
En esta parte del layout, la de arriba, junto con la de abajo, la última, ustedes son libres de hacerlas como quieran, agreguen, desarmen, editen, corten, peguen, como deseen, tienen total libertad.
Por ahora, sigamos con la parte de en medio, es decir, donde se escribe.
Lo que suelo hacer es seleccionar un cuadrado grande y redondear las esquinas (seleccion -> modificar -> redondear) y le pongo unos 12px - 20px.
Aprovecho para borrar la parte que sobra del render, luego creo una nueva capa, la pinto con un color liso, y le agrego estilos, y sigo editando a mi gusto:
No pongas un motivo de nuevo si ya pusiste uno de fondo a menos que uno de los dos sea vertical, porque si no te será muy difícil hacer que coincidan, y cuando separes el layout en 3 partes y lo armes, la parte de en medio de saldrá cortada.
En esta parte tienen que tener mucho cuidado. Tiene que ser algo continuo para que después puedan recortarlo, recuerden que tiene que ser como papel tapiz.
Ya que acabé la parte de enmedio, y empezaré a agregar recursos (texturas, png, pinceles, degradados, ajustes...) y poco a poco a editar la cabecera y la parte final a mi gusto, también agrego el texto.
Agrego los últimos detalles, y añado más recursos, en cuanto doy por acabado el diseño, lo recorto con la herramienta de recortar si sobró espacio:
Combino todas las capas y agrego mas ajustes y/o actions si hace falta.
Ahora va una parte importante. Tenemos que cortar el layout en 3 partes:
Empezamos con la cabecera, y cortamos hasta donde el layout empieza a ser un "papel tapiz". Guardamos la imagen en "guardar para web y dispositivos", yo recomiendo el formato png-24, es el que tiene más calidad.
Ahora yo corto la parte final, de la misma manera, y la guardo.
Y ahora sí, vamos por la parte de enmedio. Con la mayor presición que podamos, intentamos recortar nuestro "papel tapiz".
Recuerda que lo que falta por arriba, lo cogemos por abajo, para que al recotar esta imagen y al repetirse como un azulejo, se vea continuo y no como cortado.
Guardamos otra vez para web y dispositivos.
¡y ya esta! tenemos nuestro layout acabado :)
2.2. Subida y uso de layouts.
(En construcción)
En esta ocasión les voy a explicar como subir el layout a internet, es decir conseguir escribir en él y subirlo a ohmydollz.
Bien, para empezar lo que necesitamos es un foro en aimoo u otro foro que permita la creación de TABLAS.
Si les da pereza o no quieren crear uno, les dejo en la descripción un foro que creé yo, y pueden utilizarlo si quieren (:
Lo primero que vamos a hacer es subir nuestras 3 partes del layout a un host de imágenes, es decir una web que permita subir imágenes, para obtener el link directo de ellas, yo utilizo imageshack, y ya las tengo aquí subidas.
Ahora bien, tenemos que ir a nuestro foro, a la sección que deseemos, y crear un nuevo tema.
Van a escribir dos cosas, lo que sea que ustedes quieran, por lo menos dos letras, yo tengo la costumbre de escribir "a" y "b".
y van a poner el cursor entremedio de esas dos letras o lo que hayan escrito, hacemos click en este iconito de aquí, y se nos abrirá una nueva ventanita pequeña. Y van a completarla de la siguiente manera:
Damos click en insert y esperamos unos segundos a que aparezca la tabla. Ahora solo utilizamos las dos letras para poder seleccionarla y copiarla.
Ahora nos vamos a ohmydollz y van a su quien soy, ahí pegamos la tabla, y antes de hacer nada, damos a validar. Ahora deberían poder ver las separaciones de la tabla en filas y colummnas, como rayitas punteadas, si no las ven, utilicen otro navegador, en firefox siempre funciona.
Lo que vamos a hacer es clickear segunda fila y apretar enter para estirar la tabla, hasta que la primera fila y la tercera se achiquen hasta no poder más, así
Ya que hicimos esto, vamos a la primera fila, y borramos todo el espacio que haya. todoooo! ahora volvemos a nuestros links de las imágenes, y copiamos el link de la cabecera, y lo colocamos con el arbolito.
Hacemos lo mismo con la parte de abajo.
Y ya está, ahora solo nos queda volver a validar, y el layout ya estará perfectamente puesto, y ya podemos escribir y colocar imágenes encima de él. Les recomiendo que usen la alineación centrada, y no se pasen del cuadrado que hicimos, usen letra pequeña y con un color que se lea bien :)
¡Y fin!
Espero de todo corazón que todo esto les haya servido, si tienen dudas pregunten (:
recuerden que tienen el foro comunitario para ayudarles^^
OTROS & EXTRAS 3. Cómo crear y usar un foro de aimoo.
(En construcción)
4. Crear cuenta en imageshack.us y utilizarla.
5. Hacer un gif.
(En construcción)
OHMYDOLLZ 6. Poner ropa DETRÁS del cuerpo de la doll.
(En construcción)
