Paint.net je veľmi výkonný nástroj na úpravu a vytváranie obrázkov. Je vybavená celým radom funkcií. S týmto bezplatným softvérom môžete robiť veľa vecí, ako je spriehľadnenie obrázkov, vytváranie vodoznakov atď. V tomto článku sa pozrieme na kroky vytvorenia webového tlačidla v paint.net.

Vytvorte webové tlačidlo pomocou Paint.net

Môže nastať viacero situácií, keď používateľ potrebuje vlastné webové tlačidlo, ktoré má implementovať na svoj web. Ak napríklad vytvárate obchod s elektronickým obchodom, môžete zatraktívniť svoje blogy zavedením webových tlačidiel v rôznych atraktívnych dizajnoch, ktoré nútia používateľov klikať.

Začnime s tutoriálom.

1] Spustite Paint.net^{(Launch Paint.net)} na svojom PC a prejdite na „ File > New “, aby ste vytvorili novú stránku (ak softvér štandardne neotvorí novú stránku).

Prečítajte si^(Read) : Ako orezať a otočiť obrázok v Paint.NET^{(How to Crop and Rotate a Picture in Paint.NET)} .

2] Na obrazovke by ste mali mať k dispozícii nasledujúce nástroje:

1. Skrinka na náradie
2. História
3. Krabička vrstiev
4. Krabička farieb

Ak nie, povoľte ich kliknutím na príslušné ikony dostupné v pravom hornom rohu. Pozrite si snímku obrazovky nižšie.

3] Teraz musíme pridať rôzne vrstvy, aby sme vytvorili tlačidlo. Pridajte vrstvu kliknutím na „ Pridať novú vrstvu^{(Add New Layer)} “ v poli „ Vrstvy^(Layers) “.

Prečítajte si^(Read) : Ako vytvoriť miniatúru YouTube v Paint.net^{(How to Make a YouTube Thumbnail in Paint.net)} .

4] Pretože vytvoríme veľa vrstiev, je lepšie každú vrstvu premenovať, aby nedošlo k zámene. Dvakrát^(Double) kliknite na novo pridanú vrstvu a zmeňte jej názov na „ Základňa^(Base) “. Môžete zadať ľubovoľné meno podľa vlastného výberu.

5] Vytvárame zaoblené obdĺžnikové tlačidlo. Na tento účel vyberte možnosť „ Tvary^(Shapes) “ z poľa „ Nástroje^(Tools) “ a vyberte si svoju obľúbenú farbu z poľa „ Farba^(Color) “. Viac farieb je dostupných vo voľbe „ Viac^(More) “ v poli farieb.

6] Musíme vybrať „ Zaoblený obdĺžnik^{(Rounded Rectangle)} “ s „ Vyplnený režim^{(Filled Mode)} “.

Prečítajte si^(Read) : Ako vytvoriť a pridať efekt Vržený tieň na obrázok v Paint.NET^{(How to create and add Drop Shadow effect to an image in Paint.NET)} .

7] Stlačte^(Press) a podržte ľavé tlačidlo myši a ťahaním vytvorte zaoblený obdĺžnikový tvar. Po jeho nakreslení môžete zmeniť aj jeho rozmery.

8] Teraz k tlačidlu pridáme efekt prechodu. Na tento účel pridajte novú vrstvu a zmeňte jej názov na „ Gradient “.

9] Kliknite na vrstvu „ Základ^(Base) “ a v poli nástrojov vyberte „ Kúzelná palička “. ^{(Magic Wand)}Po výbere čarovnej paličky ^{(Magic Wand)}kliknite^(Click) na tvar zaobleného obdĺžnika .

10] Vyberte^(Choose) svetlejšiu farbu a v poli nástrojov vyberte „ Gradient “.

11] Keď vyberiete Gradient , uvidíte na paneli nástrojov dostupné rôzne typy textúr. Musíte vybrať textúru „ Lineárna “. ^(Linear)Umiestnite myš podľa pokynov na obrázku nižšie. Teraz stlačte a podržte ľavé tlačidlo myši a potiahnite ho na spodný okraj zaobleného obdĺžnikového tvaru a súčasne stlačte kláves „ Shift “.

12] Teraz musíme na tlačidlo napísať vlastný text. Na tento účel pridajte ďalšiu vrstvu a zmeňte jej názov na „ Text “. Teraz v poli nástrojov vyberte „ Text “ a vyberte farbu podľa vlastného výberu. ^(Text)Kliknite^(Click) dovnútra zaobleného obdĺžnikového tvaru a napíšte tam svoj text. Môžete tiež zmeniť štýl písma a veľkosť textu.

13] Teraz musíme dať tvaru lesklý nádych. Na tento účel pridajte ďalšiu vrstvu a zmeňte jej názov na „ Lesklé^(Glossy) “. Táto vrstva by mala byť na vrchu všetkých vrstiev. Ak nie, presuňte ho na vrch.

14] Teraz vyberte základnú vrstvu. Potom vyberte čarovnú paličku^{(Magic Wand)} a kliknite na zaoblený obdĺžnikový tvar. Potom sa vráťte do lesklej^(Glossy) vrstvy a vyberte bielu farbu z poľa farieb.

Teraz vyberte nástroj " Tvary^(Shapes) " z poľa nástrojov a kliknite na " Typ tvaru^{(Shape type)} " na paneli s nástrojmi a vyberte " Elipsa^(Ellipse) ". Elipsu^(Ellipse) musíte vybrať vo vyplnenom režime (pozrite si krok 6 tohto článku).

Ďalej musíte nakresliť elipsu tak, aby niektoré jej časti ležali na najvyššej časti zaobleného obdĺžnika. Keď skončíte, stlačte „ Enter “.

15] Dvojitým^(Double) kliknutím na lesklú^(Glossy) vrstvu otvoríte jej vlastnosti a znížite jej nepriehľadnosť.

16] Teraz musíme k tvaru pridať orámovanie. Na tento účel vyberte základnú vrstvu a prejdite do časti „ Effects > Stylize > Outline “.

17] Zmeňte^(Vary) hrúbku a intenzitu obrysu, aby tvar vyzeral ako tlačidlo.

18] V poslednom kroku musíme tlačidlo uložiť. Na tento účel stlačte „ Ctrl + S “ a z rozbaľovacej ponuky vyberte formát obrázka. Obrázok môžete uložiť vo formátoch JPG , PNG , BMP a mnohých ďalších. Požiada vás, aby ste obrázok vyrovnali alebo nie. Vyberte^(Select) „ Vyrovnať^(Flatten) “.

Prečítajte si^(Read) : Bezplatný softvér na odstraňovanie vodoznakov a online nástroj^{(Free Watermark Remover software & Online tool)} .

Web tlačidlo je pripravené. Podľa vyššie uvedených krokov môžete vytvoriť webové tlačidlá v rôznych farbách. Môžete tiež vybrať inú textúru s prechodom, aby ste dali tlačidlám iný vzhľad.

To je všetko. Dúfam^(Hope) , že sa vám článok páčil. Nezabudnite^(Don) sa podeliť o svoje názory v sekcii komentárov.

Prečítajte si^(Read) : Ako pridať priehľadný obrázok na snímku obrazovky pomocou programu Maľovanie^{(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

• Ako vytvoriť priehľadný obrázok v Paint.NET v systéme Windows 11/10

• Ako vytvoriť a pridať efekt Vržený tieň na obrázok v Paint.NET

• Pomocou týchto bezplatných online nástrojov pridajte k obrázkom efekt dvojitej expozície

• Paint.NET pre Windows 10 – bezplatné stiahnutie

• Ako orezať a otočiť obrázok v Paint.NET

• Ako previesť obrázky WebP na PNG a JPG pomocou WebP Converter

• Ako zdieľať a repostovať obrázky na Instagrame

• InfinityConverter je rýchla aplikácia na prevod obrázkov a videa

• Ako umiestniť okraj alebo rám okolo fotografie vo Photoshope

• Ako jednoducho pridať vodoznaky do svojich online obrázkov pred odovzdaním

• Vytvárajte obrázky priateľské k webu pomocou Bzzt! Editor obrázkov pre Windows PC

• Ako bezplatne generovať textové obrázky online

• Ako vytvoriť video zo sekvencie obrázkov v systéme Windows 11/10

• Bezplatné nástroje na konverziu WebP na PNG online

• Find.Same.Images.OK nájde všetky vaše duplicitné obrázky

• Optimalizujte a zmeňte veľkosť obrázkov pomocou Ashampoo Photo Optimizer

• AwesomeWallpaper vám umožňuje zobraziť obrázky a videá ako tapetu pracovnej plochy

• Bezplatné online nástroje a softvér na tvorbu fotografických koláží

• PNG vs JPG vs GIF vs BMP vs TIF: Vysvetlenie formátov obrázkových súborov

• Ako odstrániť obrázok na pozadí pomocou programu Paint 3D v systéme Windows 10