Урок создания сайта

Попробуем сделать еще один шаблон для сайта.

Дизайн будет строгим, для какой нибудь компании консалтинговой подошло бы очень даже не плохо.


Шаг 1.
Создаем новый документ размерами 1024х800 с белым задним фоном.


Создаем новый слой (ctrl+N). При помощи инструмента выделения, выделяем
верхнюю часть - под шапку. и заливаем ее таким вот #009994 цветом




Шаг 2.
Дублируем слой, и кистью с мягкими краями и малой прозрачностью, примерно 15%, проводим в центе белую, еле заметную полосу.


Шаг 3.
Создаем новый слой, выделяем область под шапкой, и заливаем светло серым градиентом.

Шаг 4.
Продолжаем работать с шапкой. Рисуем будущее меню.

Создаем новый слой поверх синей шапки.

Рисуем прямоугольники как на образце. тот который больше - это открытая страница.

Пишем линки над каждым квадратом. Я применил к тексту еще и отбрасывание тенив blending mode, совсем немного, еле заметно.




Шаг 5.
Теперь нужно сделать отражение от кнопок.


Дублируем слой с кнопками цветными, переворачиваем вниз, и аккуратно,
стеркой с большим диаметром и мягкими краями стираем лишнее.


Шаг 6.
Пока оставим шапку. Начнем рисовать левое меню.

Создаем новый слой. выделяем область под меню. Идем в select---modify---smooth и выставляем радиус - 5px

Края скруглились, заметили? заливаем светло - серым, еле заметным. Не снимаем выделения, создаем новый слой. Удерживая alt
убираем выделение оставляя только верхнюю часть. которую потом будем
красить. Соответственно теперь заливаем ее зеленым цветом. К слою с
серым фоном применим stroke в blending mode


Шаг 7.
Вставляем какие - нибудь иконки, пишем краткую инфу и т.д. все что хотите разместить в этом блоге.

я реализовал это так:


Таких блоков можно сделать несколько.
Шаг 8.
Вставляем лого в шапку, текст в центральную часть, ну и внизу прописываем копирайты.



Автор урока - Azat Khairikenov

Если наш сайт был полезен Вам, НЕ ПОЛЕНИТЕСЬ, нажмите на любую из кнопок ниже, для того, чтобы поделиться с другими людьми полезной ссылкой!
Нравится
!!! Спасибо !!!


Эта новость называется - Урок создания сайта. Не забудьте добавить в закладки, чтобы не потерять.


Распечатать
1

спасибо за урок,я как раз собирался занятся чем то подобны,но не знал как
18 апреля 2008 11:25
2

Очень полезный урок!
18 апреля 2008 12:47

CSR
3

Простенько, но результат хороший. Можно под веб 2.0 даже натянуть, немного поэкспериментировав;)
18 апреля 2008 12:50
4

Отлично
18 апреля 2008 13:45

div
5

очень интересная реализация....и выглядит на отлично просто
18 апреля 2008 15:01
6

очень полезно!просто ОЧЕНЬ!!!!!!спасибо!
18 апреля 2008 20:26
7

Урок полезный, а реализация я бы сказал элементарными средствами yes
3 июня 2008 19:17
8

Все очнь просто, но и очень полезно!!!
5 сентября 2008 12:17
9

я не могу понять когда сделаеш дизайн его можно будет поставить в сайт???
если да то КАК???
5 февраля 2009 15:14
10

для этого тебе поможет программа Dreamweaver
5 февраля 2009 22:26

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости. Только для зарегистрированных пользователей
теги 2дтуториалс
фотошоп скачать клипарт Кисти шрифтов коллекция скачать иконки набор Обои для рабочего стола иконок Тонкости и секреты Часть шаблоны Новогодние фоторамки разные шаблоны исходники фотошопа кистей Wallpapers текстуры Иконки стилей Стили для фотошоп обоев Подборка скачать обои стиле текстур Скачать текстуры бесплатно текстуры для фотошоп Рамки для фотографий psd исходники фотошоп Клипарт скачать clipart бесплатно бекграундов фоторамок скачать иконки для windows Кисти для фотошопа скачать кисти фотошоп
{slin}
2дтуториалс.ру - проект компании ООО "Российские Интернет Технологии", 2011г.
Офис расположен по адресу - Россия, г. Москва, ул. Обуховской обороны, д. 12, оф.5.

счетчик рамблер   Рейтинг SIMPLETOP.NET   [Valid RSS]   Здесь находится аттестат нашего WM идентификатора 194801541119