Элегантный сайт портфолио - Дизайн сайтов - Дизайн - Уроки

Главная » Статьи » Дизайн » Дизайн сайтов

Элегантный сайт портфолио

Шаг 1. Направляющие Для начала создайте документ размером 1600 x 1286 px. Затем, добавьте следующие направляющие (View > New Guide): • вертикальную (ориентация Vertical), position - 342px • вертикальную (ориентация Vertical), position - 1257px • горизонтальную (ориентиция Horizontal), position - 38px • горизонтальную (ориентация Horizontal), position - 552px • горизонтальную (ориентация Horizontal), position - 974px Шаг 2. Фон Возьмите инструмент Paint Bucket Tool и залейте холст фиолетовым цветом #33182b. Теперь очередь за мягкой кистью Brush Tool с размером 300px. Поставьте три пятна (цвета - #6c4e77, #643b65 и #774175). С активным инструментом Brush Tool поставьте цвет переднего плана белым. Создайте новый слой, на нем кликните кистью и создайте круглое белое пятно. Его правую половину обрежьте Rectangle Marquee Tool. Blend Mode слоя - Overlay. Продублируйте слой с этим полукруглым пятном несколько раз и подвигайте копии в разные места. Должно получиться так: Выделите все дублированные слои (удерживая Ctrl) и объедините их в один. Как это сделать подробно показано на картинке. Переведите режим наложения дублированного слоя обратно в Overlay и назовите его Glow. Продублируйте слоя Glow (Layer > Duplicate layer) и выполните Edit > Transform > Flip Horizontal. Подвигайте копированный слой так, чтобы добиться максимально органичного положения. У меня вышло вот так: Дальше поместите разработанный нами стильный узор в вершине холста, начиная ровно с середины. Шаг 3. Заголовок / Навигация Создайте прямоугольное выделение с помощью Rectangle Marquee Tool и залейте его цветом #33182b. Напишите ваше название. Я использовал шрифт Gotham Book с размером символа 24px. Дальше создайте заголовки меню навигации. Шрифт Gotham Book, размер 18px. Для каждого слова в заголовке и меню добавьте стиль слоя (Layer > Layer Style...) Gradient Overlay с настройками, как здесь: Продублируйте прямоугольный фиолетовый фон, что под панелью навигации, и немного размойте его - Filter > Blur > Gaussian Blur с радиусом размытия 5px, чтобы создать легкую тень. Результат: Шаг 4. Окно просмотра Сейчас мы добавим окно просмотра в центральную верхнюю часть страницы. Скачайте с Designers Toolbox элементы браузера Mac OS X Safari Web Browser, сделайте скриншоты главных страниц своих web-сайтов. Разместите три примера следующим образом: Шаг 5. Контент Возьмите Single Row Marquee Tool и создайте выделение под второй горизонтальной направляющей. Мы будем делать разделительную линию из двух 1-пиксельных полос. Цвет верхней - #170b13, нижней - #7a3a67. Условно, цветовыми прямоугольниками это выглядит так: Возьмите Erase Tool с hardness 0% и размером 125px. Сотрите линию по краям, сделав плавный переход. Возьмите кисть Brush Tool , поставьте цвет #522443, установите размер 250px и жесткость 0%. Созалйте круглое пятно посередине линии (на скриншоте она закрыта направляющей) и обрежьте его верхнюю половину. Растяните получившийся полукруг до боковых направляющих. Правый клик по слою > Duplicate Layer. Создав копию, идите Edit > Transform > Flip Vertical. Убавьте яркость - Edit > Brightness/Contrast. Значение Brightness на -90. Возьмите Type Tool и напишите "WE’VE GOT THE GOODS!” Установите tracking на 200 и примените к слою тот же тиль, что и для заголовка и панели навигации. Теперь посетите Pixel Mixer и скачайте Basic Set icon package. Вставьте 32-пиксельные иконки Briefcase, Calendar и Graph в нашу работу. Так же добавьте соответствующий текст. Стиль слоя - Gradient Overlay, все тот же. Создайте разделительную линию на границах трех наших блоков. Используйте Pencil Tool, цвета #170b13 и #4e2642, ластик для ослабления краев. Расположите линии таким образом: Шаг 6. Нижняя панель Продублируйте фон, который мы создавали для надписи "We’ve Got The Goods” и поместите под последнюю горизонтальную направляющую. Для удобства смотрите скриншот: Возьмите Text Tool и шрифтом Verdana с размером символа 12px напишите необходимую информацию и контакты. Готово!) Источник: http://demiart.ru/forum/index.php?showtopic=115409
1 2 3 4 5 Категория: Дизайн сайтов \| Добавил: mixsnt (17.08.2012)
Просмотров: 585 \| Комментарии: 1 \| Теги: Сайт Портфолио, дизайн шапки сайта., идеи для создания сайта, Создание сайта бесплатно, веб дизайн фотошоп \| Рейтинг: 0.0/0