How to Design a Website in GIMP (Mockup)

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."

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/tut...

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

Enroll in Our WordPress 6.0 for Non-Coders Course:
https://www.udemy.com/course/wordpres...

0:00 - Intro & Resources
2:02 - "Twitter Bootstrap" Layout Explained
4:06 - Free Template Download
4:43 - Adding a Background
5:58 - Adding a Hero Image
9:58 - Design Main Navigation Text
12:08 - Add H1 Title for Header
13:11 - Insert Paragraph Text for Header
14:18 - Insert Subtitle Text for Header
14:46 - Design Button for Header Call to Action
17:34 - Design Content Section CTA
21:54 - Design 2 Column Row (Team Section)
33:04 - Projects Section (Image Gallery/Collage)
41:30 - Design a Footer with Contact Forms
50:11 - Add Social Media Icons
53:00 - Export Your Finished Site
53:39 - Viewing File in Photoshop
54:55 - Final Thoughts

Download the images used in this tutorial free from Pixabay (always run downloads with a virus scanner):
https://pixabay.com/en/wood-wooden-ta...
https://pixabay.com/en/ipad-tablet-te...
https://pixabay.com/en/macbook-apple-...
https://pixabay.com/en/office-home-gl...
https://pixabay.com/en/write-plan-bus...

Download Twitter and Facebook icons from Icon Finder:
https://www.iconfinder.com/icons/7343...

Download the .XCF (native GIMP file format) GIMP Website Template used in this tutorial (includes guide placement)
GIMP 2.9.8 and Above:
https://www.daviesmediadesign.com/wp-...
GIMP 2.8.22 and Below:
https://www.daviesmediadesign.com/wp-...
*MAC Users - hold cmd and click to download the templates!

Download the Latest Version of GIMP:
https://www.gimp.org/downloads/devel/

Sign up for our GIMP newsletter:
http://eepurl.com/b7spwn

Facebook:   / daviesmediadesign  
Twitter: @DaviesMediaDes

#WebDesign #UI #GraphicDesign