Cómo crear un botón web usando Paint.net

Paint.net es una herramienta muy poderosa para editar y crear imágenes. Viene con un grupo de características. Puede hacer muchas cosas con este software gratuito, como hacer que las imágenes sean transparentes, crear marcas de agua, etc. En este artículo, veremos los pasos para crear un botón web en paint.net.

Crear un botón web usando Paint.net

Puede haber múltiples situaciones en las que el usuario necesite un botón web personalizado para implementar en su sitio web. Por ejemplo, si está creando una tienda de comercio electrónico, puede hacer que sus blogs sean atractivos introduciendo botones web en diferentes diseños atractivos que obliguen a los usuarios a hacer clic.

Comencemos el tutorial.

1] Inicie Paint.net^{(Launch Paint.net)} en su PC y vaya a » File > New » para crear una página nueva (si el software no abre una página nueva de manera predeterminada).

Leer^(Read) : Cómo recortar y rotar una imagen en Paint.NET^{(How to Crop and Rotate a Picture in Paint.NET)} .

2] Debe tener las siguientes herramientas disponibles en la pantalla:

Caja de herramientas
Cuadro de historial
caja de capas
caja de colores

De lo contrario, habilítelos haciendo clic en los iconos respectivos disponibles en la esquina superior derecha. Vea la siguiente captura de pantalla.

3] Ahora, tenemos que agregar diferentes capas para crear un botón. Agregue una capa haciendo clic en » Agregar nueva capa^{(Add New Layer)} » en el cuadro » Capas^(Layers) «.

Leer^(Read) : Cómo hacer una miniatura de YouTube en Paint.net^{(How to Make a YouTube Thumbnail in Paint.net)} .

4] Debido a que crearemos muchas capas, es mejor cambiar el nombre de cada capa para evitar confusiones. Haga doble^(Double) clic en la capa recién agregada y cambie su nombre a » Base «. Puede dar cualquier nombre según su elección.

5] Estamos creando un botón rectangular redondeado. Para esto, seleccione la opción » Formas » del cuadro » ^(Shapes)Herramientas^(Tools) » y elija su color favorito del cuadro » Color «. Hay más colores disponibles en la opción » Más^(More) » del cuadro de color.

6] Tenemos que seleccionar » Rectángulo redondeado^{(Rounded Rectangle)} » con » Modo relleno»^{(Filled Mode)} .

Leer^(Read) : Cómo crear y agregar un efecto de Sombra paralela a una imagen en Paint.NET^{(How to create and add Drop Shadow effect to an image in Paint.NET)} .

7] Mantenga^(Press) presionado el botón izquierdo del mouse y arrastre para crear la forma rectangular redondeada. Después de dibujarlo, también puede cambiar sus dimensiones.

8] Ahora, agregaremos el efecto degradado al botón. Para esto, agregue una nueva capa y cambie su nombre a » Gradiente^(Gradient) «.

9] Haga clic en la capa » Base » y seleccione » ^(Base)Varita mágica^{(Magic Wand)} » en el cuadro de herramientas. Haga clic^(Click) en la forma de rectángulo redondeado después de seleccionar la varita mágica^{(Magic Wand)} .

10] Elija^(Choose) un color más claro y seleccione » Degradado^(Gradient) » en el cuadro de herramientas.

11] Cuando selecciona el degradado^(Gradient) , verá diferentes tipos de texturas disponibles en la barra de herramientas. Tienes que seleccionar la textura “ Lineal ”. ^(Linear)Coloque el mouse como se indica en la siguiente captura de pantalla. Ahora, mantenga presionado el botón izquierdo del mouse y arrástrelo hacia el borde inferior de la forma rectangular redondeada mientras presiona la tecla » Shift «.

12] Ahora, tenemos que escribir un texto personalizado en el botón. Para esto, agregue una capa más y cambie su nombre a » Texto^(Text) «. Ahora, seleccione » Texto^(Text) » en el cuadro de herramientas y elija el color de su elección. Haga clic^(Click) dentro de la forma rectangular redondeada y escriba su texto allí. También puede cambiar el estilo de fuente y el tamaño del texto.

13] Ahora, tenemos que darle un toque brillante a la forma. Para ello, añade una capa más y cámbiale el nombre a “ Brillosa^(Glossy) ”. Esta capa debe estar en la parte superior de todas las capas. Si no, arrástrelo para traerlo a la parte superior.

14] Ahora, seleccione la capa base. Luego seleccione la Varita Mágica^{(Magic Wand)} y haga clic en la forma rectangular redondeada. Después de eso, regrese a la capa Brillante^(Glossy) y seleccione el color blanco del cuadro de colores.

Ahora, seleccione la herramienta » Formas^(Shapes) » del cuadro de herramientas y haga clic en » Tipo de forma^{(Shape type)} » en la barra de herramientas para seleccionar » Elipse^(Ellipse) «. Debe seleccionar la Elipse^(Ellipse) en el modo relleno (consulte el paso 6 de este artículo).

A continuación, debe dibujar la elipse de tal manera que algunas de sus partes queden en la parte superior del rectángulo redondeado. Cuando haya terminado, presione » Enter «.

15] Haz doble^(Double) clic en la capa Glossy para abrir sus propiedades y reducir su opacidad.

16] Ahora, tenemos que agregar un borde a la forma. Para ello, selecciona la capa base y ve a “ Effects > Stylize > Outline ”.

17] Varíe^(Vary) el grosor y la intensidad del contorno para darle a la forma el aspecto de un botón.

18] En el último paso, tenemos que guardar el botón. Para esto, presione » Ctrl + S » y seleccione el formato de imagen en el menú desplegable. Puede guardar la imagen en JPG , PNG , BMP y muchos otros formatos. Le pedirá que aplane la imagen o no. Seleccione^(Select) » Aplanar^(Flatten) «.

Leer^(Read) : Software gratuito para eliminar marcas de agua y herramienta en línea^{(Free Watermark Remover software & Online tool)} .

El botón web está listo. Siguiendo los pasos anteriores, puede crear botones web en diferentes colores. También puede seleccionar una textura de degradado diferente para dar a sus botones un aspecto diferente.

Eso es todo. Espero^(Hope) que te haya gustado el artículo. No^(Don) olvides compartir tus opiniones en la sección de comentarios.

Leer^(Read) : Cómo agregar una imagen transparente sobre una captura de pantalla con Paint^{(How to add a Transparent Image over a Screenshot with Paint)} .

Paint.net is a very powerful tool for editing and creating images. It comes with a pool of features. You can do a lot of things with this free software like making the images transparent, creating watermarks, etc. In this article, we will see the steps of creating a web button in paint.net.

Create a Web Button using Paint.net

There can be multiple situations where the user needs a custom web button to implement in his website. For example, if you are creating an eCommerce store, you can make your blogs attractive by introducing web buttons in different attractive designs that force users to click.

Let’s start the tutorial.

1] Launch Paint.net on your PC and go to “File > New” to create a new page (if the software does not open a fresh page by default).

Read: How to Crop and Rotate a Picture in Paint.NET.

2] You should have the following tools available on the screen:

Tools box
History box
Layers box
Colors box

If not, enable them by clicking on the respective icons available in the top right corner. See the below screenshot.

3] Now, we have to add different layers to create a button. Add a layer by clicking the “Add New Layer” in the “Layers” box.

Read: How to Make a YouTube Thumbnail in Paint.net.

4] Because we will create many layers, it is better to rename each layer to avoid confusion. Double click on the newly added layer and change its name to “Base.” You can give any name as per your choice.

5] We are creating a rounded rectangular button. For this, select the “Shapes” option from the “Tools” box and choose your favorite color from the “Color” box. More colors are available in the “More” option of the color box.

6] We have to select “Rounded Rectangle” with “Filled Mode.”

Read: How to create and add Drop Shadow effect to an image in Paint.NET.

7] Press and hold the left button of your mouse and drag to create the rounded rectangular shape. After drawing it, you can also change its dimensions.

8] Now, we will add the gradient effect to the button. For this, add a new layer and change its name to “Gradient.”

9] Click on the “Base” layer and select “Magic Wand” from the tools box. Click on the rounded rectangle shape after selecting the Magic Wand.

10] Choose a lighter color and select “Gradient” from the tools box.

11] When you select the Gradient, you will see different types of textures available on the toolbar. You have to select the “Linear” texture. Place your mouse as directed in the below screenshot. Now, press and hold the left click on the mouse and drag it to the lower edge of the rounded rectangular shape while pressing the “Shift” key.

12] Now, we have to write a custom text on the button. For this, add one more layer and change its name to “Text.” Now, select “Text” from the tools box and choose the color of your choice. Click inside the rounded rectangular shape and write your text there. You can also change the font style and size of the text.

13] Now, we have to give a glossy touch to the shape. For this, add one more layer and change its name to “Glossy.” This layer should be at the top of all the layers. If not, drag it to bring at the top.

14] Now, select the base layer. Then select the Magic Wand and click on the rounded rectangular shape. After that, come back to the Glossy layer and select the white color from the colors box.

Now, select the “Shapes” tool from the tools box and click on the “Shape type” on the toolbar to select “Ellipse.” You have to select the Ellipse in the filled mode (refer to step 6 of this article).

Next, you have to draw the ellipse in such a way that some of its parts lies on the topmost part of the rounded rectangle. When you are done, press “Enter.”

15] Double click on the Glossy layer to open its properties and reduce its opacity.

16] Now, we have to add a border to the shape. For this, select the base layer and go to “Effects > Stylize > Outline.”

17] Vary the thickness and intensity of the outline to give the shape the look of a button.

18] In the last step, we have to save the button. For this, press “Ctrl + S” and select the image format from the drop-down menu. You can save the image in JPG, PNG, BMP, and many other formats. It will ask you to flatten the image or not. Select “Flatten.”

Read: Free Watermark Remover software & Online tool.

The web button is ready. By following the above steps, you can create web buttons in different colors. You can also select a different gradient texture to give your buttons a different look.

That’s it. Hope you liked the article. Don’t forget to share your views in the comments section.

Read: How to add a Transparent Image over a Screenshot with Paint.

Rate this post