Paint.net je vrlo moćan alat za uređivanje i stvaranje slika. Dolazi s nizom značajki. S ovim besplatnim softverom možete učiniti mnogo stvari kao što su transparentnost slika, stvaranje vodenih žigova itd. U ovom članku ćemo vidjeti korake stvaranja web gumba na paint.net-u.

Izradite web gumb koristeći Paint.net

Može postojati više situacija u kojima korisnik treba prilagođeni web gumb za implementaciju na svoju web stranicu. Na primjer, ako stvarate trgovinu za e-trgovinu, svoje blogove možete učiniti atraktivnim uvođenjem web gumba u različitim atraktivnim dizajnom koji tjeraju korisnike da kliknu.

Počnimo s tutorialom.

1] Pokrenite Paint.net^{(Launch Paint.net)} na računalu i idite na “ File > New ” da biste stvorili novu stranicu (ako softver prema zadanim postavkama ne otvara novu stranicu).

Pročitajte^(Read) : Kako izrezati i rotirati sliku u Paint.NET-u^{(How to Crop and Rotate a Picture in Paint.NET)} .

2] Trebali biste imati sljedeće alate dostupne na ekranu:

1. Kutija za alate
2. Okvir za povijest
3. Kutija za slojeve
4. Kutija za boje

Ako nisu, omogućite ih klikom na odgovarajuće ikone dostupne u gornjem desnom kutu. Pogledajte donju snimku zaslona.

3] Sada moramo dodati različite slojeve da bismo stvorili gumb. Dodajte sloj klikom na " Dodaj novi sloj^{(Add New Layer)} " u okviru " Slojevi^(Layers) ".

Pročitajte^(Read) : Kako napraviti YouTube sličicu u Paint.net-u^{(How to Make a YouTube Thumbnail in Paint.net)} .

4] Budući da ćemo stvoriti mnogo slojeva, bolje je preimenovati svaki sloj kako ne bi došlo do zabune. Dvaput^(Double) kliknite na novododani sloj i promijenite mu naziv u " Osnova^(Base) ". Možete dati bilo koje ime po vašem izboru.

5] Stvaramo zaobljeni pravokutni gumb. Za to odaberite opciju “ Oblici^(Shapes) ” iz okvira “ Alati^(Tools) ” i odaberite svoju omiljenu boju iz okvira “ Boja^(Color) ”. Više boja dostupno je u opciji “ Više^(More) ” okvira boja.

6] Moramo odabrati " Rounded Rectangle " s " Filled Mode ".

Pročitajte^(Read) : Kako stvoriti i dodati efekt sjene na sliku u Paint.NET-u^{(How to create and add Drop Shadow effect to an image in Paint.NET)} .

7] Pritisnite^(Press) i držite lijevu tipku miša i povucite kako biste stvorili zaobljeni pravokutni oblik. Nakon što ga nacrtate, možete promijeniti i njegove dimenzije.

8] Sada ćemo gumbu dodati efekt gradijenta. Za to dodajte novi sloj i promijenite njegovo ime u " Gradient ".

9] Kliknite na sloj “ Baza ” i odaberite “ ^(Base)Magic Wand ” iz okvira s alatima. Kliknite^(Click) na zaobljeni pravokutni oblik nakon što odaberete Čarobni štapić^{(Magic Wand)} .

10] Odaberite^(Choose) svjetliju boju i odaberite “ Gradient ” iz okvira s alatima.

11] Kada odaberete Gradient , vidjet ćete različite vrste tekstura koje su dostupne na alatnoj traci. Morate odabrati " Linear " teksturu. Postavite miša prema uputama na snimci zaslona ispod. Sada pritisnite i držite lijevi klik na mišu i povucite ga do donjeg ruba zaobljenog pravokutnog oblika dok držite tipku “ Shift ”.

12] Sada moramo napisati prilagođeni tekst na gumb. Za to dodajte još jedan sloj i promijenite mu naziv u " Tekst^(Text) ". Sada odaberite “ Text ” iz okvira s alatima i odaberite boju po svom izboru. Kliknite^(Click) unutar zaobljenog pravokutnog oblika i tamo upišite svoj tekst. Također možete promijeniti stil fonta i veličinu teksta.

13] Sada, moramo dati sjajni dodir obliku. Za to dodajte još jedan sloj i promijenite mu ime u " Sjajni^(Glossy) ". Ovaj sloj bi trebao biti na vrhu svih slojeva. Ako ne, povucite ga da se vrati na vrh.

14] Sada odaberite osnovni sloj. Zatim odaberite Čarobni štapić^{(Magic Wand)} i kliknite na zaobljeni pravokutni oblik. Nakon toga, vratite se na Glossy sloj i odaberite bijelu boju iz okvira boja.

Sada odaberite alat " Oblici^(Shapes) " iz okvira s alatima i kliknite " Vrsta oblika^{(Shape type)} " na alatnoj traci da odaberete " Elipsa^(Ellipse) ". Morate odabrati elipsu^(Ellipse) u načinu popunjenosti (pogledajte 6. korak ovog članka).

Zatim morate nacrtati elipsu na način da neki njezini dijelovi leže na gornjem dijelu zaobljenog pravokutnika. Kada završite, pritisnite “ Enter ”.

15] Dvaput^(Double) kliknite na sjajni^(Glossy) sloj da otvorite njegova svojstva i smanjite njegovu neprozirnost.

16] Sada moramo dodati obrub obliku. Za to odaberite osnovni sloj i idite na " Effects > Stylize > Outline ".

17] Mijenjajte^(Vary) debljinu i intenzitet obrisa kako biste obliku dali izgled gumba.

18] U zadnjem koraku moramo spremiti gumb. Za to pritisnite " Ctrl + S " i odaberite format slike s padajućeg izbornika. Sliku možete spremiti u JPG , PNG , BMP i mnogim drugim formatima. Tražit će od vas da izravnate sliku ili ne. Odaberite^(Select) " Poravnati^(Flatten) ".

Pročitajte^(Read) : Besplatni softver za uklanjanje vodenih žiga i online alat^{(Free Watermark Remover software & Online tool)} .

Web gumb je spreman. Slijedeći gornje korake, možete izraditi web gumbe u različitim bojama. Također možete odabrati drugu teksturu gradijenta kako biste svojim gumbima dali drugačiji izgled.

To je to. Nadam^(Hope) se da vam se svidio članak. Ne^(Don) zaboravite podijeliti svoje stavove u odjeljku za komentare.

Pročitajte^(Read) : Kako dodati prozirnu sliku preko snimke zaslona pomoću Paint-a^{(How to add a Transparent Image over a Screenshot with Paint)} .

How to create a Web Button using Paint.net

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:

1. Tools box
2. History box
3. Layers box
4. 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.

Related posts

• Kako stvoriti prozirnu sliku u Paint.NET-u u sustavu Windows 11/10

• Kako stvoriti i dodati efekt Drop Shadow slici u Paint.NET-u

• Dodajte efekt dvostruke ekspozicije slikama pomoću ovih besplatnih online alata

• Paint.NET za Windows 10 - Besplatno preuzimanje

• Kako izrezati i zarotirati sliku u Paint.NET-u

• Najbolji alati za besplatno dodavanje vodenog žiga na sliku na mreži

• Screen To GIF: Besplatni softver za stvaranje animirane GIF slike

• Kako pretvoriti WebP slike u PNG i JPG pomoću WebP Convertera

• Nomacs je preglednik slika za Windows PC s nevjerojatnim značajkama

• Find.Same.Images.OK pronalazi sve vaše duplikate slika

• LICEcap: Snimite svoju Windows radnu površinu ili zaslon kao animirani GIF

• WildBit preglednik slika, dijaprojekcija, softver za uređivanje za ljubitelje fotografija

• Kako izdvojiti okvire iz animiranih GIF slika

• Najbolji besplatni softver za izradu videozapisa u GIF za Windows 10

• AwesomeWallpaper vam omogućuje prikaz slika i videa kao pozadine radne površine

• Uklonite i popravite zamućene fotografije i slike pomoću ovih alata

• Kako stvoriti slijed videozapisa iz slike u sustavu Windows 11/10

• Kako ocrtati tekst ili dodati obrub tekstu u GIMP-u

• Promijenite veličinu, ukrasite, dodajte obrube, okvire i vodene žigove slikama

• POPRAVAK: Gumb Natrag ne radi u web pregledniku?