| GIMP для WEB |
| Любкинс | Date: Четверг, 20-Авг-2009, 01:00:32 | Message # 1 |
Madame fon Gimp
Группа: Администраторы
Сообщений: 5014
Эстония
Награды: 20
Статус: Отсутствую
| GIMP - программа с такими обширными возможностями, рисование, коррекция фото, создание анимации и даже создание сайта. В этой части рассмотрим скрипты и плагины для WEB. Для начала, рисуем кнопки, вернее, скрипт их нарисует. Aqua Bou Script-fu - красивый водный стиль, 5 вариантов. скачать скрипт В меню Файл - Создать - Темы веб страниц - Aqua Bou. 
В настройках убрать галку с Flatten - это не даст скрипту свести слои. Написать текст, выбрать шрифт и цвет шрифта. 
Получится вот такая красота, которую потом можно использовать как рисунок на баннер сайта. В слоях на панели инструментов отключить видимость фона (для прозрачности), свести видимые слои и сохранить в .png. То же самое проделать с другими вариантами. 
Следующие варианты. 
 
Есть скрипты, уже встроенные в GIMP, Файл- Создать - Кнопки - Круглая кнопка, создаст сразу 3 кнопки, одинакового размера, но разные по тону или даже цвету, в зависимости от настроек. Для чего? А для того, что бы наведя мышу на кнопку работающей html- страницы , кнопка меняла тон/цвет.   Вот такой набросок странички, используя только gimp. 
|
| |
|
| |
| Гость | Date: Четверг, 20-Авг-2009, 11:53:13 | Message # 2 |
|
Группа: Гости
|   Вот чего не ожидал от гимпа 
|
| |
|
| |
| Margarete | Date: Четверг, 20-Авг-2009, 12:02:31 | Message # 3 |
Старейшина
Группа: Модераторы
Сообщений: 1229
Германия
Кёльн
Награды: 26
Статус: Отсутствую
| Любкинс,  скачала, на досуге буду пробовать. 
|
| |
|
| |
| Любкинс | Date: Четверг, 20-Авг-2009, 15:06:17 | Message # 4 |
|
Madame fon Gimp
Группа: Администраторы
Сообщений: 5014
Эстония
Награды: 20
Статус: Отсутствую
| Ларик, без паники, до флеша мы еще не дошли, не опережай события  Продолжаем!  Самое интересное еще впереди Учимся рисовать страничку для сайта, блога.
1. В палитре цветов, на панели инструментов выбрать цвет переднего плана 9bb1ba .
Создать новое изображение 960*900, в настройках указать фон - цвет переднего плана.  Получится тонированное изображение. 2. Создать новый слой, 900*900, цвет фона - белый, назвать Страница.  переместить посередине. 3. Фильтры - Свет и тень- Отбрасываемая тень, Х,У =0, убрать галку"разрешить изменение размера", добавить тень.  Что получилось на этом этапе? Белый лист с тенью, на серо-голубом фоне. 4. Создать новый слой 900*150пх, назвать его Заголовок,  Выровнять по белому слою. 5. Цвет черный (передний план) и 9bb1ba (фон), инструментом Градиент залить слой Заголовок сверху вниз. 6. Слой Заголовок продублировать и удалить содержимое нажав Delet, (дублируя слой, он создается на том же месте, уже не нужно его выравнивать, а содержимое будет другое) 7. Инструментом Карандаш провести прямую белым цветом, затем сразу под белой линией - черным. (Выбрать инструмент Карандаш, выбрать кисть Circle 03, цвет переднего плана белый, щелк Карандашом по левой границе копии Заголовка, нажать Shift и протянуть прямую до правой границы и еще раз щелк. Поменять цвет на черный и нарисовать вторую прямую)  А теперь уменьшить прозрачность этого слоя до 10-15%, получилась вот такая гравировка.  8. Дублировать слой белой Cтраницы, содержимое удалить, инструментом Прямоугольное выделение нарисовать прямоугольник с правой стороны, залить выделение цветом 9bb1ba и уменьшить прозрачность этого слоя до 20%.  9. Выбрать в палитре цвет переднего плана 93a8b0, создать новый слой 900*100, цвет переднего плана, назвать Колонтитул, переместить в самый низ изображения. 10. Теперь пишем меню в верхней части. Инструмент Текст, выбрать шрифт, цвет размер 15 пх.(размер шрифта зависит от того, какой выбрали, чем крупнее сам шрифт, тем меньшее число пикселов выбрать) Разместить под гравировкой.  Вот страничка почти готова, осталось добавить наши красивые кнопки. Сохранены они в .png, открыть их новым слоем, инструментом Перемещение поставить на место. Подогнать размер в меню Слой - размер слоя. Сохранить весь документ в расширении .xcf.  В следующем уроке будем резать нашу картинку на части и готовить к кодированию в html.,
|
| |
|
| |
| Slavunkin | Date: Четверг, 20-Авг-2009, 15:10:38 | Message # 5 |
Радушная хозяйка
Группа: Администраторы
Сообщений: 17418
Российская Федерация
Москва
Награды: 34
Статус: Отсутствую
| Quote (Любкинс) В следующем уроке будем резать нашу картинку на части и готовить к кодированию в html.
Я ваша на веки
|
| |
|
| |
| Margarete | Date: Четверг, 20-Авг-2009, 15:21:08 | Message # 6 |
|
Старейшина
Группа: Модераторы
Сообщений: 1229
Германия
Кёльн
Награды: 26
Статус: Отсутствую
| Любкинс,
с каждым разом все интересней и интересней.
|
| |
|
| |
| Logrus | Date: Четверг, 20-Авг-2009, 15:25:57 | Message # 7 |
Виконтесса Лигонье
Группа: Модераторы
Сообщений: 2063
Российская Федерация
Повезде
Награды: 5
Статус: Отсутствую
| Любкинс, без паники я - а просто в азарте! 
|
| |
|
| |
| Любкинс | Date: Суббота, 22-Авг-2009, 00:44:45 | Message # 8 |
|
Madame fon Gimp
Группа: Администраторы
Сообщений: 5014
Эстония
Награды: 20
Статус: Отсутствую
| В этой части урока, подготовим картинки для готового кода на сайт. Создать на компьютере новую папку назвать,например, "my site", внутри этой папки еще одну с названием "images" - сюда будем сохранять части страницы. Открыть наш документ сохраненный в .xcf Внизу окна выбрать просмотр 100%.
Отключить видимость кнопок и текста.
Инструментом Прямоугольное выделение выделить часть из верхнего левого угла вправо вниз, чуть выше строки с гравировкой. 960*109 (109 - это верхняя граница гравировки, у вас может быть другой размер, его можно увидеть в параметрах панели инструментов)  Правка - Копировать видимое, Правка - Вставить как - Новое изображение. Сохранить это новое изображение с именем header.png в папке images. Вернуться на рабочее окно со страницей, прямоугольное выделение мы не убирали, навести мышу на верхнюю часть выделения, она обозначит место захвата, перетащить эту часть вниз, до границы Заголовка. Как видим, та граница выделения, что была низом, стала верхом нового выделения.  Правка - Копировать видимое, Правка - Вставить как - Новое изображение. Сохранить это новое изображение с именем menulinks.png в папке images. Теперь опустим выделение на саму страницу, в любой средней части. Правка - Копировать видимое, Правка - Вставить как - Новое изображение. Сохранить это новое изображение с именем page.png в папке images. Осталось проделать ту же операцию с колонтитулом, выделить область.  Правка - Копировать видимое, Правка - Вставить как - Новое изображение. Сохранить это новое изображение с именем footer.png в папке images. Включить видимость логотипа, выделить область и так же сохранить как новое изображение, с именем logo.png в папке images.  И так, что имеем в итоге, в папке images должны быть изображения header.png, menulinks.png, page.png, footer.png и logo.png.
 продолжение следует....
|
| |
|
| |
| ispanec | Date: Суббота, 22-Авг-2009, 14:41:11 | Message # 9 |
Завсегдатай
Группа: Проверенные
Сообщений: 99
Российская Федерация
Награды: 3
Статус: Отсутствую
| Хотел бы дать совет, везде где _можно_ используйте ширину или высоту 1 пиксел - так вы можете съэкономить прилично Мбайт, потом в html можно задать размер. Например для файла header, такие размеры:
А результат будет такойже (у меня другой градиент):
 Ну и в html для примера я написал так:
Code <table> <!-- head --> <tr> <td style= "background-image: url(images/header.jpg); width: 960px; height: 109px;"> </td> <tr> <!-- mine --> <tr> <td> </td> <tr> </table>
Post edited by ispanec - Суббота, 22-Авг-2009, 14:44:12 |
| |
|
| |
| Любкинс | Date: Суббота, 22-Авг-2009, 14:56:20 | Message # 10 |
|
Madame fon Gimp
Группа: Администраторы
Сообщений: 5014
Эстония
Награды: 20
Статус: Отсутствую
| ispanec, рада любым советам , особенно потом, по HTML-у
|
| |
|
| |
| Logrus | Date: Суббота, 22-Авг-2009, 15:05:54 | Message # 11 |
|
Виконтесса Лигонье
Группа: Модераторы
Сообщений: 2063
Российская Федерация
Повезде
Награды: 5
Статус: Отсутствую
| Любкинс, cспасибо за отличный урок! ispanec, спасибо за отличный и важный совет!
|
| |
|
| |
| Любкинс | Date: Суббота, 22-Авг-2009, 17:17:33 | Message # 12 |
|
Madame fon Gimp
Группа: Администраторы
Сообщений: 5014
Эстония
Награды: 20
Статус: Отсутствую
| Logrus, урок не закончен, торопливая ты моя
|
| |
|
| |
| Logrus | Date: Суббота, 22-Авг-2009, 20:25:12 | Message # 13 |
|
Виконтесса Лигонье
Группа: Модераторы
Сообщений: 2063
Российская Федерация
Повезде
Награды: 5
Статус: Отсутствую
| Любкинс, правильно, не останавливайся на достигнутом! Ждем-с еще!
|
| |
|
| |
| Любкинс | Date: Воскресенье, 23-Авг-2009, 01:33:56 | Message # 14 |
|
Madame fon Gimp
Группа: Администраторы
Сообщений: 5014
Эстония
Награды: 20
Статус: Отсутствую
| У нас создана папка "my site" , в ней папка "images", нужно создать еще 2 файла "index.html" и "style.css", лежать они должны в папке "my site". Для их создания не нужно навороченных редакторов, достаточно "блокнота".  В файл index.html вставляем код Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>GIMP for WEB</title> <link rel=stylesheet href="style.css" type="text/css" media=screen> </head> <body> <div id="page"> <div id="header"><a href="./index.html" class="logo"></a> </div> <div id="menulinks"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </div> <div id="mainarea"> </div> <div id="contentarea"><br>Бывает так - берешь .</br> </div> <div id="sidebar"><br>В состав Школьного Сервера </br></div> <div id="footer"> Copyright (c) 2009 GIMP for WEB<br/> All Rights Reserved.</p> </div> </div> </body> </html>> Выглядит это так  А в style.css вот такой Code body {
background-color:#9bb1ba;
margin:0;
padding:0;
text-align:center;
font-family:Arial;
font-size:14px;
color:#555555;
}
#page {
width:960px;
margin:auto;
padding:auto;
background-image:url(images/page.png);
text-align:left;
}
#header {
width:960px;
height:109px;
background-image:url(images/header.png);
clear:both;
}
#menulinks {
width:960px;
height:44px;
background-image:url(images/menulinks.png);
clear:both;
}
#mainarea {
width:960px;
clear:both;
padding-top:10px;
}
#contentarea {
float:right;
width:560px;
padding-right:680px;
padding-right:45px;
}
#sidebar {
float:left;
width:225px;
padding-left:45px;
margin-bottom:10px;
}
#footer {
width:960px;
height:100px;
background-image:url(images/footer.png);
clear:both;
}
#footer p {
padding-top:30px;
color:#FFFFFF;
padding-left:50px;
line-height:20px;
}
a.logo {
width:520px;
height:109px;
float:right;
background-image:url(images/logo.png);
}
h2 {
font-size:20px;
color:#333333;
font-weight:bold;
}
#menulinks a {
padding-top:15px;
padding-left:45px;
padding-right:15px;
height:27px;
float:left;
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
margin-top:1px;
} Вот пожалуй и все, можно смотреть страничку. 
|
| |
|
| |
| ispanec | Date: Воскресенье, 23-Авг-2009, 11:52:32 | Message # 15 |
|
Завсегдатай
Группа: Проверенные
Сообщений: 99
Российская Федерация
Награды: 3
Статус: Отсутствую
| Quote (Любкинс) Почему-то слово "контентареа" все в звездочках..... Выглядит это так
Потому что вы html код прям на страницу помещаете у любого форума от этого защита есть, или он бы отрисовывал что ему каждый юзер написал бы Для нормального отображения кода используется "тегозаменитель" )))) до "[сode]" и после кода "[/сode]" у вас он есть в кнопках.
Post edited by ispanec - Воскресенье, 23-Авг-2009, 11:54:22 |
| |
|
|
| Добавить в закладки |
 |
|
| Статистика сайта |
| |
|
|
|
|
