[Ayuda] Crear icono con esquinas transparentes

Buenas, necesito crear un icono de 100x100 que tenga la forma que os pongo a continuación (es un ejemplo), con las siguientes características.

-Fondo transparente
-Borde redondeado
-Borde externo gris
-Borde interno negro
-Degradado en el interior en negro

Ejemplo: Imagen

No he andado con photoshop casi, por lo que ni idea de cómo hacerlo. Ahora mismo tendría acceso a Gimp y Paint.net, por si en vez de hacerlo me decís lo pasos o me adjuntais algún tutorial.

Muchas gracias, un saludo
¿Quieres que te lo hagan o que te expliquen los pasos? Con Gimp no es muy complejo, si quieres te ayudo.

Haces una imagen de 100x100 con fondo transparente y luego haces selecciones rectangulares con el borde redondeado y cada vez de menor tamaño y rellenas la selección, la primera de gris, la segunda de negro y la última con el degradado que quieras. Si quieres hacer modificaciones posteriores con facilidad puedes tener cada parte en una capa distinta.
amuchamu escribió:¿Quieres que te lo hagan o que te expliquen los pasos? Con Gimp no es muy complejo, si quieres te ayudo.

Haces una imagen de 100x100 con fondo transparente y luego haces selecciones rectangulares con el borde redondeado y cada vez de menor tamaño y rellenas la selección, la primera de gris, la segunda de negro y la última con el degradado que quieras. Si quieres hacer modificaciones posteriores con facilidad puedes tener cada parte en una capa distinta.


Lo rápido es que me lo den hecho, en cambio si lo hago yo para otra vez ya lo sé hacer [ginyo]

He creado la imagen 100x100 con fondo transparente.
He utilizado Selección de rectángulos
He rellenado el rectángulo de negro
Ahora no puedo seleccionar: Filtro-> Decorativo -> Esquinas redondeadas. Está en gris.

Según este enlace: http://docs.gimp.org/2.6/es/script-fu-r ... rners.html Debo tener una sóla capa, he probado con una para todo o una para rectángulo, y nada, sigue en gris. ¿Que he hecho mal?

Gracias por la ayuda
xals_punk escribió:Algo Asi??

Imagen Imagen


Si, algo así ^^

Eso para lo que necesito me sirve, ahora tengo la curiosidad de cómo hacerlo [oki]

He tenido que cambiar el tamaño a 72x72, me había confundido. Eso si, con el Gimp si sabía hacer esto último.
legolas2069 escribió:
amuchamu escribió:¿Quieres que te lo hagan o que te expliquen los pasos? Con Gimp no es muy complejo, si quieres te ayudo.

Haces una imagen de 100x100 con fondo transparente y luego haces selecciones rectangulares con el borde redondeado y cada vez de menor tamaño y rellenas la selección, la primera de gris, la segunda de negro y la última con el degradado que quieras. Si quieres hacer modificaciones posteriores con facilidad puedes tener cada parte en una capa distinta.


Lo rápido es que me lo den hecho, en cambio si lo hago yo para otra vez ya lo sé hacer [ginyo]

He creado la imagen 100x100 con fondo transparente.
He utilizado Selección de rectángulos
He rellenado el rectángulo de negro
Ahora no puedo seleccionar: Filtro-> Decorativo -> Esquinas redondeadas. Está en gris.

Según este enlace: http://docs.gimp.org/2.6/es/script-fu-r ... rners.html Debo tener una sóla capa, he probado con una para todo o una para rectángulo, y nada, sigue en gris. ¿Que he hecho mal?

Gracias por la ayuda


La herramienta de selección rectangular tiene una opción llamada "esquinas redondeadas", la marcas y puedes elegir el radio del redondeo. Si no, puedes hacer la selección normal y darle a selección -> rectángulo redondeado.

El filtro que comentas tampoco lo puedo usar, de hecho no lo he usado nunca así que no sé cuál será el problema.
legolas2069 escribió:
xals_punk escribió:Algo Asi??

Imagen Imagen


Si, algo así ^^

Eso para lo que necesito me sirve, ahora tengo la curiosidad de cómo hacerlo.

yo es que utilizo Photoshop

Creo un Lienzo de 100x100 y de-selecciono la capa de fondo blanca para que sea transparente.

Luego mediante la Herramienta de rectángulo Redondeado creo uno de las medidas del Lienzo de color Gris.

Después duplico la capa 2 veces una la reduzco un poco y la coloreo de Negro y la otra la reduzco un poco mas basándome en el segundo rectángulo y mediante opciones de fusión selecciono superposición de degradado y le pongo un degradado negro.

PD: No se si es la mejor manera de Hacerlo con Photoshop pero es que he aprendido photoshop de manera Autodidacta sin que nadie me enseñe .
Te lo pongo paso a paso con Gimp:

- Nueva imagen, 100x100, transparente
- Selección -> Rectángulo redondeado, 25% (o el % que quieras).
- Eliges la herramienta de relleno (el cubo) y el color gris con el que pintar
- Pintas la selección
- Haces una selección cuadrada. Para hacerlo más exacto puedes usar las opciones de la barra de herramientas en vez de arrastrar con el ratón. Si quieres que el borde gris sea de sólo 1 pixel, pues la selección será de 1,1 a 98,98.
- Selección -> Rectángulo redondeado, el mismo % que antes
- Eliges la herramienta de relleno y el color negro
- Pintas la selección
- Repites la selección rectangular, si quieres que el borde negro sea de 1 pixel entonces la selección será de 2,2 a 97,97
- Selección -> Rectángulo redondeado, el mismo %
- Herramienta de mezcla (la siguiente al cubo), eliges el tipo de degradado, los colores, etc
- Pintas la selección.

Y ya estará. Explicado igual parece algo largo pero se tarda 1min. Si quieres que los bordes sean mayores sólo tienes que modificar las selecciones. Si lo haces en capas después será más sencillo de modificar.

Con los bordes de 1px y el degradado radial por arriba, el resultado es éste:

Imagen

Ya que estoy, comentarte que con inkscape sería muchísimo más sencillo.
Gracias por la ayuda a todos, me ha servido mucho ^^

En otro momento probaré el paso a paso con Gimp, porque ahora mismo voy a piñon fijo y ya que lo tengo quiero meterme con lo siguiente (curro).

Xals, el photoshop no lo tenía aquí por temas de licencia.

¿Que es eso de Inkscape?

Un saludo y gracias de nuevo
8 respuestas