EntradaBordes redondos en photoshop cs6. Cómo redondear las esquinas de una imagen con CSS sin Photoshop
Todos adoran los ángulos rectos de las imágenes. Pero aún así, hay ocasiones en las que estas mismas esquinas deben redondearse. Entonces, el programa Photoshop volverá a acudir en tu ayuda. En este artículo, veremos una de las muchas formas en que puede hacer esto. Tenga en cuenta que mi método también implica un pequeño recorte de la imagen alrededor de los bordes, esto es una especie de sacrificio en nombre de las esquinas redondeadas.
Para aquellos a los que les gusta más claridad, grabé un video tutorial, que pueden ver al final de este tutorial. Así que comencemos a redondear las esquinas de la imagen:
Paso 1
De forma predeterminada, todas las imágenes abiertas en Photoshop se convierten en la imagen de fondo. Photoshop nombra esta capa como "Fondo" y también la bloquea de ediciones innecesarias. Esto se nos indica mediante un pequeño icono de candado.
Para desbloquear dicha capa, debe hacer doble clic en ella. Aparece el cuadro de diálogo Nueva capa. No cambie nada, simplemente haga clic en Aceptar. La cerradura debería desaparecer ahora.
Paso 5
En el panel de capas, haga clic en la primera capa con nuestra imagen original y presione el atajo de teclado Ctrl + Shift + I. Como resultado, debemos seleccionar toda el área fuera de los límites de nuestro cuadrado. Se llama . Eche un vistazo más de cerca a lo que ha cambiado:
Paso 6
Ahora presione la combinación de teclas Ctrl + X (editar - cortar) para eliminar el área seleccionada. La selección debería desaparecer y, donde una vez estuvo la imagen, aparecerá un fondo de tablero de ajedrez (transparencia).
Paso 7
Ahora hagamos invisible nuestra capa de forma. Para hacer esto, en el panel de capas, haga clic en el icono del ojo opuesto a la capa con el cuadrado. Aquí está la imagen original con esquinas redondeadas.
Paso 8
Ejecuta el comando Imagen - para que Photoshop elimine todo el espacio extra alrededor de la imagen. Como resultado, el modo de transparencia solo debería ser visible en las esquinas.
En el futuro, para utilizar una imagen de este tipo, debe guardarse en Formato PNG! En este caso, las esquinas permanecerán transparentes. De lo contrario, si guarda, por ejemplo, en formato JPG, las esquinas se volverán automáticamente con un fondo blanco.
Entonces todo está listo. Una imagen con esquinas redondeadas se verá así:
¿Y cómo hacer solo, por ejemplo, una esquina redondeada?
Muy simple. Volvamos al escenario cuando dibujamos la forma. Estírelo para que solo vea una esquina redondeada y las otras tres estén ocultas fuera del lienzo. Aquí, y luego siga las instrucciones anteriores. Todo es lo mismo.
¡Espero que las instrucciones te hayan ayudado y puedas hacer algo genial! Buena suerte.
Si detecta un error en el texto, selecciónelo y presione Ctrl + Enter. ¡Gracias!
Todos los navegadores modernos admiten los estándares de marcado de hipertexto HTML5 y las hojas de estilo CCS3. Y si su sitio (plantilla) es compatible con los estándares modernos, puede realizar cambios en el diseño, como redondeo de esquinas, sombras, relleno degradado, sin recurrir a la ayuda de editores gráficos.
Los webmasters suelen utilizar esquinas redondeadas para bloques y marcos en sitios web. En este artículo, le diré cómo redondear las esquinas de imágenes y fotos en el sitio sin usar programas de terceros usando solo CSS.
Para que los ejemplos proporcionados en el artículo se muestren correctamente en su pantalla, debe utilizar la mayor cantidad de versiones frescas navegadores, FireFox, Chrome y aquellos basados en ellos: Yandex Browser, Amigo, etc.
Redondeo de esquinas para bloques DIV
Según el estándar CSS3, para que el bloque DIV tenía esquinas redondeadas, necesita ser estilizado radio de borde, por ejemplo así:
Radio del borde: 10px;
Para mayor claridad, dibujemos dos bloques con esquinas rectas y redondeadas:
Bloque de ángulo recto
Bloque de esquina redondeado
Redondeo de las esquinas de las imágenes
Por analogía con el ejemplo anterior, puede redondear las esquinas de las imágenes en el sitio, como fotografías. Para mayor claridad, redondearemos las esquinas de la foto de la página.
Aquí está la imagen sin procesamiento CSS
Ahora con esquinas redondeadas:
Radio del borde: 10px;
Para hacerlo completamente "bonito", desde el principio añadiremos ribete ...
Radio del borde: 10px; borde: 5px #ccc sólido;
y luego sombras:
Radio del borde: 10px; borde: 5px #ccc sólido; caja de sombra: 0 0 10px # 444;
Opción a continuación ( esquinas redondeadas con sombra sin borde) es muy similar a una alfombrilla de ratón:
Radio del borde: 10px; caja de sombra: 0 0 10px # 444;
Y finalmente, una burla total de la imagen.
Radio de borde: 50%; borde: 5px #cfc sólido; caja de sombra: 0 0 10px # 444;
Si abre la imagen en una nueva ventana, verá que (la imagen) no ha cambiado y que todas las esquinas, sombras, etc. son solo el resultado del procesamiento. CSS estilos con su navegador.
Pequeña digresión lírica
Estilo frontera aumenta el tamaño de la imagen en la cantidad del borde. Si se especifica el valor borde: 5px, la imagen final será más ancha y alta en 10 píxeles. Considere esto, en algunos casos el diseño del sitio puede "irse".
Un estilo sombra de la caja no afecta el tamaño de la imagen, la sombra parece correr sobre los elementos vecinos. Al usarlo, el diseño del sitio no sufre.
Cómo redondear las esquinas de las imágenes en WordPress
En todos los ejemplos anteriores, escribí los estilos directamente en las etiquetas código HTML... Por ejemplo, este último se ve así:
Esto es bueno cuando necesita rediseñar una imagen o foto. ¿Y si quieres cambiarlo todo? Bueno, no se escalará por todo su sitio para editar la visualización de cada uno. En la mayoría de los casos Etiqueta de WordPress IMG define varias clases de estilos. Uno por el nombre de archivo único con la imagen, el otro por tamaño y también por alineación. Puede complementar uno de ellos con los parámetros anteriores.
Por ejemplo, para todas las imágenes para las que no se especifica alineación, en el archivo style.css tu Temas de WordPress escribe lo siguiente:
Alignnone (radio de borde: 10px; borde: 5px #cfc sólido; sombra de cuadro: 0 0 10px # 444;)
Cualquiera de los métodos más difíciles para todas las imágenes del sitio. Anular el estilo de todas las etiquetas IMG:
Img (radio de borde: 10px; borde: 5px #cfc sólido; sombra de cuadro: 0 0 10px # 444;)
La última opción es adecuada no solo para WordPress, sino para cualquier CMS. E incluso por un simple HTML páginas en el caso de que, al mostrar imágenes, la etiqueta IMG no se asignan clases de estilo. Pero ten cuidado. Si anula las opciones de visualización de la etiqueta IMG tú cambias apariencia¡TODAS las imágenes en el sitio!
En lugar de una conclusión
Todos los ejemplos de este artículo son condicionales y tienen como único objetivo demostrar algunas de las posibilidades de CSS para el procesamiento de imágenes y mostrar lo simple que es.
Buenos días, tarde, tarde o noche a todos. Dmitry Kostin está contigo una y otra vez. Una vez miré diferentes imágenes y luego me gustaron algunas de ellas. Y le gustó el hecho de que tuvieran bordes redondeados. De alguna manera parece más interesante de inmediato. ¿No te parece? Por eso, en la lección de hoy, me gustaría decirte cómo redondear las esquinas en Photoshop para que la foto se vea más interesante.
Lo que me encanta de Photoshop es que en muchos casos se puede hacer lo mismo de varias formas. Así que está aquí. Vayamos a nuestro photoshop.
Anti-aliasing simple
Suavizado usando bordes
Este método es similar al anterior, pero sigue siendo muy diferente. Haremos todo con la misma imagen.
Creando una forma
Aquí está el tercer método que ya es radicalmente diferente de los dos anteriores. Así que tómate un descanso por un par de segundos y sigue adelante. No cambiaré la imagen y volveré a cargar este auto en Photoshop.
¿Ves lo que hiciste al final? La imagen se ha vuelto con bordes redondeados, y todo debido al hecho de que se muestra solo en la forma en que está nuestro rectángulo redondeado dibujado. Pero ahora puede recortar la foto adicional con la herramienta "Marco", o guardar la imagen de inmediato y ya tendrá una imagen separada con esquinas redondeadas.
Intente hacer todo usted mismo y, al mismo tiempo, dígame cuál de los métodos presentados es más preferible para usted.
Y, por cierto, si tiene lagunas en Photoshop o simplemente desea estudiarlo completamente en el menor tiempo posible, le recomiendo que mire uno maravilloso curso de photoshop para principiantes... El curso está excelentemente hecho, todo se cuenta y se muestra muy bien, y cada material se analiza con gran detalle.
Bueno, por hoy estoy terminando mi lección. No olvide suscribirse a nuevos artículos y compartirlos con sus amigos. Me alegré de verte en mi blog. Espero verte denuevo. Adiós.
Saludos cordiales, Dmitry Kostin
En este rápido tutorial, le mostraré cómo puede crear esquinas redondeadas en Photoshop usando métodos simples enmascaramiento y filtros.
Podrá ajustar el radio de la esquina para redondear el borde de su forma, texto, etc. Este es un método rápido y fácil para crear esquinas redondeadas. Puede utilizar una máscara de capa para crearlos.
Usando la serie pasos sencillos en Photoshop, puede hacer un rectángulo redondeado. Photoshop no tiene un filtro o herramienta para hacer una esquina redonda de inmediato, pero puede hacerlo con Illustrator. Le permitirá crear un efecto de esquina redondeada para casi todos los objetos. En él debes ir al menú. Efectos> Estilizar> Esquinas redondeadas(Efectos> Estilizar> Esquinas redondeadas).
Paso 1
En este tutorial rápido, le mostraré un método simple para obtener esquinas redondeadas en Photoshop usando texto rasterizado, forma o algún tipo de imagen. Tome una imagen vectorial de una estrella con esquinas afiladas (este método también funcionará bien con ángulos rectos).
Paso 2
Ahora necesitas rasterizar la capa. Para hacer esto, haga clic derecho en la miniatura de la capa de estrella en la paleta de capas y en Menú de contexto escoger Rasterizar capa(Rasterizar capa). Debe hacer lo mismo si está utilizando una capa de texto.
Paso 3
Ir al menú Filtro> Desenfocar(Filtro> Desenfocar) y seleccione desenfoque gaussiano(Desenfoque gaussiano). El radio del desenfoque dependerá del tamaño de su imagen y del resultado que le gustaría obtener. Elegiré un radio de 5px.
Paso 4
Mantenga presionada la tecla "Ctrl" y haga clic en la miniatura de la capa para activar la selección de la imagen. A continuación, vaya al menú Destacando y elige Refinar borde(Seleccione> Perfeccionar borde). Puedes experimentar con los parámetros Anti-aliasing(Suave) y Plumando(Pluma) para seleccionar el efecto deseado. Contraste(Contraste) haga 100.
Paso 5
Toma el color de la forma, en nuestro caso es amarillo y llena toda la selección con ese color. Puede hacer esto presionando la combinación de teclas "Shift + F5".
Paso 6
Sin anular la selección, debe agregar una máscara de capa haciendo clic en el icono ubicado en la parte inferior de la paleta de capas. Eso es todo, ahora la estrella tiene esquinas redondeadas.
Puede utilizar el mismo método para crear texto con esquinas redondeadas, como se muestra en la imagen a continuación. Ahora puedes crear tu propia fuente.
En esta sección de mi sitio, decidí colocar Lecciones de Photoshop, que puede resultarle útil a la hora de crear un diseño de sitio web. Creo que no será superfluo, de mi parte, antes de empezar a aprender Photoshop, presentaros photoshop de teclas de acceso rápido... Utilizando photoshop de teclas de acceso rápido, facilitará su trabajo y ahorrará tiempo. ...
Mi primer Tutorial de Photoshop te diré como esquinas redondas Foto.
Al crear sitios, a menudo tiene que enfrentarse al problema de cómo redondear las esquinas de la imagen o cómo esquinas redondas Foto. En este tutorial Photoshop te enseñare como esquinas redondas figura en Photoshop... También esto Lección de Photoshop te permitirá esquinas redondas Foto. Espero que esto te quede claro. Después de todo, por Photoshop tanto la imagen como la fotografía son una sola cosa. Uso Adobe en mi trabajo Photoshop SC5, versión rusa. Bueno, no soy fuerte en idiomas.
Mi lección de hoy trata sobre redondear las esquinas de una foto en Photoshop. Tomemos una foto juntos con esquinas redondeadas como la mía.
1. Implementar redondear esquinas en Photoshop, abrir con Photoshop la imagen (foto) que necesitamos. Por ejemplo, tomé una de las fotos de mi archivo de fotos.
2. Llevamos las dimensiones de la imagen a los parámetros que necesitamos. Para hacer esto, presione ALT + CTRL + I. Se abre la ventana Tamaño de imagen. Establecemos las dimensiones que necesitamos. Puede simplemente recortar la imagen al tamaño deseado.
3. Seleccione la imagen (CTRL + A) (aparecerá una línea de puntos alrededor del perímetro) y cópiela (CTRL + C); Copiamos la foto para que la imagen original permanezca sin cambios, después de implementar redondear esquinas en Photoshop... Aunque es posible trabajar sobre el original, cuando las esquinas redondeadas estén listas, simplemente guardaremos la foto como otra imagen.
4. Abra una nueva ventana (CTRL + N), establezca el tamaño de imagen deseado y haga clic en "Aceptar". Tenga en cuenta que he configurado el fondo en "transparente". Puede establecer inmediatamente el fondo del color que necesita;
5. Pegue la imagen copiada en una nueva ventana (CTRL + V) y cree nueva capa(CTRL + MAYÚS + N). En esta capa, usando la herramienta rectángulo esquinas redondeadas"dibuje un rectángulo del tamaño requerido. El color del rectángulo no importa. La selección de la herramienta se realiza presionando el botón derecho del mouse. O simplemente presionando la tecla (U). Establezca el radio de la ronda en su discreción (ver la figura siguiente);
Si es necesario, puede mover la forma dibujada usando las flechas del teclado o usando el mouse mientras mantiene presionada la tecla izquierda. No olvide activar el "mover" en la barra de herramientas (botón superior). Tú también puedes cambiar el tamaño cifras. Para hacer esto, presione (CTRL + T) y arrastre la forma al tamaño deseado usando el mouse mientras mantiene presionada la tecla izquierda. Si desea cambiar el tamaño con las mismas proporciones, debe mantener presionada la tecla MAYÚS y arrastrar alrededor de la esquina de la forma.
6. Vaya al panel de capas. Mantenga presionada la tecla CTRL y haga clic con el botón izquierdo en la vista previa (imagen) de la capa del rectángulo. Aparece un contorno punteado de la forma.
7. Ve a la capa inferior. Para hacer esto, en el panel de capas, haga clic a la derecha de la imagen. En nuestro caso, la capa 1. La selección azul irá a la capa 1.
8. Presione CTRL + MAYÚS + I. Aparecerá una selección de puntos a lo largo del borde de la parte de la imagen que está fuera de nuestro rectángulo que tiene esquinas redondeadas.
9. Presione DEL en el teclado. Se eliminará la parte de la imagen que está fuera del rectángulo.
10. Vuelva a activar la capa del rectángulo. Lo eliminamos haciendo clic en el icono de la papelera.
11. Presione la tecla "M" y haga clic izquierdo en cualquier lugar de la imagen. La selección ha sido eliminada. Listo. Puede guardar la imagen que obtuvimos realizando & redondear esquinas en Photoshop, en el formato que necesitamos.
Si dicha imagen se utilizará para crear un diseño de sitio, guárdelo para la Web y los dispositivos (ALT + MAYÚS + CTRL + S).
12. ¡Atención! Si tiene en los bordes de la imagen con esquinas redondeadas hay píxeles transparentes, es necesario recortar. Para hacer esto, haga clic en "Imagen", seleccione "Recortar", en la ventana que aparece, establezca la configuración como en mi imagen y haga clic en "Aceptar". Se cambiará el tamaño del lienzo al tamaño de la imagen y se eliminarán los píxeles transparentes adicionales.
los Lección de Photoshop se puede utilizar tanto para fotografías ovaladas como rizadas. Para hacer esto, en el paso 5, en lugar del "rectángulo con esquinas redondeadas"seleccione la herramienta" elipse "," polígono "o" forma arbitraria ". redondeando esquinas.