GIMP, the GNU Image Manipulation Program, is a powerful free and open-source tool for image editing that closely mirrors the capabilities of Adobe Photoshop. Among its myriad of features is the ability to create shapes with rounded corners, which are a popular design element in user interface components like navigation bars. Rounded navigation bars provide a sleek, modern aesthetic to websites and applications. This guide will walk you through the process of creating a rounded rectangle in GIMP that can be used as a navigation bar for your project.
Getting Started with Your Image
First, you’ll need to initialize your image or icon canvas. Open GIMP and create a new image file through File > New. Choose an appropriate size for your navigation bar. Normally, horizontal navigation bars are broader in width than height.
Customizing Your Image
Once you have your new image, you can begin customizing it to fit your needs. Add colors or fill the background layer to match your site or app’s color scheme using the Bucket Fill tool or by applying gradients.
Adding Transparency
If your navigation bar will not be covering the entire width of your site or app, or if you wish to layer it over a different background, adding transparency is a necessary step. To add an alpha channel, right-click the layer in the Layers panel and select Add Alpha Channel. This action ensures that when you clear parts of the image to create the rounded corners, those areas become transparent and not white or any other color.
Creating Rounded Corners
With your image customized, move on to creating the actual rounded corners for your navigation bar using the Rounded Rectangle selection:
- From the menu, select
Tools > Selection Tools > Rounded Rectangle. - Click and drag your mouse across the image to create a rectangular selection. The corners of this rectangle will be rounded.
- In the tool options, adjust the roundness percentage per your requirements. For example, you might use around 42% for the roundness to simulate the standard corner radius of Apple iOS icons.
- After completing the selection, you must invert the selection because by default GIMP selects the inside area. Go to
Select > Invertto select everything outside the rounded rectangle. - Press the
Deletekey or chooseEdit > Clearto remove the external areas, leaving behind a rounded rectangle.
Remember, if your navigation bar doesn’t have a transparent background, the removed area will fill with the background color or pattern you’ve set.
Final Touches
After achieving the desired rounded rectangle shape, you may need to finalize your navigation bar by adding text, icons, or adjusting the layers to refine your design.
Saving Your Navigation Bar
Once you’re satisfied with your navigation bar, it’s crucial to save it in a format that preserves transparency if you’ve added it. Save your work as a PNG file through File > Export As and select ‘.png’ as your file format.
In this tutorial i will create a Navigation bar with round corners.
Step 1
Create a new Document 648 x 115 px.
Step 2
Go to Layer > New Layer, and Click OK
Step 3
Now with the Marquee Square tool (R) make a rectangle like this:
Step 4
Go to Select > Rounded Rectangle .. Radius 30%. Click OK
Step 5
With the Fill tool (Shift + B) . Paint the selection White.
Step 6
Now go to Layer > New Layer .. OK
Step 7
Go to Select > Shrink > 3 .. OK
Step 8
Change the Foreground color to: #F0B259 and the Background to: #F87811.
Step 9
With the Gradient Tool (L) Drag it from the top to the bottom of the selection. Go to Select > None. It should look like:
Step 10
Now to Select the 1st layer. the one with the white rectangle. Go to Script – Fu > Shadow > Drop-Shadow. Select:
Click OK. You should have:
Step 11
With the Text Tool (T). Create a new Layer, and type: Home. Click OK
Change your settings to.Font > Verdana, Size > 25, Color > White:
Looks like:
Step 12
Create a New Layer (Layer > New Layer > OK)
Step 13
Create a 2 Pixel Line like this:
Step 14
Change your color to White, and with the Fill tool (shift +b) Paint on the line:
Step 15
. Adjust the opacity of the line to 17.
Step 16
Duplicate the lines and space them out between each button then finally add your text.
That’s it you’re done 🙂
