Урок создания сайта
Попробуем сделать еще один шаблон для сайта.
Дизайн будет строгим, для какой нибудь компании консалтинговой подошло бы очень даже не плохо.
Шаг 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.
Создаем новый документ размерами 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
Если наш сайт был полезен Вам, НЕ ПОЛЕНИТЕСЬ, нажмите на любую из кнопок ниже, для того, чтобы поделиться с другими людьми полезной ссылкой!
Нравится |
!!! Спасибо !!!
Эта новость называется - Урок создания сайта. Не забудьте добавить в закладки, чтобы не потерять.

На правах обмена ссылками:
3
Простенько, но результат хороший. Можно под веб 2.0 даже натянуть, немного поэкспериментировав;)
18 апреля 2008 12:50
9
я не могу понять когда сделаеш дизайн его можно будет поставить в сайт???
если да то КАК???
если да то КАК???
5 февраля 2009 15:14
AlexNAM