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

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

Дизайн сайта портфолио

Шаг 1. Создаем новый документ 1000 px ширине и 1400 px высоте. В этом шаге расставляем направляющие. После расставления направляющих, увеличиваем размер документа 1000 px на 1280 px нажав Alt + Ctrl + C в тоже время. Область внутри направляющих, это видимая область рабочая, и дизайн должен находиться внутри этой области. Шаг 2. Создаем черный прямоугольник наверху, нажав U. Высота 40 px. Создаем прямоугольник с цветом: 4b4b4b. Выбираем gradient overlay из стиля слоя и используем следующие цвета: 000000 и 585858. Выберем row marquee tool и 1 px horizontal line и зальем все это белым цветом. Поместим эту линию в 1 px наверху и внизу кнопки и установим прозрачность 20%. Шаг 3. Создаем вертикальную линию в 1px и заливаем черным цветом. Дублируем и двигаем на 1 px в право и заливаем белым цветом. Группируем оба слоя и называем "vertical divider " и добавляем маску слоя. Обрабатываем края мягкой черной кистью. Понижаем прозрачность до 30% .Я также использовал RSS на левой части кнопки. Шаг 4. Создаем прямоугольник с цветом: 4b4b4b. И создаем формы для текста. Вы можете добавить линии белого цвета в 1 px, снизу и справа у формы. Кнопка готова! Шаг 5. Делаем шапку. Создаем прямоугольник высотой 107 px и цветом b34343 и называем его " header". В стилях слоя выбираем gradient overlay. Цвета для градиента ставим d40393 и 940062, и режим смешивания "darker color” . Прозрачность понижаем до 85%. Шаг 6. Создаем другой прямоугольник, такой же как в шаге 5 только с высотой: 254 px и цветом: 34343. Применяем gradient overlay с 80% прозрачности и выбираем следующие цвета: a20072 и dd009c. Называем прямоугольник "featured rectangle 1”. Дублируем "featured rectangle 1” и применяем тот же стиль слоя что использовали в шаге 5 , уровень прозрачности понижаем до 60%. Шаг 7. Снова жмем U и создаем прямоугольник высотой 107 px и называем его "grey rectangle”. Применяем gradient overlay , с цветами: e7e7e7 и ffffff. Шаг 8. Создаем белый прямоугольник ширино 485px и высотой 280 px. Называем его " photo border" и дублируем. Делаем размер меньше чем у слоя "photo border" и называем его "photo". Применяем inner glow и ставим размер 46 px.Цвет: c52d8c с 15% прозрачности. Шаг 9. Создаем другой прямоугольник ниже "photo border", заливаем черным и называем "shadow". Применяем wrap transform. Режим смешивания multiply с 30-40% прозрачности. Шаг 10. Берем Pen Tool и рисуем форму в левом углу и называем ее " ribbon". Добавляем стили слоя: Drop shadow: Inner glow: цвет - ed649e, размер 8 px, 75% прозрачность, режим смешивания - lighten. Gradient overlay: цвет - d40393 и 940062, 80% прозрачности, scale 28%. Шаг 11. Ctrl + клик на слое "ribbon" и создаем новый слой. Берем мягкую кисть размером 20 px и цветом: b05085 и рисуем в углу ленты, режим смешивания на multiply с 70% прозрачности. Шаг 12. Добавим немного света на ленту, создаем новый слой и создаем прямоугольное выделение примерно такой же ширины как и углы ленты. Заливаем белым цветом и размываем. Лента готова, пишем на ней текст, который пожелаете! Шаг 13. Добавляем текст. Выбираем любой шрифт и добавляем inner shadow: размером 1px и 20% прозрачности. Я использовал Aller Bold , размером 37 px. Шаг 14. Жмем U и выбираем Rounded Rectangle Tool и создаем прямоугольник 100 px по ширине и 50 px по высоте с радиусом закругления углов - 4px. Называем "highlight menu" выбираем верхние правые опорные точки и двигаем влево. Шаг 15. Дублируем highlight menu и добавляем gradient overlay с цветами: dbdbdb и ffffff с углом: angle 5°. Шаг 16. Ctrl + клик на прямоугольнике в шапке, после чего ctrl + shift + клик на rectangle 1. Берем мягкую черную кисть размерами 200 px и тянет сверху вниз с левого и правого угла. Прозрачность 40% -50% и режим смешивания на multiply. Повторите этот шаг и на других частях. Шаг 17. Теперь пишем название компании и применяем inner shadow , 2 px с 40% прозрачности. Шаг 18. Создаем прямоугольник с закругленными краями 454 px по ширине и 356 px по высотеt. Применяем gradient overlay, цвет: f0f0f0 и ffffff. Применяем stroke , размер 1px с цветом: ececec. Называем " testimonial box." Результат: Шаг 19. Теперь пишем текст в боксах. Создаем прямоугольник с закругленными краями, ширина 327 px и высота 211 px. Применяем те же стили что и для слоя " testimonial box " и с помощью Horizontal Type Tool пишем текст. Шаг 20. Создаем форму поиска, создаем прямоугольник с закругленными краями цветом: f2f2f2. Высота должна быть 30px и ширина 230px , радиус закругления углов: 12 px. Применяем тот же стиль что в шаге 18. Шаг 21. Время создать футер, создаем прямоугольник 260 px высота и по ширине, как у всего документа и применяем gradient overlay с цветом: 5c5b5b и 000000. Шаг 22. Вот так выглядит законченный макет: Источник: http://demiart.ru/forum/index.php?showtopic=105963
1 2 3 4 5 Категория: Дизайн сайтов \| Добавил: mixsnt (17.08.2012)
Просмотров: 611 \| Теги: шапка сайта фотошоп., Дизайн сайта портфолио, идеи для сайта, Создание сайта бесплатно, веб дизайн фотошоп \| Рейтинг: 0.0/0