Cómo crear un marco de fotos en línea con Photoshop

Puede hacer tantas cosas interesantes con Adobe Photoshop que es difícil saber por dónde comenzar. En este artículo, le mostramos cómo crear un marco de fotos en línea con Photoshop. Uno que puede usar en sitios web y aplicaciones, ya sea alrededor de su avatar o en el encabezado de su blog.

Paso 1: configura tu archivo

Antes de comenzar este tutorial, necesitará conocer los conceptos básicos de la herramienta Forma personalizada. Para hacerlo, consulte nuestro artículo que detalla cómo usar la Herramienta de forma personalizada en Photoshop Cómo usar la Herramienta de forma personalizada en Adobe Photoshop Cómo usar la Herramienta de forma personalizada en Adobe Photoshop Nuestra guía paso a paso para usar la Forma personalizada Herramienta en Adobe Photoshop, una herramienta versátil que a menudo se pasa por alto. .

A continuación, abra Photoshop para configurar su documento. Para este tutorial, digamos que el marco de imagen que está creando es un avatar de redes sociales. Los avatares suelen tener las mismas dimensiones en todos los lados, independientemente de si tienen forma circular o cuadrada..

Con esto en mente, configure el tamaño de su documento en al menos 1000 × 1000 píxeles, aunque puede ir más grande. Estas dimensiones servirán de guía para su marco.

Paso 2: configura tu herramienta de forma personalizada

Después de configurar su archivo, cree una nueva capa en su Capas panel: aquí es donde irá su marco.

A continuación, asegúrese de que su Herramienta de forma personalizada está activo. Luego verifique los colores para su forma personalizada en el Llenar y Carrera secciones.

Por el momento, actualmente tengo activa la paleta de colores predeterminada. Sin embargo, no quiero usar esos colores en mi marco de fotos, así que voy a cambiarlos.

Para cambiar estos colores, vaya a su Muestras panel. Haga clic en el icono del menú desplegable. Elija una paleta preconstruida de la lista de opciones de Adobe.

También puede cargar una paleta de colores personalizada si ya ha creado una. Si no ha hecho uno antes, consulte nuestro tutorial que explica cómo crear una paleta de colores personalizada en Photoshop.

Ahora que la nueva paleta está cargada, regrese a su Llenar y Carrera opciones para su herramienta de forma personalizada. Elige los colores que quieres usar.

Después de eso, ve a tu Forma menú desplegable y elija el diseño que mejor se adapte a su imagen.

Para este tutorial, desplácese hacia abajo hasta encontrar el círculo hueco y las formas cuadradas. Elija el círculo hueco para usar como marco de imagen, visto aquí en rojo.

Si bien Adobe tiene muchos marcos precompilados, son demasiado elegantes para nuestro propósito. Este círculo debería hacer el truco.

Paso 3: dibuja tu forma

Una vez que haya elegido su forma, haga clic y arrastre el cursor por la página para crearla..

Si accidentalmente ha sacado su imagen de la página, como yo, no se preocupe. Puedes usar el Herramienta de selección de ruta o la Herramienta de movimiento para centrar su marco. Se ha resaltado aquí en rojo..

Paso 4: aplicar un estilo de capa

Una vez que tenga su marco centrado, es posible que desee aplicarle un efecto para que se vea más “3D”.

Para hacer esto, vaya a su Capa panel y haga doble clic en la capa que contiene su forma. Aparecerá un cuadro que dice Estilo de capa.

Debajo Opciones de fusión, verás Bisel y relieve. Haga clic en esta opción para activarla y asegúrese de que la casilla de verificación junto al nombre esté llena.

Una vez que esa marca de verificación esté activa, verá que su marco de fotos ha adquirido una calidad más 3D.

Bajo la Estructura sección, puede elegir qué tipo de bisel aplicar a su forma, la profundidad del bisel, el tamaño y cuánto desea suavizar sus bordes.

Debajo Sombreado, podrás cambiar la apariencia de tus reflejos. Puede cambiar el ángulo en que la luz golpea el objeto, y también cómo interactúa la luz con el objeto.

Una vez que tenga todas sus configuraciones fijadas a su satisfacción, haga clic en Okay.

Paso 5: Rasteriza tu capa

Después de terminar su bisel, querrá seleccionar su marco para crear un “selección de cuadros”. Esto le permitirá llamar al “forma” en una fecha posterior y aplique fácilmente un relleno de color en la forma de esa selección, solo en una capa diferente.

Piense en ello como un atajo para editar.

Cuando selecciona su Varita mágica, asegúrese de que su imagen esté configurada actualmente en 16 pedazos. Recibirás una advertencia de Photoshop si no es.

Si no es así, haga clic en Imagen> Modo> 16 Bits. Debido a que está trabajando en diferentes capas, Photoshop le preguntará si desea fusionar estas capas cuando reduzca la profundidad del documento.

Hacer clic No fusionar. Todavía quieres estas capas separadas.

Después de cambiar la profundidad de su imagen, aún necesitará “rasterizar” tu capa para usar tu varita mágica. Esto significa que está convirtiendo un gráfico vectorial en uno basado en píxeles.

Para rasterizar su capa, haga clic con el botón derecho en la capa que contiene su marco de fotos y elija Rasterizar estilo de capa.

Paso 6: hacer una selección

Luego, vuelve a tu Varita mágica y seleccione el espacio vacío en el interior y exterior de su marco de imagen.

Cuando se seleccionan esas dos áreas, haga clic con el botón derecho en el espacio vacío y elija Selección inversa. Photoshop seleccionará la forma de su marco en su lugar.

Esto puede parecer un paso complicado, pero hay una buena razón para hacer la selección en este orden.

Si intenta hacer clic en su marco 3D directamente, Photoshop solo seleccionará los colores con exactamente el mismo valor y tono, no todo.

Con Selección inversa, ahora tiene una selección limpia de su marco.

Para guardar esta selección para un uso posterior, vaya a la barra de menú en la parte superior de su espacio de trabajo. Hacer clic Seleccione> Guardar selección.

Dé a su selección un nombre significativo y luego haga clic en Okay.

Paso 7: ajuste el color

Ahora que ha creado su marco de fotos en línea, es posible que desee ajustar su color..

Para ajustar el color, vaya a su Capas panel y cree una nueva capa en la parte superior de la capa que contiene su marco de imagen. Luego haga clic Seleccionar> Cargar selección.

Desde el Canal lista desplegable, elija la selección que hizo de su marco de imagen.

Una vez que la selección esté activa, vaya a su Bote de pintura o Gradiente herramienta y aplicar un poco de color a esa capa. Permanecerá dentro de los límites de esa selección..

Después de que baje el color, querrá que interactúe con el marco de la imagen debajo de él..

Para hacer esto, haga clic en el Modo de fusión menú desplegable en su Capas panel. Elige un efecto.

Como puede ver, este efecto ilumina mi marco y al mismo tiempo recoge los tonos claros y oscuros del bisel 3D debajo.

Paso 8: agrega tu imagen

Una vez que haya terminado con el marco de la imagen, es probable que desee colocar una imagen dentro de él. Para demostrar esta parte, he usado un tiro en la cabeza de mí mismo.

Para llevar este tiro en la cabeza a su marco, seleccione el Movimiento herramienta, luego haga clic y arrastre su disparo a la cabeza a la pestaña del archivo para su marco de imagen en la parte superior. He resaltado la pestaña en rojo.

Una vez que arrastre el tiro a la cabeza a la pestaña, Photoshop lo traerá a su espacio de trabajo de marco de imagen.

Libera el archivo. Photoshop colocará automáticamente el tiro en la cabeza en una nueva capa en su Capas panel.

Una vez que este tiro en la cabeza esté en una nueva capa, mueva esa capa debajo de la capa del marco de la imagen. El marco debe ser visible en la parte superior.

Si es necesario, ajuste el tiro en la cabeza para que se ajuste mejor a su marco yendo Editar> Transformación libre. Arrastre los puntos de anclaje hacia adentro para hacerlo más pequeño.

A continuación, vaya a su capa de marco de imagen. Activa tu Varita mágica herramienta, luego seleccione el espacio alrededor del exterior de su marco.

Una vez que se selecciona el área fuera de su marco, vuelva a su capa de disparo en la cabeza. Vaya al menú en la parte superior de su pantalla, luego haga clic Editar> Cortar.

Esto eliminará rápidamente el resto de su imagen fuera de su marco, creando eso “como una imagen” efecto.

Paso 9: guarde su archivo para la web

Ahora que se ha insertado el tiro en la cabeza y el marco de la imagen está listo, está listo para guardar.

Antes de guardar, asegúrese de que la capa de fondo en su archivo esté desactivada. Su marco de imagen es redondo y habrá algo de transparencia a su alrededor. Si mantiene esta capa de fondo activada, esta transparencia no tendrá efecto.

Después de que su fondo esté apagado, vaya a Archivo> Exportar> Guardar para web (heredado). Guarde su archivo como PNG. Y ahí lo tienes. Ya terminaste.

Personalizando su presencia en línea

Ahora que sabe cómo crear un marco de fotos digital, puede usarlo para personalizar su presencia en línea, ofreciéndole una apariencia consistente en varios sitios y aplicaciones.

Sin embargo, no detengas tu educación en Photoshop allí. Recomendamos aprender a crear un degradado personalizado con Photoshop Cómo crear un degradado personalizado con Photoshop CC Cómo crear un degradado personalizado con Photoshop CC En este artículo, le mostraremos cómo crear un degradado personalizado con Photoshop CC en cuatro pasos simples próximo.