Post Reply 

Create Website Design Using GIMP (Tutorial)

May 26, 2014, 15:19
Post: #1
Create Website Design Using GIMP (Tutorial)
Hello dear friends!

My name is Alex . For several years I have been developing websites . With my lessons on web development , you can visit the website http://rtfm.org.ru.

Or My YouTube channel.

Today you will learn to create Site Design in GIMP for example design fan site cartoon Big Buck Bunny - a well-known cartoon that was created solely for the use of free software such as 3D editor Blender, GIMP and other Open Source applications.

As a result of the lesson we draw here is a bright and positive site design :
[Image: _ready_preview.jpg]

To start Download the ZIP archive with the desired files with Yandex.Disk http://yadi.sk/d/NqDoPGtLRHaw3.

In the archive you will find everything needed to create a website design in GIMP images , font Helios, which will be needed for the titles and menus , as well as ready layout format for GIMP XCF ( file source.xcf), which was drawn by me.
Proceed.
Background site
1. Open the file 960_grid_12_col.xcf, lined in mesh system 960gs. Create a new layer in the whole area of ​​the layout and fill it with color # F9F7E7. Create another layer and draw on it a rectangular selection across the entire width of the document and the height of 800 pixels. Fill the selection with a color gradient from # c0e1df ( the upper limit of the gradient ) to # F9F7E7 ( lower limit ):

[Image: 1_1.png]

2 . Apply to the gradient background noise ( Filter > Noise > Noise RGB) with the following parameters :
[Image: 2_1.png]

3 . Now insert a blob ( file klyaksa.jpg), tool " Select adjacent areas " ( magic wand ) we select the white background and delete it . Put a blot in the upper right part of the layout and apply color settings ( Color > Hue-Saturation ):

[Image: 3_1.png]

Making inkblot opaque (15 % opacity ) . Background site ready, proceed to the cap .
Hat site

4 . Paste the layout logo ( file logo.jpg), remove the wand white background and place it in the first 3 columns grid system at the top of the document :


[Image: 4_1.png]

sharpen logo 30 ( Filters> Improvement > Sharpen ).


[Image: 4_2.png]

Set in a font from the archive (Helios.otf). Restart GIMP, by saving the current result .

5 . Draw a search . Right opposite the logo on the new layer , draw a rectangular selection width of 3 and a half columns with rounded corners ( radius 20) , height of 32 pixels. Fill you divide the color # FFFFFF. Then , without removing the selection, reduce it by 1 pixel (Select> Zoom ) again and fill color # F3F3F3.


[Image: 5_1.png]

6. The search button "OK". Create a new layer and draw a circular selection on it , as the size of the picture. Fill it with # 72685d, reduce by 1 pixel , fill again the color # FFFFFF, then reduce again by 1 pixel and fill again # 72685d. Write on our print button "Helios" the word "OK" ( text size of 20 pixels , uppercase letters ) . The result will be such a button :

[Image: 6_1.png]

7. Write menu . Font Helios, 20 pixels size , color # 72685d. Repel items apart 6th spaces between them printed vertical slash :

[Image: 7_1.png]

second word is underlined in the menu do , in order to show to highlight an item when mouse .

Banner site

8. Make a selection with rounded corners ( radius 5 pixels) to the width of the grid , height 400 pixels. Create a new layer and fill it with # 8BA9AB, reduce selection by 1 pixel and fill the rest of the white (# FFFFFF). Make the rectangle opacity 35 %.

[Image: 8_1.png]

9. Insert image bbb-splash.jpg and reduce it so that it was in the center of the rectangle . Above and below , you can remove the excess rectangular selection :

[Image: 9_1.png]

10 . Shadow under the banner. Draw on a new layer round selection , a height of 40 pixels, width 10 columns in the grid in the middle. Fill it with black color :

[Image: 10_1.png]

deselect layer and blur filter " Gaussian Blur " , a radius of 30 :

[Image: 10_2.png]

remove excess ( shadow to not run on the banner ) and make the opacity of the shadow of 30 %.

[Image: 10_3.png]

finished with banner .
main sections of the site

11. Write a headline sections under the banner . Font Helios, 35 pixels size , font color # 72685d. Writing in uppercase ( while holding Shift).

[Image: 11_1.png]

12. Create a new layer group and create a new layer in it , which draw selection with rounded corners ( radius 5) , 4 columns wide grid height of 140 pixels . Following the example of a banner that drew higher fill the selection with color # 8BA9AB, reduce selection by 1 pixel and fill the rest of the white (# FFFFFF). We make the layer's opacity to 35%. Just as for the banner , under the new rectangle will do shadow round selection in the same- layer group and its Gaussian blur blur ( blur radius 15/15 ):

[Image: 12_1.png]

insert a picture (bunny.jpg) and adjust the size of the rectangle , as shown in the picture. Cut off the excess .

13. Write a headline item below :

[Image: 13_1.png]

Subtitled "The Rabbit " will be as follows :

[Image: 13_2.png]

14. Below the text on a new layer make a selection of 3 pixels in height , width of 4 columns and fill color # 72685d. Rounding can be removed .

Next write text section :

[Image: 14_1.png]

15. Type " MORE " below the text section . Font size 20 , color # fe7e01, writing in uppercase. Next create a circular selection on a new layer , radius 28 pixels. Fill it with color # C4C4C2. Still selected , decrease it by 1 pixel and again fill color # F9F7E7 ( remember the search button ) . After all any attempts to decrease , reduce selection by 1 pixel , and finally fill the remaining part of the selection gradient colors from # FE7E01 ( bottom color gradient ) to # FFA955 ( top color gradient ).

[Image: 15_1.png]

16. Paste the layout arrow (image arrow-right.png), distinguish wand contour arrows and fill with white. After that, reduce the arrow and put in our circle :

[Image: 16_1.png]

Making layer opacity arrow 80 %.

17. Remember , we have created a group for division elements ? This is not just. Now select the group in the Layers palette and create a copy . Move ( while holding Shift) a copy of the next four columns. Then again :

[Image: 17_1.png]

Replace all elements of text and images , according to the picture . More pictures in the archive .

[Image: 17_2.png]

18. Before proceeding to the basement ( footer ) of the site , modify the top banner . Make a circular selection radius of 150 pixels , fill it with white , then reduce the selection by 10 pixels and delete the contents . Then reduce the selection by 10 pixels and then fill it with white . Put the resulting image in the center of the banner .

[Image: 18_1.png]

Reopen arrow ( file arrow-right.png) and release otrezhte ponytail. Put it in uentr mug .

[Image: 18_2.png]

Set the opacity of the arrow and circle 35 %.

Basement ( footer ) of the site

19. Draw a rectangular selection in the entire width of the layout , the height from the bottom to the sections and fill the selection on a new layer with the color # 515046 and apply the filter " Noise RGB".


"The message you entered contained 33 images, while only 25 images per message are allowed. Please lower the image count in your message to meet the limit."

http://rtfm.org.ru/lessons/external/gimp_1/19_1.png

20. Write headlines in the basement, broken down by 3 columns . You can draw a horizontal guide to the headlines on the same level .

http://rtfm.org.ru/lessons/external/gimp_1/20_1.png

Below write paragraphs with an underscore . Font Arial, size 14 pixels , color # b7b2ac.

http://rtfm.org.ru/lessons/external/gimp_1/20_2.png

21. Create a group of layers and put it in the title and paragraphs . Duplicate as well as group elements above and write unique text for each section of the basement , as in the layout at the beginning of the lesson ( files, archives , categories , the last record ).

22. Again, we insert inkblot , place it in the right-hand side of the footer and set the following color options ( Color > Hue-Saturation ):

http://rtfm.org.ru/lessons/external/gimp_1/22_1.png

As we see, ugly blot zooms in on the bright part of the site, select it at this point until the footer and delete it . After set the opacity 20% blots . Result manipulation blot in the basement :

http://rtfm.org.ru/lessons/external/gimp_1/22_2.png

23. In the middle of the third column do vertical isolation width of 1 pixel height of 260 pixels . Fill it with color # 423E39. Nearby, on the same layer, create TAKE same selection and fill it this time color # 66675E.

http://rtfm.org.ru/lessons/external/gimp_1/23_1.png

erase the edges of the resulting dividing line at the top and bottom of the kneaded eraser sufficiently large diameter .

http://rtfm.org.ru/lessons/external/gimp_1/23_2.png

last action duplicate this line two times and is located between the other categories of the basement , according to the grid .

http://rtfm.org.ru/lessons/external/gimp_1/23_3.png

On this I have all , I hope my tutorial was useful for you :-).
Find all posts by this user
Quote this message in a reply
May 27, 2014, 04:12
Post: #2
RE: Create Website Design Using GIMP (Tutorial)
Nice tutorial! I do a little graphic/web design myself
Visit this user's website Find all posts by this user
Quote this message in a reply
Jun 8, 2014, 05:58
Post: #3
RE: Create Website Design Using GIMP (Tutorial)
(May 27, 2014 04:12)iForStyle007 Wrote:  Nice tutorial! I do a little graphic/web design myself

Thanks. Smile
Find all posts by this user
Quote this message in a reply
Jun 8, 2014, 18:26
Post: #4
RE: Create Website Design Using GIMP (Tutorial)
The YouTube channel doesn't seem to exist, none of the images came through--there's a message buried in the text about that, too many it seems--and I couldn't get to the website either: "webpage not available".

Drat! I just registered a domain name and figured I'd whip up a website while I had some free time this afternoon.
Find all posts by this user
Quote this message in a reply
Jun 9, 2014, 11:25
Post: #5
RE: Create Website Design Using GIMP (Tutorial)
(Jun 8, 2014 18:26)btraven Wrote:  The YouTube channel doesn't seem to exist, none of the images came through--there's a message buried in the text about that, too many it seems--and I couldn't get to the website either: "webpage not available".

Drat! I just registered a domain name and figured I'd whip up a website while I had some free time this afternoon.

Uh oh, looks like agrega went over their limit of bandwidth for images. They displayed when I viewed this thread.

But just think of how many users viewed this thread & if the images are large file-size, then it takes it's toll on whatever the image host site is.

*Also checked youtube account...doesn't exist :\ hmm...
maybe he/she was planning on making it but didn't get around to it?
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  HOW TO USE GIMP cpmadave 12 3,190 Jun 28, 2017 21:00
Last Post: ofnuts
  How to set up GIMP for pixel art dinamic 0 970 Oct 6, 2014 12:49
Last Post: dinamic
  Gimp Tutorial: Add Logo to an Image MikeDaviesDMD 4 861 Sep 16, 2014 13:02
Last Post: rich2005
  New GIMP Themes rgb4u 1 758 Jul 8, 2014 10:03
Last Post: jeehyun
  Creating a Simple and Clean "Pressed-In" Button in GIMP 2.8 Wyrlor 0 381 May 22, 2014 13:28
Last Post: Wyrlor

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS