Gimp - przykład cięcia utworzonego layout-u prostej strony internetowej

Stronę tą wyświetlono już: 151 razy

Gimp to nie jest tylko program do retuszowania zdjęć, ani nie służy on tylko do rysowania za pomocą tabletu graficznego. Albowiem zaprawdę powiadam wam, że w Gimp-ie uda się wam stworzyć również grafikę pod waszą własną stronę internetową. Toteż z najdzikszą wręcz rozkoszą postanowiłem pokazać mały, prosty przykład takowej grafiki. Żeby nie było, że jestem gołosłownym draniem poniżej zamieszczam zrzut ekranu takiej grafiki.

Przykładowy layout prostej strony internetowej stworzony w Gimp-ie
Rys. 1
Przykładowy layout prostej strony internetowej stworzony w Gimp-ie

Powyższy zrzut ekranu pokazuje grafikę do pocięcia oraz prowadnice użyte tutaj do wyznaczenia krawędzi kolejnych sekcji na jakie ten obraz jest podzielony. Każda taka sekcja będzie tłem dla oddzielnego elementu HTML z pominięciem elementów tekstowych, które powinno się osadzać jako tekst a nie jako bitmapę. Jeden z elementów graficznych (przyznaję się bez bicia) utworzyłem w Inkscap-ie, ale cóż się dziwić jak ten program jest stworzony do tworzenia tego typu grafiki. Elementem tym jest oczywiście logo strony.

Przed przystąpieniem do pocięcia grafiki wyłączam widoczność tych warstw, które zawierają sam logotyp, elementy tekstowe oraz te elementy, które powinny być pozbawione tła (chodzi tutaj o kropki). Obraz z tak ustawionymi warstwami duplikuję Ctrl + D a następnie narzędziem kadrowanie Shift + C.

Oto jak pocięta została grafika:

  • baner górny strony
    Baner górny strony utworzony w Gimp-ie
  • dwa gradienty o małych rozmiarach więc ich tutaj nie pokażę;
  • tło menu strony
    Tło menu strony utworzone w Gimp-ie
  • baner dolny strony
    Baner dolny strony utworzony w Gimp-ie
  • kropki dla elementów tekstowych umieszczonych w dolnym banerze

Do tego trzeba dorzucić oczywiście logo strony, które (jak już wcześniej wspominałem) utworzyłem w Inkscap-ie.

Logotyp svg
Rys. 2
Logotyp utworzony w Inkscap-ie na potrzeby tej prostej stronki

Po przycięciu całego layoutu należy oczywiście okodować stronę, część kodu HTML wygląda następująco:

Listing 1
  1. <!doctype html>
  2. <html lang="pl">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="Author" content="Krzysztof Zajączkowski" />
  8. <link rel = "stylesheet" type = "text/css" href = "style.css"/>
  9. <title>Spływy kajakowe</title>
  10. </head>
  11. <body>
  12. <section class="all_page">
  13. <header>
  14. <div class="banner_up">
  15. <a href="#">
  16. <img src="Kajak.svg" alt="Spływy kajakowe - logo" class="logo"/>
  17. <p id="club">KLUB KAJAKOWY</p>
  18. <p id="wodnik">WODNIK</p>
  19. </a>
  20. </div>
  21. <div class="gradient1"></div>
  22. <nav>
  23. <ul>
  24. <li><a href="#">Strona główna</a></li>
  25. <li><a href="#">Trasy</a></li>
  26. <li><a href="#">Cennik</a></li>
  27. <li><a href="#">Relacje</a></li>
  28. <li><a href="#">Kontakt</a></li>
  29. </ul>
  30. </nav>
  31. <div class="gradient2"></div>
  32. <div class="banner_down">
  33. <div id="szczecinek">Szczecinek</div>
  34. <div id="jeziora"><img src="dot.png" alt="jeziora"/> Jeziora</div>
  35. <div id="rzeki"><img src="dot.png" alt="rzeki"/> Rzeki</div>
  36. <div id="zabytki"><img src="dot.png" alt="zabytki"/> Zabytki</div>
  37. <div id="palace"><img src="dot.png" alt="pałace"/> Pałace</div>
  38. <div id="zamki"><img src="dot.png" alt="zamki"/> Zamki</div>
  39. <div id="koscioly"><img src="dot.png" alt="koscioly"/> Kościoły</div>
  40. </div>
  41. <div class="gradient1"></div>
  42. </header>
  43. <article class="page">
  44. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam justo lectus, iaculis a, auctor sed, congue in, nisl. Cras ac enim vel dui vestibulum suscipit. Mauris sed nulla quis nisi interdum tempor. Praesent scelerisque. Nam id neque. Phasellus lacinia iaculis mi. Morbi urna. Nulla sagittis condimentum ligula. Suspendisse lectus. In consectetuer, lorem eu lobortis egestas, velit odio imperdiet eros, sit amet sagittis nunc mi ac neque. Quisque aliquam, nulla ac scelerisque convallis, nisi ligula sagittis risus, at nonummy arcu urna pulvinar nibh. Nam sed nisl nec elit suscipit ullamcorper. Morbi pulvinar nulla sit amet nisl. Donec nonummy lacinia leo. Quisque malesuada nulla sed pede volutpat pulvinar. Nam molestie nisl at metus. Donec ut purus. Aenean turpis ipsum, rhoncus vitae, posuere vitae, euismod sed, ligula. Praesent a eros. Etiam pede nunc, vestibulum vel, rutrum et, tincidunt eu, enim. Etiam fermentum. In leo ante, venenatis eu, volutpat ut, imperdiet auctor, enim. Nulla sed lacus. </p>
  45. <p>Quisque malesuada nulla sed pede volutpat pulvinar. Nam id neque. Nam massa turpis, nonummy et, consectetuer id, placerat ac, ante. Nam consectetuer mollis dolor. Nulla blandit justo a metus. Suspendisse fermentum. Etiam fermentum. Donec nonummy lacinia leo. Nam massa turpis, nonummy et, consectetuer id, placerat ac, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ultrices turpis. Maecenas rhoncus rhoncus ipsum. Proin lectus orci, venenatis pharetra, egestas id, tincidunt vel, eros. Praesent semper, neque vel condimentum hendrerit, lectus elit pretium ligula, nec consequat nisl velit at dui. Quisque aliquam, nulla ac scelerisque convallis, nisi ligula sagittis risus, at nonummy arcu urna pulvinar nibh. Maecenas convallis dui.</p>
  46. <p>Vivamus feugiat. Etiam fermentum. Aenean id purus. Nam sed nisl nec elit suscipit ullamcorper. Nam consectetuer mollis dolor. Morbi a mauris. Nullam venenatis gravida orci. Aliquam velit dui, commodo quis, porttitor eget, convallis et, nisi. Proin lectus orci, venenatis pharetra, egestas id, tincidunt vel, eros. Suspendisse potenti. Aenean scelerisque metus eget sem. Donec ut purus. Suspendisse potenti. Sed dolor. Nam pharetra. Sed fringilla. In consectetuer, lorem eu lobortis egestas, velit odio imperdiet eros, sit amet sagittis nunc mi ac neque. Sed non ipsum. In leo ante, venenatis eu, volutpat ut, imperdiet auctor, enim. In consectetuer, lorem eu lobortis egestas, velit odio imperdiet eros, sit amet sagittis nunc mi ac neque. </p>
  47. <p>Integer fringilla. Sed non ipsum. Proin diam augue, semper vitae, varius et, viverra id, felis. Curabitur risus urna, placerat et, luctus pulvinar, auctor vel, orci. Mauris ac massa vestibulum nisl facilisis viverra. Mauris urna sem, suscipit vitae, dignissim id, ultrices sed, nunc. Donec nonummy lacinia leo. Aliquam imperdiet lobortis metus. Mauris urna sem, suscipit vitae, dignissim id, ultrices sed, nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris tincidunt aliquam ante. Aenean ultrices turpis. Nam molestie nisl at metus. Aenean ultrices turpis. Morbi volutpat. Ut venenatis. Maecenas justo. Etiam sodales orci nec ligula. Proin diam augue, semper vitae, varius et, viverra id, felis. </p>
  48. <p>Phasellus magna sem, vulputate eget, ornare sed, dignissim sit amet, pede. Cras facilisis felis sit amet lorem. Nam consectetuer mollis dolor. Vivamus feugiat. Mauris tincidunt aliquam ante. Phasellus auctor enim eget sem. Quisque malesuada nulla sed pede volutpat pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. In hac habitasse platea dictumst. Nulla facilisi. Integer risus velit, facilisis eget, viverra et, venenatis id, leo. Integer risus velit, facilisis eget, viverra et, venenatis id, leo. Fusce venenatis ligula in pede. Integer tempus malesuada pede. Praesent lacus. Aenean scelerisque metus eget sem. Sed quis elit. Aliquam imperdiet lobortis metus. </p>
  49. </article>
  50. <footer>
  51. <p>Ten przykładzik strony dla obliczeniowo.com.pl został stworzony.
  52. Przez właściciela tej zacnej strony.
  53. Wszelkie prawa są zastrzeżone!</p>
  54. </footer>
  55. </section>
  56. </body>
  57. </html>

Z kolei sam kod CSS wygląda tak:

Listing 2
  1. body{
  2. margin: 0;
  3. }
  4. a{
  5. text-decoration: none;
  6. }
  7. .all_page{
  8. width: 1100px;
  9. margin: auto;
  10. box-shadow: 0px 0px 10px rgba(183, 210, 217, 1);
  11. }
  12. .banner_up{
  13. height: 250px;
  14. background: URL("banner_gl.jpg");
  15. margin: 0;
  16. padding: 0;
  17. }
  18. .banner_up a {
  19. display: block;
  20. position: relative;
  21. left: 30px;
  22. top: 20px;
  23. color: white;
  24. text-align: center;
  25. width: 150px;
  26. }
  27. .banner_up a img{
  28. padding: 0;
  29. margin: 0;
  30. }
  31. #club{
  32. font-size: 14px;
  33. }
  34. #wodnik{
  35. font-size: 28px;
  36. }
  37. #club, #wodnik{
  38. margin: 0;
  39. padding: 0;
  40. }
  41. .logo{
  42. width: 150px;
  43. }
  44. .gradient1{
  45. background: URL("gradient.jpg");
  46. height: 3px;
  47. padding: 0;
  48. margin: 0;
  49. }
  50. nav > ul > li{
  51. display: inline-table;
  52. padding: 5px 10px 5px 10px;
  53. margin: 7px 5px;
  54. border-radius: 5px;
  55. }
  56. nav > ul > li:hover{
  57. background-color: #faeee0;
  58. }
  59. nav > ul{
  60. padding: 0;
  61. margin: 0;
  62. }
  63. nav{
  64. text-align: center;
  65. }
  66. nav{
  67. background: URL("menu_tlo.jpg");
  68. padding: 0;
  69. margin: 0;
  70. }
  71. nav a{
  72. text-decoration: none;
  73. color: #5f4222;
  74. }
  75. .gradient2{
  76. background: URL("gradient2.jpg");
  77. height: 3px;
  78. }
  79. .banner_down{
  80. position: relative;
  81. background: URL("banner_dol.jpg");
  82. height: 240px;
  83. }
  84. #szczecinek, #jeziora, #rzeki, #zabytki, #palace, #zamki, #koscioly{
  85. position: absolute;
  86. font-size: 24px;
  87. }
  88. #jeziora, #rzeki, #zabytki{
  89. color: #edd9c6;
  90. }
  91. #zamki, #koscioly{
  92. color: #edc387;
  93. }
  94. #szczecinek{
  95. position: absolute;
  96. left: 560px;
  97. top: 60px;
  98. font-size: 24px;
  99. color: #5f4222;
  100. }
  101. #jeziora{
  102. left: 130px;
  103. top: 50px;
  104. color: #edd9c6;
  105. }
  106. #rzeki{
  107. left: 232px;
  108. top: 107px;
  109. }
  110. #zabytki{
  111. left: 158px;
  112. top: 179px;
  113. }
  114. #palace{
  115. left: 741px;
  116. top: 24px;
  117. color: #edab48;
  118. }
  119. #zamki{
  120. left: 825px;
  121. top: 105px;
  122. }
  123. #koscioly{
  124. left: 746px;
  125. top: 186px;
  126. }
  127. article.page{
  128. padding: 10px
  129. }
  130. article.page p{
  131. text-align: justify;
  132. }
  133. footer{
  134. background: URL("stopka.jpg");
  135. height: 149px;
  136. }
  137. footer p{
  138. text-align: center;
  139. padding: 30px 10px 0 10px;
  140. white-space: pre-wrap;
  141. }

Koniec końców sam "gotowy" przykład strony można zobaczyć tutaj.

Ktoś może zapytać: a dlaczego nie opisałeś tutaj jak zrobiłeś ten layout. Odpowiedź jest bardzo prosta jak proste jest utworzenie tego layoutu. Wystarczy znajomość opisanych tutaj narzędzi Gimp-a oraz Inkscape-a, aby możliwe było stworzenie powyższej grafiki. Oczywiście dużą też rolę odgrywają materiały. W moim przypadku wszystkie materiały użyte do stworzenia tej stronki zostały wykonane przeze mnie. A więc zdjęcie jest moje, logotyp jest mój, rysunek Jeziora Trzesiecko jest mój. Wszystko moje więc nikt mi nie powie, że coś komuś "ukradłem".

Komentarze