يعد Paint.net^(Paint.net) أداة قوية للغاية لتحرير وإنشاء الصور. يأتي مع مجموعة من الميزات. يمكنك القيام بالكثير من الأشياء باستخدام هذا البرنامج المجاني مثل جعل الصور شفافة وإنشاء علامات مائية وما إلى ذلك. في هذه المقالة ، سنرى خطوات إنشاء زر ويب في paint.net.

قم بإنشاء زر ويب باستخدام Paint.net

يمكن أن يكون هناك العديد من المواقف التي يحتاج فيها المستخدم إلى زر ويب مخصص لتنفيذه في موقعه على الويب. على سبيل المثال ، إذا كنت تنشئ متجرًا للتجارة الإلكترونية ، فيمكنك جعل مدوناتك جذابة من خلال إدخال أزرار ويب في تصميمات جذابة مختلفة تجبر المستخدمين على النقر عليها.

لنبدأ البرنامج التعليمي.

1] قم بتشغيل Paint.net^{(Launch Paint.net)} على جهاز الكمبيوتر الخاص بك وانتقل إلى " File > New " لإنشاء صفحة جديدة (إذا لم يفتح البرنامج صفحة جديدة افتراضيًا).

قراءة^(Read) : كيفية اقتصاص صورة وتدويرها في Paint.NET^{(How to Crop and Rotate a Picture in Paint.NET)} .

2] يجب أن تتوفر لديك الأدوات التالية على الشاشة:

1. صندوق الادوات
2. مربع التاريخ
3. صندوق الطبقات
4. صندوق الألوان

إذا لم يكن الأمر كذلك ، فقم بتمكينهم من خلال النقر على الرموز المعنية المتوفرة في الزاوية اليمنى العليا. انظر الصورة أدناه.

3] الآن ، علينا إضافة طبقات مختلفة لإنشاء زر. أضف طبقة بالنقر فوق " إضافة طبقة جديدة^{(Add New Layer)} " في مربع " الطبقات^(Layers) ".

قراءة^(Read) : كيفية إنشاء صورة مصغرة على YouTube في Paint.net^{(How to Make a YouTube Thumbnail in Paint.net)} .

4] نظرًا لأننا سننشئ العديد من الطبقات ، فمن الأفضل إعادة تسمية كل طبقة لتجنب الالتباس. انقر نقرًا مزدوجًا^(Double) فوق الطبقة المضافة حديثًا وقم بتغيير اسمها إلى " Base ". يمكنك إعطاء أي اسم حسب اختيارك.

5] نقوم بإنشاء زر مستطيل دائري. لهذا ، حدد خيار " الأشكال^(Shapes) " من مربع " الأدوات^(Tools) " واختر اللون المفضل لديك من مربع " اللون^(Color) ". يتوفر المزيد من الألوان في خيار " المزيد^(More) " في مربع الألوان.

6] علينا تحديد " مستطيل مستدير الزوايا^{(Rounded Rectangle)} " مع " الوضع المملوء^{(Filled Mode)} ".

قراءة^(Read) : كيفية إنشاء وإضافة تأثير Drop Shadow إلى صورة في Paint.NET^{(How to create and add Drop Shadow effect to an image in Paint.NET)} .

7] اضغط^(Press) مع الاستمرار على الزر الأيسر للفأرة واسحب لإنشاء الشكل المستطيل المستدير. بعد رسمه ، يمكنك أيضًا تغيير أبعاده.

8] الآن ، سنضيف تأثير التدرج إلى الزر. لهذا ، أضف طبقة جديدة وغيّر اسمها إلى " التدرج اللوني^(Gradient) ".

9] انقر فوق طبقة " Base " وحدد " Magic Wand " من مربع الأدوات. انقر فوق^(Click) شكل المستطيل مستدير الزوايا بعد اختيار Magic Wand .

10] اختر^(Choose) لونًا أفتح وحدد " التدرج اللوني^(Gradient) " من مربع الأدوات.

11] عند تحديد التدرج اللوني^(Gradient) ، سترى أنواعًا مختلفة من الأنسجة المتاحة على شريط الأدوات. يجب عليك تحديد نسيج " خطي ". ^(Linear)ضع الماوس كما هو موضح في لقطة الشاشة أدناه. الآن ، اضغط مع الاستمرار على الزر الأيسر للفأرة واسحبه إلى الحافة السفلية للشكل المستدير المستدير أثناء الضغط على مفتاح " Shift ".

12] الآن ، علينا كتابة نص مخصص على الزر. لهذا ، أضف طبقة أخرى وغيّر اسمها إلى " نص^(Text) ". الآن ، حدد " نص^(Text) " من مربع الأدوات واختر اللون الذي تختاره. انقر^(Click) داخل الشكل المستدير المستدير واكتب النص هناك. يمكنك أيضًا تغيير نمط الخط وحجم النص.

13] الآن ، علينا إضفاء لمسة لامعة على الشكل. لهذا ، أضف طبقة أخرى وغيّر اسمها إلى " لامع^(Glossy) ". يجب أن تكون هذه الطبقة أعلى كل الطبقات. إذا لم يكن كذلك ، اسحبه لإحضاره إلى الأعلى.

14] الآن ، حدد الطبقة الأساسية. ثم حدد Magic Wand وانقر على الشكل المستطيل المستدير. بعد ذلك ، عد إلى الطبقة اللامعة^(Glossy) وحدد اللون الأبيض من مربع الألوان.

الآن ، حدد أداة " الأشكال^(Shapes) " من مربع الأدوات وانقر على " نوع الشكل^{(Shape type)} " في شريط الأدوات لتحديد " الشكل البيضاوي^(Ellipse) ". يجب عليك تحديد Ellipse في الوضع المملوء (راجع الخطوة 6 من هذه المقالة).

بعد ذلك ، عليك رسم القطع الناقص بحيث تقع بعض أجزائه في الجزء العلوي من المستطيل المستدير الزوايا. عند الانتهاء ، اضغط على " أدخل^(Enter) ".

15] انقر نقرًا مزدوجًا^(Double) فوق الطبقة اللامعة^(Glossy) لفتح خصائصها وتقليل عتامة الطبقة.

16] الآن ، علينا إضافة حد للشكل. لهذا ، حدد الطبقة الأساسية وانتقل إلى " Effects > Stylize > Outline ."

17] قم بتغيير^(Vary) سمك المخطط التفصيلي وشدته لإعطاء الشكل مظهر الزر.

18] في الخطوة الأخيرة ، علينا حفظ الزر. لهذا ، اضغط على " Ctrl + S " وحدد تنسيق الصورة من القائمة المنسدلة. يمكنك حفظ الصورة بتنسيقات JPG و PNG و BMP والعديد من التنسيقات الأخرى. سيطلب منك تسطيح الصورة أم لا. حدد^(Select) " تسطيح^(Flatten) ".

قراءة^(Read) : برنامج مجاني لإزالة العلامات المائية وأداة عبر الإنترنت^{(Free Watermark Remover software & Online tool)} .

زر الويب جاهز. باتباع الخطوات المذكورة أعلاه ، يمكنك إنشاء أزرار ويب بألوان مختلفة. يمكنك أيضًا تحديد نسيج متدرج مختلف لمنح الأزرار مظهرًا مختلفًا.

هذا هو. آمل^(Hope) أن تكون قد أحببت المقال. لا^(Don) تنسى مشاركة آرائك في قسم التعليقات.

قراءة^(Read) : كيفية إضافة صورة شفافة على لقطة شاشة باستخدام برنامج الرسام^{(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

• كيفية إنشاء Transparent Image في Paint.NET على Windows 10

• كيفية إنشاء وإضافة Drop Shadow effect إلى صورة في Paint.NET

• Add Double Exposure Effect إلى الصور باستخدام هذه الأدوات مجانية على الانترنت

• Paint.NET ل Windows 10 - تحميل مجاني

• كيفية Crop and Rotate صورة في Paint.NET

• عرض الصور و Docs PDF بسرعة عبر PRIMA Rapid Image Viewer

• إزالة Background من صورة مع Microsoft Word

• Fix Discord Images لا تحميل على الكمبيوتر

• كيفية Bulk Rotate Images في Windows 11/10

• أفضل Image Compressor and Optimizer software ل Windows 10

• كيفية تحديد Text أو إضافة Border إلى Text في GIMP

• Optimize وتقليل image size مع Radical Image Optimization Tool

• Deblur & fix blurry Photos و Images باستخدام هذه الأدوات

• الشاشة إلى GIF: برنامج مجاني لإنشاء GIF Image الرسوم المتحركة

• كيفية العثور على Images Online مماثلة باستخدام Reverse Image Search

• Fotor: صورة مجانية Editing App ل Windows 10

• كيفية تحويل الصور WebP إلى PNG and JPG مع WebP Converter

• كيفية إزالة Background image مع Paint 3D في ويندوز 10

• Hornil StylePix هي صورة محمولة مجانية Editing software ل Windows 10

• كيفية استخراج إطارات من GIF Images الرسوم المتحركة