Дизайн сайта Персональное Портфолио.

[web-design]

Tutorial "Personal Portofolio".

Драсти всем!!! Это мой первый перевод, поэтому не судите строго.

От автора: Этот урок покажет вам легкий способ создания выдающегося сайта. Результат:

Рисуем

Шаг 1. Создаем новый документ размером 760x770 px с белым фоном. Затем, используя “Paint Bucket Tool” заливаем наш слой цветом #282828.

Шаг 2. Выберите “Rectangle Tool” и создайте прямоугольник подобный, как на рисунке:


После того как создали прямоугольник, переходим в настройки “Blending Option” и выбираем там “Gradient Overlay” и делаем настройки как на картинке ниже:



Шаг 3. Дублируем слой с прямоугольником 4 раза (CTRL + J). Затем переместим их так, что бы это напоминало меню. Для это нажимаем клавишу V, и удерживая Shift перемещаем слои как на рисунке ниже:


Шаг 4. Создаем новый слой. Выбираем “Line Tool”, ставим цвет переднего плана #9C9C9C, толщину линии 2-3 px и рисуем вертикальную линию. Далее нажимаем CTRL + J, что бы дублировать линию и перемещаем полученную линию вправо как на рисунке:


Шаг 5. Создаем новый слой, выбираем “Rectangular Tool” и рисуем внизу прямоугольник как на рисунке ниже. Далее идем в “Blending Option” выбираем “Gradient Tool” и делаем такие же настройки, как в Шаге 2.


Шаг 6. Идем в File > Open (Файл > Открыть) и открываем изображение для фона. Далее растягиваем его, так, как показано ниже на рисунке.


Шаг 7. Выбираем “Rectangular Marquee Tool” и выделяем половину нашего изображения:


Далее идем в Image > Adjustments > Desaturate (Изображение > Регулировки > Уменьшение насыщенности, или Shift + CRTL + U). Результат:


Шаг 8. Выберите “Type Tool” и добавьте нужный вам текст.

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

КОНЕЧНЫЙ РЕЗУЛЬТАТ АВТОРА:


Перевод: GOBLOiD
Источник

@темы: Уроки, Web-дизайн

Comments

[Gabriel <Lee> Lark]

О, спасибо! Как раз надо портфолио делать )))

[web-design]

Наздоровье) Будут еще уроки с портфолио, надеюсь пригодятся не меньше, как и те 4, что уже выложены в сообществе

[Gabriel <Lee> Lark]

web-design
Тоже надеюсь. Хотя мы работаем так: эскизы на бумаге -> Фотошоп -> ИмаджРеди -> Дримвивер...
От такие мы дЫзайнеры...

[web-design]

Gabriel-Larka Gonzalez
О_о на бумаге?!
А я для нарезки пользуюсь fireworks =^_______^= привычка

[Gabriel <Lee> Lark]

web-design
Первичные эскизы - да, на бумаге...

Ну, у нас такое обучение... Я не знаю, почему именно ИР. Возможно, из-за того, что просто удобнее из фотозада файл трансферить... А еще мы работаем на Маках. Может, и это играет роль...

Собственно, потому и хочу в универ пойти - может еще чему умному научат )))

[web-design]

Gabriel-Larka Gonzalez

Собственно, потому и хочу в универ пойти - может еще чему умному научат )))

Несомненно У меня те же мысли))

[Gabriel <Lee> Lark]

web-design