Guest
home
beatmaps
rankings
community
store
help
forum
  1. Forums
  2. Language Specific
  3. Other Languages
  4. Español

Academia de Edición de Imágenes

posted
Total Posts
156
show more
juesus
4,856 posts
Joined January 2014
juesus

Votaciones


Un saludo por parte de mí y Crystal. Agradecemos supremamente que hayan participado en este evento que queremos mantener en la academia.
En este momento (5/3/18) declaró cerrada las entregas de imagenes para participar en el proyecto. Por lo que cualquier usuario podrá votar libremente por las entradas. Recuerden leer bien las reglas para votar que se ubican en el post de arriba y que piensen bien en su voto y su argumento.

Por el momento dejaré las fechas de votaciones desde el día de hoy hasta la fecha 14 de este mes.

Eso es todo lo que quería decir, muchas gracias a todos los participantes de esta primera entrega.
Nos vemos en los resultados. :)

1er concursante:

ғɪʀᴇ ɪɴ ᴛʜᴇ ᴅᴀʀᴋ



2do concursante:

ʜᴏᴛᴛᴇʀ ᴛʜᴀɴ ʜᴇʟʟ



3er concursante:

ᴡɪɴɢs ᴏғ ғɪʀᴇ



4to concursante:

ʟᴏɴɢ ʟɪᴠᴇ ᴛʜᴇ ǫᴜᴇᴇɴ



5to concursante:

ғɪʀᴇ&ʟᴀᴠᴀ

PeridotBby
94 posts
Joined August 2016
PeridotBby
Voto por ғɪʀᴇ&ʟᴀᴠᴀ : me gusta un montón la animación y como se la curro con las iluminaciones y sombras del render ♥
MarcellDawn
39 posts
Joined February 2018
MarcellDawn
También voto por ғɪʀᴇ&ʟᴀᴠᴀ
Las tonalidades de colores, el fondo, e incluso la simple animación logra que todo luzca sencillamente hermoso y encaje a la perfección. Ufff, 10/10
[Pika]
10 posts
Joined August 2016
[Pika]
Voto por ʜᴏᴛᴛᴇʀ ᴛʜᴀɴ ʜᴇʟʟ me gusto mucho como le salio
DeletedUser_4789674
DeletedUser_4789674
.
Last edited by DeletedUser_4789674 , edited 1 time in total.
JackBezarius18
13,742 posts
Joined July 2013
Topic Starter
JackBezarius18
Voto por Long Live The Queen. Me gustó la fuente que se empleó, así como la animación y efecto.
Alizie_old
Alizie_old
Yo también voto por Long live the Queen, me gustó la animación y los tonos de la imagen.
Alfearox
36 posts
Joined December 2017
Alfearox
voto por Long live the Queen me parece que quedo excelente con esa animación
juesus
4,856 posts
Joined January 2014
juesus
En este momento finalizan las votaciones del primer concurso de la academia. De nuevo doy gracias a todos aquellos que participaron ya sea con un voto o con una propuesta.

Estos fueron los ganadores.

Primer/os Puesto/s:

Fire&Lava y Long Live the queen.

3 votos.





Segundo Puesto:

Hotter than hell.

1 voto.



Espero que vayan mirando los diferentes tutoriales que se harán sobre las entregas y el próximo concurso.
Aclaro que la fecha se excedió por un inconveniente que tenía, todos los votos incluyendo los de este día fueron observados y contados.
[Pika]
10 posts
Joined August 2016
[Pika]
Quisiera saber como se llama esta fuente la e estado buscando pero no la encuentro

Marie
415 posts
Joined October 2015
Marie

[Pika] wrote:

Quisiera saber como se llama esta fuente la e estado buscando pero no la encuentro

→Mf Queen Leela Regular
[Pika]
10 posts
Joined August 2016
[Pika]
Gracias <3
ZebbyX
34 posts
Joined May 2017
ZebbyX
Me encanta este hilo, siempre quise aprender a editar imágenes bonitas, por fin podre hacer las cosas que quiero n.n
Gracias!!
JackBezarius18
13,742 posts
Joined July 2013
Topic Starter
JackBezarius18
Sé que estoy más muerto que nada, pero me alegra que el hilo que creé te esté sirviendo de mucho. Sé que no he hecho muchos aportes, pero agradezco infinitamente la ayuda de juesus y Crys, también al resto de personas que han hecho sus aportes :3
ItzDakar
4 posts
Joined April 2017
ItzDakar
¡Hola buenas! Quiero aprender sobre cómo poner para cuando los usuarios cliqueen en el banner que les rediriga al perfil de uno de mis amigos.
¡Un saludo y espero una respuesta pronta y no me hagan bullying :'v!
Marie
415 posts
Joined October 2015
Marie

ItzDakar wrote:

¡Hola buenas! Quiero aprender sobre cómo poner para cuando los usuarios cliqueen en el banner que les rediriga al perfil de uno de mis amigos.
¡Un saludo y espero una respuesta pronta y no me hagan bullying :'v!
Para que sea más fácil

-Copias el siguiente código:

[url=URL-PERFIL][img]URL-IMAGEN[/img][/url]

♦URL-PERFIL pones la url de la userpage de tu amig@.
♦URL-IMAGEN tal y como dice pues pones la url del banner o imagen que vayas a usar.

Un ejemplo como quedaría sería este:


Edit: ¿Bullying? o.O para nada. Btw ya que lo aprendiste igual lo usas cuando tengas la UP o para otra cosa en que lo quieras emplear en Osu!.
[Pika]
10 posts
Joined August 2016
[Pika]
Alguien que tenga el render de esta flor? paselo pls

Marie
415 posts
Joined October 2015
Marie

[Pika] wrote:

Alguien que tenga el render de esta flor? paselo pls

👉 ¿Render? = DeviantArt 🤝
[Pika]
10 posts
Joined August 2016
[Pika]
👉 ¿Render? = DeviantArt 🤝[/quote]

Gracias <3
JackBezarius18
13,742 posts
Joined July 2013
Topic Starter
JackBezarius18
Uwu, gracias x2 :3
Alfearox
36 posts
Joined December 2017
Alfearox
Gracias a ustedes pude hacer mi avatar y mi usepage uwu voy a seguir practicando para mejorar mucho :D (todo esto lo hice hace dias pero me olvide de agradecerles por la ayuda) uwu gracias


PD: Alguien que pase fonts bonitos tipo cursiva e imprenta pls cualquier cosa ayuda mucho nesesito mas variedad (ya tengo los pasaron los tutores solo algunos me gustaron los otros no :/) pls :'3
juesus
4,856 posts
Joined January 2014
juesus

Primeros pasos - Como hacer una firma


-Leer en el nuevo foro por favor.-

Buen día a todos, después de seis meses he revivido para hacer un tutorial que sí valga la pena, aunque sé perfectamente que no soy bueno explicando voy a intentar mostrar como hacer una firma simple pero bonita para que se hagan en el foro. Eso sí primero quiero recalcar que solo voy a mostrar algunos trucos y filtros que suelen usar para editar imágenes en Photoshop, la forma de colocar las imágenes y demás.

¬|°|°|°|°°|°|°|°°|°|°|°°|°|°|°|°|°|°|°|°|°|°|°°|°|°|°|°¬

Pero quiero empezar por algunas cositas antes de empezar con esto, preguntas que de vez en cuando se hacen.

¿En qué programa puedo editar?

No he podido manejar muchos programas de edición, apenas conozco unos cuantos (Paint.net, , Gimp, Photoshop y Pixlr sí se considera.) Pero es preferible que para los tutoriales y la edición en general se descarguen alguna versión de Photoshop. Además es más cómodo y conocido que otros programas de edición.

¿Qué versión de Photoshop debo usar?

Particularmente recomiendo la versión cs6 en adelante, ya que estas versiones contienen cosas y efectos muy importantes que vamos a ir usando, simplemente diciendo que con la cs5 no es nada fácil hacer bordes como cut line o dotted line.

Por si no saben de que hablo

Pero sí quieres aventurarte más y terminar haciendo imágenes animadas de buena calidad, recomiendo especialmente que elijas una versión CC. (Claro que si no tienes una compu de buena capacidad vayas revisando la versión que te sea más cómoda.)

Suelen ser menos pesadas y más rápidas la versiones portables, pero hay PC's donde es mejor conseguir una versión full.

¿Dónde me descargo Photoshop?

Creo que buscando la versión que quieres en google te aparece fácil para descargar, pero si tienes dinero y ganas de ser una persona justa, puedes comprarlo o usarlo gratis por siete días en la página de Adobe.

¿Por qué no hacer un avatar en vez de una firma?

Porque las firmas son más cómodas para ir explicando, además de que se pueden agregar muchos más detalles y efectos que los avatares.

Pero si aún les interesa el avatar vayan a este link.

¿Medidas para imágenes?

Me salgo un poco del tema de la firma para ir explicando. En realidad no existe medida especifica para que hagas tu imagen, pero si de igual forma quieres saber las medidas que normalmente se utilizan y no pasar por un GFX, aquí las dejo.


• Avatar: 128x128 píxeles.
• Signature: 650x150 píxeles o menor.
• Banner: 623x192 píxeles.


¿Qué página me recomiendan para buscar imágenes?

Imágenes de buena calidad la puedes buscar en páginas como Pixiv, Danbooru, Deviantart o Zerochan. Aunque son las que se enfocan en dibujos y arte relacionado, ya sí quieres empezar a manejar el foto montaje existen páginas de licencia CCO como Pexels.

Bien, ahora sí vamos a realizar nuestra firma.

Creación de una firma


Después de abrir el programa lo primero que vamos a hacer es crear nuestro archivo, simplemente dando al botón "Nuevo", o ir al botón "Archivo" -> "Nuevo..."

Ahí nos va a aparecer un cuadro con unos datos, solamente nos vamos a enfocar en los que dicen "anchura" y "altura". En el primer cuadro de anchura ponemos "650" y en el de altura "150", ahora vamos a ver el cuadro que está al lado y seleccionamos "píxeles" si no estaba seleccionado.

Damos al botón "ok". Ahora nos carga un cuadro blanco el cual es sobre el que vamos a trabajar, ahí siempre vamos a ver la imagen final o su vista previa.

Bien, ahora vamos en el menú de arriba a "Archivo" -> "Colocar" y buscamos la imagen que queremos editar y la seleccionamos. (Es muy sencillo por lo que no lo voy a explicar). Nos va a aparecer la imagen pero en una medida muy pequeña que no queremos.



Ajustarlo es muy sencillo, solo tenemos que ir a una de las esquinas de la imagen y manteniendo presionado "shift" en el teclado con el mouse vamos agrandando la imagen.



Listo. c:

¬|°|°|°|°°|°|°|°°|°|°|°°|°|°|°|°|°|°|°|°|°|°|°°|°|°|°|°¬

Si tienen una imagen con una mala calidad o no les gusta mucho como se ve pueden tocar CTRL + J (esto duplica la capa), ir al menú de arriba (En el que aparece el botón de archivo) y buscar "filtro". Le dan clic a ese botón y les va a aparecer diferentes opciones, solo tienen que ir a "Enfocar" -> "Enfocar bordes" o "Enfocar". Esto hace que la imagen más pixelada si se puede decir así.

Aquí una comparación.



Sí aún no les gusta mucho el efecto pueden ir a la ventana de capas que es esta de aquí.



Y dan clic a la pestaña que marqué con un cuadro rojo.
Les va a abrir esta lista.



Bien, esta lista la podemos llamar modo de fusión y cada opción de ellas ofrece cierto efecto que tiene la capa seleccionada con las de abajo. Vamos a poner modo de fusión "Color más oscuro". Y pueden hacer una comparativa, si les gusta más como se veía antes solo pongan modo de fusión normal.

¬|°|°|°|°°|°|°|°°|°|°|°°|°|°|°|°|°|°|°|°|°|°|°°|°|°|°|°¬

Ahora, voy a poner un borde cualquiera, si quieren aprender a hacer distintos tipos de bordes pueden ir a esta guía que existe desde hace un tiempo.

Y ahora voy a añadir un texto, les recomiendo que sea una frase corta y puedan dividirla en dos líneas, en donde la línea de arriba usen una fuente elegante y abajo una fuente que no tenga muchas decoraciones o formas.

En mí caso voy a colocar en la línea de arriba "Mi único amor" con la fuente Magic y en la línea de abajo "eres tú." Con la fuente Cutie Star. Sí quieren que explique como instalar fuentes me lo pueden pedir.

Si no saben donde buscar fuentes pueden usar la página Dafont.com.

Colocar el texto es una de las cosas más fáciles en Photoshop, solo tienen que dar clic al icono que aparece en la lista de herramientas.

Aquí aparece alguna información sobre la lista de herramientas, por sí no saben qué es.

Vamos a la ventana capas y creamos una nueva capa con el botón que aparece abajo, y damos clic en el lugar que queremos que se vea el texto. Vamos a escribir la línea que queramos y la acomodamos.

Sí quieren colocar la fuente o cambiar el tamaño del texto vamos arriba, donde aparecen estás opciones.



Yo en este caso las enumere para explicar las cositas más importantes o lo que deben hacer.

  1. Allí se escoge la fuente que van a usar, por ejemplo abren la lista, seleccionan la fuente y ya queda puesta, en caso de que no, solo debes seleccionar todo el texto e ir a esta opción.
  2. Ese es el tamaño de la fuente, también pueden abrir la lista y escoger el tamaño que más les gusta, o sino escribirlo.
  3. Te muestran distintas opciones de cómo va a estar enfocado el texto, solo escojan la opción "Fuerte".
  4. Aparecen tres botones, les recomiendo que coloquen el del medio.
  5. Ese es el color del texto, solo tienen que ir al cuadro con ese color y poner el color que más les gusta.
Bien, ahora, para la línea de abajo solo acomoden el texto con el tamaño algo pequeño.



Y para la de arriba ponen el texto con la otra fuente y hacemos que tenga un tamaño más grande que la otra línea. Para mí sale algo como esto.



Bueno, eso es lo más básico al hacer una firma, y además si quieren pueden poner su propia marca de agua, para eso les recomiendo esta guía.

Bueno, ahora vamos a lo que nos interesa que son los filtros, solamente iré explicando unos que son muy usado para editar imágenes. Esto para finalizar de buena forma nuestra firma.

Efectos y filtros para imágenes.


Efecto 3D

Este no lo voy a explicar ya que existe un tutorial sobre esto.
Abran este link por si quieren verlo.

Solamente lo aplicaré un poco a la imagen para dar una pequeña decoración.



¬|°|°|°|°°|°|°|°°|°|°|°°|°|°|°|°|°|°|°|°|°|°|°°|°|°|°|°¬

Luminosidad con mapa de degradado

¿Recuerdan la ventana de capa? Bueno, pues les recuerdo que es este cuadro.


Lo que necesito es que miren la parte de abajo, allá van a encontrar distintos botones, solo tienen que darle clic a este botón .

Bien, ahora les va a aparecer una lista como esa.



Cada opción de esa lista es llamado "ajuste", por lo que vamos a llamar a esto lista de ajustes.
¡Recuérdenlo muy bien!

¬|°|°|°|°°|°|°|°°|°|°|°°|°|°|°|°|°|°|°|°|°|°|°°|°|°|°|°¬

Bien, vamos a la lista de ajustes y seleccionamos "mapa de degradado".
Les aparecerá una ventanita con este aspecto.



Solo hay que dar clic al degradado que aparece y se nos muestra otra ventana con más opciones, pero no se preocupen, lo único que tienen que hacer es dar clic a los cuadros de abajo y cambiar el color, el color más claro lo ponen un poco más oscuro y el color más oscuro lo vuelven más claro. No importan los tonos que escojan, solo es importante que la imagen quede algo así y no desfigurada o con colores muy fuertes.



Ahora lo único que nos falta es cambiar el modo de fusión a "Luminosidad" y woala.



Ahora si quieren la imagen con más juegos de colores, brillo, y saturación, pueden ir acercando los dos colores. Por ejemplo aquí.



Bueno, como todo filtro es todo cosa de gusto que vayan mirando lo que parezca mejor. Vamos al siguiente.

Aquí una comparativa entre las imágenes
Orignal:



Con efectos:





Comparación con otra imagen.



¬|°|°|°|°°|°|°|°°|°|°|°°|°|°|°|°|°|°|°|°|°|°|°°|°|°|°|°¬

Ahora para los siguiente efectos voy a usar otra imagen, si quieren ver cómo la edité vayan al final del post.

Tonos grises/exposición

De aquí en adelante no voy a dar mucho rodeo, lo que tienen que hacer es ir a la lista de ajustes y escoger "Exposición", la ventana que debe aparecer es esta.



Aquí podemos aplicar los ajustes moviendo de un lado a otro las flechas, muy simple.
Solamente vamos a enfocarnos en las dos últimas opciones, las que dicen "Dezplazamiento" y "Corrección de gamma". En desplazamiento vamos a mover la flecha a la derecha y verán que la imagen se va volviendo más clara y los colores oscuros se vuelven grises, en sí esto es todo el efecto que existe.



Pero si quieren que la imagen no sea tan clara pueden también ir moviendo la flecha de Corrección de gamma, mantiene la esencia del efecto pero aún así quitan lo claro que puede molestar en la imagen.
Yo en mi caso he decidido dejar estos ajustes.





Comparativa



¬|°|°|°|°°|°|°|°°|°|°|°°|°|°|°|°|°|°|°|°|°|°|°°|°|°|°|°¬

Tonos grises/color

Esta es una variante del efecto anterior que puede ser mejor o tiene más posibilidad de aplicarse en todo tipo de imágenes. Lo único que tienen que hacer es coger la cubeta de color (es parecida a la que aparece en Paint) cambiar el color por cualquier tono de gris y ponerlo en modo de fusión "Aclarar". Otra forma es ir a la lista de ajustes, seleccionar "Color uniforme" y poner un tono de gris cualquiera, al final también poner en modo de fusión "Aclarar".

Si quieren también pueden escoger todo tipo de colores, para ver como resulta la imagen. c:



Comparación





¬|°|°|°|°°|°|°|°°|°|°|°°|°|°|°|°|°|°|°|°|°|°|°°|°|°|°|°¬

Y bueno, esto es lo más general que se puede aprender sobre edición en Photoshop, si prefieren conocer un filtro extra y la forma de hacer la segunda imagen. Dejo los tutoriales en spoilers, esto ya lo cuento de forma más rápida, basado por parte de todo lo que escribí anteriormente y las guías que dejo por todo el texto.

Efecto extra
Brillo fuerte y contraste, mejora de calidad
Es para imágenes que tengan una muy mala calidad. cuando tengas todo el edit listo creas una nueva capa, vas a las opciones que existen en toda la parte superior del programa y seleccionas "Imagen" -> "Aplicar imagen...", te aparece un cuadro y das clic en "OK", ahora duplicas la capa con CTRL+J y vuelves a la barra de arriba. yendo a Filtro -> Desenfocar -> Desenfoque gaussiano.

Ahora ve mirando la calidad de la imagen, si la imagen tiene muy mala calidad escoges un porcentaje entre "1" y "3" de radio, sino es muy mala y solo quieres aplicar el efecto pon entre "4" y "6" de radio.

Ahora solo pones la capa en modo de fusión "Superponer" o "Luz suave" y listo!
Si crees que tiene mucho brillo vas a la ventana de capas y bajas la barra donde dice "Opacidad:"

Comparación:



Como realizo la segunda imagen
No hay que contar mucho para esto XDD
Solamente sigo lo que aplique en el segundo tutorial, solo que coloco la imagen cubriendo todo el espacio, la duplico y la capa duplicada la acomodo y encojo usando "ctrl+T", después selecciono la capa que cubre todo el fondo y me voy a las opciones de arriba donde Filtro -> Desenfocar -> Desenfoque gaussiano.
Después a la capa que duplicamos doy clic derecho sobre ella, y me dirijo a opciones de fusión. Creo un trazo de color blanco con el tamaño de 10 px.

Por si no sabes que son las opciones de fusión.

Enfoco la capa (como índico en el tutorial), y pongo el texto como en la guía, solo que cambie el color de la segunda línea y a la línea de abajo agregue un trazo de como tres píxeles con el color de los ojos de la chicas.

Ahora esto puede que no lo comprendan mucho pero a la primera línea le puse el mismo color que el trazo, y fui duplicando muchas veces las capas, moviendo cada vez un píxel abajo o al lado. Procuren que todas estas capas queden debajo del texto blanco.

Listo, ahora puse el borde internal que ya explique en otra guía y al texto oscuro y la imagen de al frente le puse efecto 3D.
Esta vez para la primera línea use la fuente Sotte y para la segunda línea la fuente Shink. (Ambas se consiguen en Dafont)


Listo, con todo completado dejare la guía hasta aquí, espero que les guste a los nuevos editores y si apoyan esta guía puede que escriba una sobre texto.
Adiós. c:
-Ritsuka
5,602 posts
Joined August 2015
-Ritsuka
Tengo una duda... Últimamente volví a interesarme en editar, pero me di cuenta que hay algo lo cual me cuesta mucho a la hora de hacerlo, y es no saber que colocar / poner en el fondo para que simplemente se vea bien (En caso de Banners)... Creo que le llaman ''Patterns'' (o algo así) y bueno, ya he buscado en Google imagenes como en Deviantart... Y no encuentro algo que realmente me guste.

Podrían recomendarme alguno que les parezca al menos algo ''decente''? Por decirlo de alguna manera, no sé.
juesus
4,856 posts
Joined January 2014
juesus

-Ritsuka wrote:

Tengo una duda... Últimamente volví a interesarme en editar, pero me di cuenta que hay algo lo cual me cuesta mucho a la hora de hacerlo, y es no saber que colocar / poner en el fondo para que simplemente se vea bien (En caso de Banners)... Creo que le llaman ''Patterns'' (o algo así) y bueno, ya he buscado en Google imagenes como en Deviantart... Y no encuentro algo que realmente me guste.

Podrían recomendarme alguno que les parezca al menos algo ''decente''? Por decirlo de alguna manera, no sé.
-Ritsuka
5,602 posts
Joined August 2015
-Ritsuka
Gracias por los patterns

Vengo con otra duda, digamos estuve terminando de hacer una signature... Aunque la causa es que no puedo colocarla aquí en osu, me aparece un error en los códigos de Img y Centre , este específicamente:



Alguien sabe como podría solucionar eso? Por dar un dato el edit era .gif, no sé si tenga algo que ver.
[ Bardock ]
752 posts
Joined September 2015
[ Bardock ]

-Ritsuka wrote:

Gracias por los patterns

Vengo con otra duda, digamos estuve terminando de hacer una signature... Aunque la causa es que no puedo colocarla aquí en osu, me aparece un error en los códigos de Img y Centre , este específicamente:



Alguien sabe como podría solucionar eso? Por dar un dato el edit era .gif, no sé si tenga algo que ver.


Puede ser un error por el tamaño del gif. Subelo a esta pagina el gif. Comprimelo y vuelve a subir el archivo resultado a ver que tal.

https://www.iloveimg.com/es/comprimir-imagen/comprimir-gif
-Ritsuka
5,602 posts
Joined August 2015
-Ritsuka

[ Bardock ] wrote:

Puede ser un error por el tamaño del gif. Subelo a esta pagina el gif. Comprimelo y vuelve a subir el archivo resultado a ver que tal.

https://www.iloveimg.com/es/comprimir-imagen/comprimir-gif
Nope, los resultados son completamente iguales a los anteriores.
-Ritsuka
5,602 posts
Joined August 2015
-Ritsuka
:')
JackBezarius18
13,742 posts
Joined July 2013
Topic Starter
JackBezarius18
Cuál es la imagen? En qué formato la guardaste? Aún tienes el editable? Estoy seguro que aún tiene arreglo.
-Ritsuka
5,602 posts
Joined August 2015
-Ritsuka
Ya pude, y de hecho era más fácil de lo que imaginaba. Aunque igualmente, gracias por el intento de ayuda.
JackBezarius18
13,742 posts
Joined July 2013
Topic Starter
JackBezarius18
Ok.
venus ap
1 post
Joined February 2017
venus ap
Creo que seria una buena idea ya hacer un compendio de los tutoriales que han sido mostrados en el hilo, esto porque al acumularse los post es cada vez un poco mas difícil saber si lo que se busca saber ya tiene tutorial o no.
JackBezarius18
13,742 posts
Joined July 2013
Topic Starter
JackBezarius18
Tenía entendido que el buen juesus estaba en ello, de cualquier modo si proponen una nueva alternativa para albergar todos y cada uno de los tutoriales que han salido, será bien recibida.
Please sign in to reply.

New reply

0
124 / 156