How to Design a Website in GIMP (2018)

In this GIMP tutorial, I’ll show you how to design a website using this free and powerful photo manipulation program. This design is useful for front-end web designers or graphic designers who want to design a website, home page, or landing page to send off to a developer. This tutorial uses GIMP 2.9.8, which is the latest version of GIMP, also called the “Development Version.”

Download the images used in this tutorial free from Pixabay (always run downloads with a virus scanner):
https://pixabay.com/en/wood-wooden-table-desktop-aerial-3182655/
https://pixabay.com/en/ipad-tablet-technology-touch-820272/
https://pixabay.com/en/macbook-apple-imac-computer-screen-606763/
https://pixabay.com/en/office-home-glasses-workspace-820390/
https://pixabay.com/en/write-plan-business-startup-593333/

Download Twitter and Facebook icons from Icon Finder:
https://www.iconfinder.com/icons/734367/media_online_social_twitter_icon#size=256

Download the .XCF (native GIMP file format) GIMP Website Template used in this tutorial (includes guide placement):
https://www.daviesmediadesign.com/wp-content/uploads/2018/03/GIMP-Bootstrap-Template-12-grid.xcf

This in-depth tutorial is perfect for all skill levels! You’ll learn a variety of techniques, while using tons of tools and features found in GIMP. Some examples include working with layers, importing images, using layer masks, using guides to design your site within Twitter bootstrap (a standard and popular layout style for websites), using the text tool, using the gradient tool, and more!

Visit our website for more text and video tutorials:
https://www.daviesmediadesign.com/tutorials/

Enroll in Our GIMP Photo Editing Course:
https://www.udemy.com/gimp-photo-editing/

Download the “Development Version” of GIMP (2.9.8):
https://www.gimp.org/downloads/devel/

Facebook: https://www.facebook.com/DaviesMediaDesign/
Twitter: @DaviesMediaDes