Суббота, 12.07.2025, 02:27
Приветствую Вас Гость | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Prison  
Урок №3
PrisonДата: Вторник, 22.07.2008, 16:46 | Сообщение # 1
Форумчанин
Группа: Пользователи
Сообщений: 44
Статус: Offline

Начнём работу с того, что создадим новый документ (File-New), используем
770х750 px и 72 dpi.



Сначала разблокируем наш слой (двойной клик). Теперь ещё один двойной клик,
выбираем Gradient Overlay и ставим настройки как тут:



Веб-дизайн: Портфолио фотографа 2




Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Используя Rectangle Tool (U), наметим зону, где будет располагаться портрет
автора и боковое меню(Цвет не имеет значение, но автор использовал белый).
Сначала делаем длинный прямоугольник, далее зажав Alt, уберём не нужный кусочек,
как показано ниже.



Веб-дизайн: Портфолио фотографа 2



Layer-Layer Style-Inner Glow. Ставим такие параметры.



Веб-дизайн: Портфолио фотографа 2



Теперь возьмём фото автора и вставим в наш документ. Не забудьте использовать
Free Transform, чтобы разместить фото следующим образом:



Веб-дизайн: Портфолио фотографа 2



Зажмите Alt и нажмите между слоем с фото и слоем, над которым мы только что
работали, таким образом фото будет в пределах рамки.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Image-Adjustments-Photo Filter:



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Скачайте эти

кисти ниже, чем слой с фото. Цвет кистей белый и Oplacity на 10%.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2




На следующем новом слое мы снова используем скаченные кисти. Цвет-белый (Opacity
20%). Этот слой должен быть размещён ниже слоя с фото..



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Теперь скачайте эти

кисти
. Создайте новый слой. Цвет также остаётся белым. Используя Free
Transform, можете перемещать и переворачивать рисунки. Этот слой должен быть
размещён ниже слоя с фото.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



На следующем слое мы используем стандартные кисти.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Создайте ещё один новый слой. Используем скаченные кисти. Цвет белый (Fill 20%).
Слой расположен под слоем с фото.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Напишем название нашего будущего сайта. (настройки такие же, как в таблице)



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Параметры для «personal»



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Параметры для «page»



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Теперь выберите Rectangle Tool (U) и нарисуйте одну из кнопок будущего меню.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Параметры слоя такие:



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Сделайте копию этого слоя и с помощью Free Transform разместите этот слой так,
как показано ниже:



Веб-дизайн: Портфолио фотографа 2



Параметры для этого слоя:



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Сделайте ещё три копии изменённого слоя и опять с помощью Free Transform
разместите их, как показано ниже:



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Используя Rectangle Tool (U), нарисуйте белую линию над кнопкой.



Веб-дизайн: Портфолио фотографа 2



Теперь добавим названия кнопок. Настройки для «Home page»



Веб-дизайн: Портфолио фотографа 2



настройки для остального текста:



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



ещё несколько настроек для «Home page»



Веб-дизайн: Портфолио фотографа 2



и для остального текста:



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Создайте новый слой. Используя Pencil Tool (B ) белого цвета (1px) попытайтесь
нарисовать указатель.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Для указателей примените такие же параметры, что и для текста.



Веб-дизайн: Портфолио фотографа 2



На новом слое используя Rectangle Tool (U), нарисуйте зону, где будут
располагаться вспомогательные кнопки (цвет #36322D)



Веб-дизайн: Портфолио фотографа 2



Создайте новый слой. Выберите Pencil Tool (B ) (brush 1 px) и нарисуйте примерно
такие иконки.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Сделайте копию слоя с фотографией автора. Выберите Free Transform и расположите
слой, как показано ниже. Цвет в этом случае- #2A251F



Веб-дизайн: Портфолио фотографа 2



Праметры слоя такие:



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



На новом слое с помощью Rectangle Tool (U) и попытайтесь создать зоны, где мы
будем вводить названия секций и боковых меню:



Веб-дизайн: Портфолио фотографа 2



Введём названия. Названия состоят из двух слов, каждое из них расположено на
отдельном слое.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Параметры для первых слов:



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Теперь напишем приветствующий слоган. Слова «welcome to» должны быть написаны на
отдельном слое, а «my page» - на другом.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



И для этих слоёв используем точно такие же настройки, что и для слоя с название
сайта.



Веб-дизайн: Портфолио фотографа 2



Снова берём Rectangle Tool (U). на новом слое рисуем прямоугольники. Там будут
располагаться фотографии, сделанные автором.



Веб-дизайн: Портфолио фотографа 2



Такие параметры:



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Вставьте соответствующие фотографии. Каждое фото должно быть расположено выше,
чем слой с прямоугольниками. Зажмите Alt и нажмите между слоем с фото и слоем с
прямоугольником, таким образом, фото будет в пределах рамки.



Веб-дизайн: Портфолио фотографа 2



Теперь для каждой фотографии используйте тот же фото фильтр, что и для
фотографии автора в самом начале (Image-Adjustments-Photo Filter)



Веб-дизайн: Портфолио фотографа 2



Теперь создадим Pattern. Создадим новый документ 1х2px, увеличим до предела. С
помощью Pencil Tool (B ) (brush 1 px) поставьте одну точку цветом #363331.
Edit>Define Pattern. И переходим обратно к нашему документу с будущим сайтом.



Веб-дизайн: Портфолио фотографа 2



Выбирите Line Tool (U) и нарисуйте линию цветом #38322C. Это наша будущая
прокрутка.



Веб-дизайн: Портфолио фотографа 2



Параметры для слоя.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Возьмите Rectangle Tool (U) и добавьте этот элемент. Цвет #67584A



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Теперь время ввести остальной текст.



Веб-дизайн: Портфолио фотографа 2



Продолжение в следущем посте...

 


 
PrisonДата: Вторник, 22.07.2008, 16:47 | Сообщение # 2
Форумчанин
Группа: Пользователи
Сообщений: 44
Статус: Offline

Параметры для ссылок:



Веб-дизайн: Портфолио фотографа 2



Для даты:



Веб-дизайн: Портфолио фотографа 2



Для текста белого цвета:



Веб-дизайн: Портфолио фотографа 2



И для остального текста:



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Поставьте эти параметры для слов под картинками, в зоне Latest works.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



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



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Теперь время написать строчку с авторскими правами.



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



Веб-дизайн: Портфолио фотографа 2



вот и всё!!!




полный размер




Автор: Adobe Tutorialz

Перевод: KILLery



 
PrisonДата: Вторник, 22.07.2008, 16:49 | Сообщение # 3
Форумчанин
Группа: Пользователи
Сообщений: 44
Статус: Offline
Если кто сделает ето все в html + css выложте кому не сложно

 
PersheronДата: Суббота, 31.01.2009, 16:07 | Сообщение # 4
Заглянувший
Группа: Пользователи
Сообщений: 1
Статус: Offline
Кому интересно за не большое вознаграждение пришлю это(не картинку, а код с прочими реквизитами), если что не понривится пишите на асю переделаю

Сообщение отредактировал Persheron - Суббота, 31.01.2009, 16:08
 
  • Страница 1 из 1
  • 1
Поиск:

Меню сайта
Форма входа
Поиск
Наш опрос
Вы любите молчать, когда вас не спрашивают
Всего ответов: 10
Статистика