Многим ведь хотелось создать свой сайт? Так я раскажу как оформить для него дизайн…

П. С. Картинки слегка испортились из-за ограничения по размеру загружаемых картинок на сайт.

Шаг 1

Создаём Файл размером 1024×900.

Нам показывают фон размером в 50%, так и надо.

Заливаем его любым цветом (я выбрал 3f3534).

Шаг 2

Создаём 8 прозрачных слоя с названиями: Фон главного меню и Главное меню, Фон поисковика и Поисковик, Фон меню и Меню, Фон прочее и Прочее.

Шаг 3

Берём слой Фон главного меню. Выбираем инструмент Прямоугольное выделение.

Делаем первоначальное выделение. Идём в Окна>Прикрепляющиеся диалоги>Параметры инструментов.

Ставим такие параметры:

1. Позиция: 98×150
2. Размер 590×694

После этого идём в Выделение>Закруглить прямоугольник и ставим 10%.

Теперь Заливаем его белым цветом и ставим непрозрачность на 50%.

Получаем:

Шаг 4

Выбираем слой Главное меню. Выделение не снимаем. Идём в Выделение>Уменьшить и ставим 9 px. Заливаем белым цветом.

Шаг 5

Не снимаем выделение. Выбираем слой Фон поисковика. Ставим такие параметры:

1. Положение 697×150
2. Размер 229×65
3. Закругление 50%
4. Цвет заливки Белый
5. Непрозрачность 50%

Берём слой Поисковик и Уменьшаем выделение на 9 px. Закрасим Белым.

Шаг 6

Делаем всё также со слоями Меню.

1. Положение 697:225px
2. Размер 229×360
3. Закругление 10%
4. Цвет заливки Белый
5. Непрозрачность 50%

Шаг 7

Делаем всё также со слоями Прочее.

1. Положение 697×594px
2. Размер 229×249
3. Закругление 10%
4. Цвет заливки Белый
5. Непрозрачность 50%

Шаг 8

Теперь Объединяем с предыдущим все слои с одинаковыми названиями, но с припиской Фон. Для этого кликнем пр. кнопкой мыши по слои нажимаем Объединить с предыдущим.

Шаг 9

Создаём 6 прозрачных слоя с названиями (Фон) Раздел 1, 2 и 3. Делаем всё также, но уменьшаем на 5 px:

1. Положение 135×75px
2. Размер 155×70
3. Закругление 50%
4. Цвет заливки Белый
5. Непрозрачность 50%

1. Положение 315×75px
2. Размер 155×70
3. Закругление 50%
4. Цвет заливки Белый
5. Непрозрачность 50%

1. Положение 515×75px
2. Размер 155×70
3. Закругление 50%
4. Цвет заливки Белый
5. Непрозрачность 50%

Шаг 10

Создадим кисть в Окна>Прикрепляющиеся диалоги>Кисти>Создать кисть.

Даём параметры:

Закрасим пробел между главным меню и разделами.

Чтобы продлить линии, полазаем в прозрачных слоях.

Получим:

Шаг 11

Создадим пункты меню и пункты Главного меню. Выберем кол-во. Я выбрал 5.

Параметры выделения:

1. Положение 720×250px
2. Размер 185×50
3. Закругление 70%
4. Цвет заливки 004е40
5. Непрозрачность 100%

1. Положение 720×305px
2. Размер 185×50
3. Закругление 70%
4. Цвет заливки 808000
5. Непрозрачность 100%

1. Положение 720×360px
2. Размер 185×50
3. Закругление 70%
4. Цвет заливки 808000
5. Непрозрачность 100%

1. Положение 720×415px
2. Размер 185×50
3. Закругление 70%
4. Цвет заливки 808000
5. Непрозрачность 100%

1. Положение 720×470px
2. Размер 185×50
3. Закругление 70%
4. Цвет заливки 808000
5. Непрозрачность 100%

1. Положение 120×630px
2. Размер 150×40
3. Закругление 80%
4. Цвет заливки 505050
5. Непрозрачность 100%

1. Положение 120×630px
2. Размер 150×40
3. Закругление 80%
4. Цвет заливки 505050
5. Непрозрачность 100%

1. Положение 120×630px
2. Размер 150×40
3. Закругление 80%
4. Цвет заливки 505050
5. Непрозрачность 100%

Шаг 12

Заполним поисковик, RSS и Иконка комментария:

• Положение: 718×166
• Размер: 168×32px/li>
• Цвет заливки d2d2d2/li>

Вставим

Получаем:

Шаг 13.

Роспись кистями.

Скачиваем отсюда http://hawksmont.deviantart.com/art/GIMP-Floral-I-56478361 набор кистей и используем как захотим. Получаем:

Шаг 14.

Добавляем текст с помощью инструментов.

Шаг 15.

Это финиш. Здесь всё сделано. У меня получилось вот так:

Метки: Web 2.0, выделение, текст, текстура, заливка, слои.

Уроки: ← предыдущий следующий →