A Paint.net^(Paint.net) egy nagyon hatékony eszköz a képek szerkesztéséhez és létrehozásához. Funkciókészlettel rendelkezik. Ezzel az ingyenes szoftverrel sok mindent megtehet, például átlátszóvá teheti a képeket, vízjeleket hozhat létre stb. Ebben a cikkben a paint.net webgombjának létrehozásának lépéseit fogjuk látni.

Hozzon létre egy webgombot a Paint.net segítségével

Több olyan helyzet is előfordulhat, amikor a felhasználónak egyéni webgombra van szüksége, hogy elhelyezze a webhelyén. Ha például e-kereskedelmi üzletet hoz létre, akkor vonzóvá teheti blogjait, ha különféle vonzó megjelenésű webgombokat vezet be, amelyek kattintásra kényszerítik a felhasználókat.

Kezdjük az oktatóanyaggal.

1] Indítsa el a Paint.net^{(Launch Paint.net)} alkalmazást a számítógépén, és lépjen a „ File > New ” menüpontra új oldal létrehozásához (ha a szoftver alapértelmezés szerint nem nyit meg új oldalt).

Olvassa el^(Read) : Kép kivágása és elforgatása a Paint.NET-ben^{(How to Crop and Rotate a Picture in Paint.NET)} .

2] A következő eszközöknek kell rendelkezésre állnia a képernyőn:

1. Eszközök doboz
2. Előzmények doboz
3. Rétegek doboz
4. Színek doboz

Ha nem, engedélyezze őket a jobb felső sarokban található megfelelő ikonokra kattintva. Lásd az alábbi képernyőképet.

3] Most különböző rétegeket kell hozzáadnunk egy gomb létrehozásához. Adjon hozzá egy réteget a „ Rétegek^(Layers) ” mezőben található „ Új réteg hozzáadása^{(Add New Layer)} ” gombra kattintva .

Olvassa el^(Read) : Hogyan készítsünk YouTube-bélyegképet a Paint.net webhelyen^{(How to Make a YouTube Thumbnail in Paint.net)} .

4] Mivel sok réteget fogunk létrehozni, jobb, ha minden réteget átnevezünk a félreértések elkerülése érdekében. Kattintson duplán^(Double) az újonnan hozzáadott rétegre, és változtassa meg a nevét „ Alap^(Base) ”-ra. Bármilyen nevet megadhat saját választása szerint.

5] Lekerekített téglalap alakú gombot hozunk létre. Ehhez válassza az „ Eszközök ” mezőben az „ ^(Tools)Alakzatok^(Shapes) ” opciót, és válassza ki a kedvenc színét a „ Szín^(Color) ” mezőből. További színek érhetők el a színdoboz „ Tovább^(More) ” opciójában.

6] Ki kell választanunk a „ Lekerekített téglalap^{(Rounded Rectangle)} ” lehetőséget a „ Kitöltött mód^{(Filled Mode)} ” lehetőséggel.

Olvassa el^(Read) : Hogyan hozzunk létre és adjunk árnyék-effektust egy képhez a Paint.NET-ben^{(How to create and add Drop Shadow effect to an image in Paint.NET)} .

7] Nyomja^(Press) le és tartsa lenyomva az egér bal gombját, és húzza a lekerekített téglalap alakú alakzat létrehozásához. A megrajzolás után a méreteit is módosíthatja.

8] Most hozzáadjuk a gradiens effektust a gombhoz. Ehhez adjon hozzá egy új fóliát, és változtassa meg a nevét „ Gradient ”-re.

9] Kattintson az „ Alap^(Base) ” rétegre, és válassza ki a „ Varázspálca^{(Magic Wand)} ” elemet az eszköztárból. Kattintson^(Click) a lekerekített téglalap alakra a Varázspálca^{(Magic Wand)} kiválasztása után .

10] Válasszon^(Choose) világosabb színt, és az eszköztárból válassza a „ Szátát^(Gradient) ” lehetőséget.

11] Ha kiválasztja a Színátmenetet^(Gradient) , különböző típusú textúrákat fog látni az eszköztáron. Ki kell választania a „ Lineáris^(Linear) ” textúrát. Helyezze az egeret az alábbi képernyőképen látható módon. Most nyomja meg és tartsa lenyomva az egér bal gombját, és húzza a lekerekített téglalap alsó szélére, miközben lenyomja a „ Shift ” billentyűt.

12] Most egy egyéni szöveget kell írnunk a gombra. Ehhez adjon hozzá még egy réteget, és változtassa meg a nevét " Szöveg^(Text) "-re. Most válassza ki a „ Szöveg^(Text) ” elemet az eszköztárból, és válassza ki a kívánt színt. Kattintson^(Click) a lekerekített téglalap alakú forma belsejébe, és írja oda a szöveget. Módosíthatja a szöveg betűstílusát és méretét is.

13] Most fényes hatást kell adnunk a formának. Ehhez adjon hozzá még egy réteget, és változtassa meg a nevét „ Fényes^(Glossy) ”-re. Ennek a rétegnek az összes réteg tetején kell lennie. Ha nem, húzza a tetejére.

14] Most válassza ki az alapréteget. Ezután válassza ki a Varázspálcát^{(Magic Wand)} , és kattintson a lekerekített téglalap alakúra. Ezután térjen vissza a Fényes^(Glossy) réteghez, és válassza ki a fehér színt a színek mezőből.

Most válassza ki az „ Alakzatok^(Shapes) ” eszközt az eszköztárból, és kattintson az „ Alaktípus^{(Shape type)} ” elemre az eszköztáron az „ Ellipszis^(Ellipse) ” kiválasztásához. Ki kell választani az Ellipszist^(Ellipse) a kitöltött módban (lásd a cikk 6. lépését).

Ezután meg kell rajzolnia az ellipszist úgy, hogy egyes részei a lekerekített téglalap legfelső részén helyezkedjenek el. Ha végzett, nyomja meg az „ Enter ” gombot.

15] Kattintson duplán a Fényes ^(Double)rétegre^(Glossy) a tulajdonságainak megnyitásához és az átlátszatlanságának csökkentéséhez.

16] Most szegélyt kell hozzáadnunk az alakzathoz. Ehhez válassza ki az alapréteget, és lépjen az „ Effects > Stylize > Outline ” menüpontra.

17] Változtassa^(Vary) meg a körvonal vastagságát és intenzitását, hogy gombszerű megjelenést kölcsönözzen az alaknak.

18] Az utolsó lépésben el kell mentenünk a gombot. Ehhez nyomja meg a „ Ctrl + S ” billentyűket, és válassza ki a képformátumot a legördülő menüből. A képet elmentheti JPG , PNG , BMP és sok más formátumban. Meg fogja kérni, hogy lapítsa ki a képet, vagy sem. Válassza^(Select) a „ Kisimítás^(Flatten) ” lehetőséget.

Olvassa el^(Read) : Ingyenes vízjel-eltávolító szoftver és online eszköz^{(Free Watermark Remover software & Online tool)} .

A web gomb készen áll. A fenti lépések követésével különböző színű webgombokat hozhat létre. Kiválaszthat egy másik színátmenetes textúrát is, hogy a gombok más megjelenést kapjanak.

Ez az. Remélem^(Hope) tetszett a cikk. Ne^(Don) felejtse el megosztani nézeteit a megjegyzések részben.

Olvassa el^(Read) : Hogyan adjunk átlátszó képet egy képernyőképhez a Paint segítségével^{(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

• Átlátszó kép létrehozása a Paint.NET-ben Windows 11/10 rendszeren

• Hogyan hozzunk létre és adjunk hozzá árnyékhatást egy képhez a Paint.NET-ben

• Adjon Dupla expozíciós hatást a képekhez ezekkel az ingyenes online eszközökkel

• Paint.NET Windows 10 rendszerhez – Ingyenes letöltés

• Kép kivágása és elforgatása a Paint.NET-ben

• Hozzon létre webbarát képeket a Bzzt segítségével! Képszerkesztő Windows PC-hez

• WildBit képnézegető, diavetítés, szerkesztő szoftver fotók szerelmeseinek

• Ezekkel az eszközökkel szüntesse meg és javítsa ki az elmosódott fényképeket és képeket

• Átméretezés, díszítés, szegélyek, keretek és vízjelek hozzáadása a képekhez

• Az InfinityConverter egy gyors kép- és videókonverter alkalmazás

• Hogyan találhat hasonló képeket online a fordított képkereső segítségével

• Optimalizálja és csökkentse a képméretet a Radical Image Optimization Tool segítségével

• Ingyenes eszközök a WebP online PNG-re konvertálásához

• Képernyőről GIF-be: Ingyenes szoftver animált GIF-kép létrehozásához

• Hogyan lehet képkockákat kivonni az animált GIF-képekből

• A legjobb eszközök a vízjel hozzáadásához a képhez online ingyenesen

• Az AwesomeWallpaper segítségével képeket és videókat jeleníthet meg asztali háttérképként

• FIX: Nem működik a Vissza gomb a webböngészőben?

• Fotó: Ingyenes képszerkesztő alkalmazás Windows 10 rendszerhez

• LICEcap: Rögzítse a Windows asztalát vagy képernyőjét animált GIF-ként