| Сегодня 27 ноября, среда |
      |
  
|
  
Какой рейтинг вас больше интересует?
|
Рисуем макет шаблона в фотошопе2013-12-08 15:39:52 (читать в оригинале)Сегодня представлю вам урок как нарисовать макет шаблона сайта в фотошопе. Шаг 1. Для того, чтобы у нас всё было ровно и правильно, мы будем использовать Сетчатую систему 960s (http://960.gs/), Шаг 2. Так как мы будем использовать направляющие, мы должны активировать функцию отображения Линейки (Ctrl+R) или Просмотр>Линейки.
Шаг 3. Установим границу для области заголовка, нарисуем горизонтальную направляющую: Просмотр>Новая направляющая, Положение: 100.
Шаг 4. Создадим заголовок. Создайте прямоугольное выделение размером 1020х100px. Нажмите Shift+Backspace, для заливки цветом данного выделения (можете выбрать любой цвет). Примените для этого слоя Стиль слоя>Наложение градиента со следующими настройками: Назовите этот слой “header_bg”. Шаг 5. Напишите название Вебсайта, используя следующие настройки: Примените к слою с текстом Стиль слоя>Наложение градиента со следующими параметрами:
Выровняем наш заголовок относительно фона: выберете слой с заголовком и слой "header_bg" и нажмите "Выравнивание центров по вертикали". Шаг 6. Напишите заголовки навигационного меню со следующими настройками: Используя Инструмент Прямоугольник со скругленными углами Примените Стиль слоя>Наложение градиента и Стиль слоя>Обводка Прежде, чем перейти к следующему шагу, удостоверьтесь, что Ваши слои расположены именно так, как показано на изображении. Шаг 7. Пришло время создать область для размещения контента. Установите горизонтальную направляющую, на расстоянии 430px от предыдущей. Создайте выделение размером 1020х430px. и заполните его любым цветом Примените к этому слою Стиль слоя>Наложение градиента Теперь давайте создадим эффект глянца! создайте выделение размером 1020х120px, заполните его любым цветом. Стиль слоя>Наложение градиента Уменьшим прозрачность этого слоя до 40%. Шаг 8. Давайте добавим несколько деталей! С помощью Инструмента Прямоугольная область (М) Выберите цвет переднего плана #acd86e, нажмите на Shift+Backspace, чтобы заполнить выделение.
У Вас получились замечательные детали. Мы cоздали второстепенные элементы. Удостоверьтесь, чтобы у них были названия, и объедините их в группу Шаг 9. Для того, чтобы быть совсем уж точными протяните две новых направляющих, как показано ниже. Напишите некоторые приветственные слова используя следующие настройки: Я лично написал: “Вот наша совершенно новая работа. Ой Добро пожаловать!”, но мы должны выделить слово "Welcome!" Теперь расположите две горизонтальных направляющих как показано ниже Прежде чем перейти к следующему шагу, удостоверьтесь, что Ваши текстовые слои расположены именно так, как показано на изображении. Шаг 10. Начнём с создания выделения 250х150px (заполните любым цветом), это будет нашей рамкой для изображения Назовите этот слой "pic_holder" и выровняйте его как показано на изображении выше Давайте вставим изображение в наш проект, Файл>Поместить... и выберите изображение. Назовите слой "pic", поместите его выше слоя “pic_holder”. Правый щелчок на слое "pic" Создать Обтравочную Маску.
Шаг 11. Создадим отражение для изображения в рамке, дублируем два слоя "pic" и “pic_holder”. Дублируем два выбранных слоя, Редактирование>Свободное Транформирование, и ставим "-" перед значением высоты.
Выбрав два продублированных слоя, выполните щелчок правой клавишей по слою и выбираем Преобразовать в смарт-объект; назовите этот слой "shadow". Разместите этот слой ниже всех, как показано ниже.
Выберите слой "shadow" и добавьте слой-маску Выберите линейный Градиент У Вас должно получиться нечто подобное! Шаг 12. Мы должны добавить описание к нашему изображению. Создайте выделение размером 240х25px, и заполните это выделение: #1a1919. Это будет являться фоном описания. Напишите некоторое описание с этими параметрами настройки характера: Удостоверьтесь, что слои расположены так же, как на изображении ниже Шаг 13. Вставьте ещё одно изображение и примените к нему тот же стиль, что и к предыдущему изображению (Скопировать стиль слоя>Вклеить стиль слоя) и выровняйте его по правой стороне. Центральное изображение сделаем немного крупнее, так что сделайте выделение размером 340х200px, выровняйте его как показано ниже, и залейте его любым цветом. Применим к нему Стиль слоя>Обводка, применив следующие настройки: Вот что должно получиться! Удостоверьтесь, что Ваши слои сгруппированы. Я лично создал три отдельные группы (Для первого, второго и третьего изображения соответственно). Вот что получилось у меня. Шаг 14. Давайте создадим кнопку «пролистывания»! Начнём с того, что создадим эллипс размером 50х50px, используя Инструмент Овальная область
Добавим Стиль слоя, как показано ниже. Используя Инструмент Произвольная фигура Должно получиться что-то подобное: Не забудьте про выравнивание по направляющим. Сделайте копию кнопки и перенесите её на правую сторону. Шаг 15. Давайте возьмёмся за основную область. Для начала создадим выделение размером 1020х815px Выберите в палитре цветов #e8e8e8 и нажмите Shift+Backspace. Используя Инструмент Область У Вас должна получиться прекрасная окантовка! Шаг 16. Мы должны установить верхние границы в нашей области для контента. Поэтому установим горизонтальную направляющую с положением 50px. Расположите новую горизонтальную направляющую на расстоянии 20px. Создайте заголовок для изображения, используя следующие настройки: Создайте ещё две направляющие. Напишите текст с параметрами: Создайте ещё 3 горизонтальных направляющих. Шаг 17. Пришло время создать кнопку “read more”. С помощью Инструмента Прямоугольник со скругленными углами Применим к слою Стиль слоя. С помощью Инструмента Эллипс Наберите знак “+”, закрасьте его белым цветом (#ffffff) и разместите его как показано ниже. Напишите “read more” со следующими параметрами настройки: Примените к тексту Стиль слоя>Тень. Шаг 18. Чтобы создать вертикальную линию раздела, будем использовать Инструмент Линия Выровняйте линии как показано ниже. Не забывайте про структуру организации своих слоёв. Шаг 19. Сделайте три копии того, что мы создали в предыдущих двух шагах. Вот что должно получиться! Шаг 20. Давайте создадим разделитель. Расположите новую горизонтальную направляющую на расстоянии 50px от края созданной кнопки "read more". Инструмент Овальная область Выберите цвет переднего плана черный (#000000), нажмите Shift+Backspace. Назовите этот слой “separator_bg”. Сделаем это изображение размытым. Фильтр>Размытие>Размытие по Гауссу с радиусом 3px. Выбрав слой “separator_bg” сделайте прямоугольное выделение, как показано ниже и удалите лишнее. Добавим слой-маску Протяните линейным градиентом от правого до левого конца разделителя. Уменьшите прозрачность слоя до 50%. С помощью Инструмента Линия Шаг 21. Начнём работать с нижней частью, расположим горизонтальную направляющую на расстоянии 50px от нашего разделителя. Добавьте заголовок с этими параметрами: Расположите две направляющие так, как показано на изображении ниже: Напишите текст с этими параметрами: Расположите ещё одну направляющую на расстоянии 160рх Шаг 22. Напишите другой заголовок и текст к нему, используя те же самые параметры, которые мы использовали в предыдущем шаге. Напечатайте кавычку, используя следующие параметры шрифта: Уменьшите прозрачность слоя до 50% Напишите слова мудрых или своё высказывание, используя следующие настройки: Шаг 23. Создадим вертикальную полосу-разделитель: создайте две вертикальных линии друг рядом с другом, и закрасьте их следующими цветами: #ffffff - #b3b3b3. Следите за расположением и организацией слоёв. Вот как это выглядит у меня. Шаг 24. Напишите еще одно название так же как и слева (например я написал “Our Team”). Используя Инструмент Прямоугольник Поместите фотографию участника и назовите слой «photo1». Удостоверьтесь, что слой “photo1" находиться выше слоя “photo1_holder”. Щелчок правой клавишей на слое “photo1" - Создать обтравочную маску. Вы должны что-то подобное! Шаг 25. Напишите текст об участнике, используя следующие параметры: Мы создадим иконку социальной группы самостоятельно! давайте начнем, напишем символ “t” со следующими параметрами шрифта: Примените Стиль слоя>Обводка Напечатайте "in": Напечатайте “f”: Шаг 26. Создайте копию фотографии участника. Выберите слой с фотографией. Слой>Новый Корректирующий Слой>Черно-белый. Напечатайте такой же текст, (иконка социальной группы), используя те же самые параметры для текста, но изменив цвет: #505150.
Таким образом, фото и текст будут выглядеть чёрно-белым! Сделайте ещё две копии чёрно-белого изображения и серого текста, разместите их так же, как показано ниже: Как только Вы закончите с выравниванием, сделайте четыре отдельных группы, содержащих фото участника и текстовые слои нашей иконки социальной группы, Вот что вышло у меня! Шаг 27. Прежде, чем мы приступим к работе с областью основного контента, мы установим ещё несколько границ. Создадим ещё пару горизонтальных направляющих. Смотрите на изображение. Сделайте выделение размером 940х70px, произведите его выравнивание, как показано ниже. Залейте выделение любым цветом и примените Стиль слоя>Наложение градиента, параметры наложения градиента представлены ниже. Создайте прямоугольник размером 70х45px. Расположите его и примените Стиль слоя так, как показано на изображении. Назовите этот слой “tw_bg” Скройте слой “tw_bg”, чтобы он не мешал Вам работать. Создайте ещё один прямоугольник 10х43px. Далее пройдите Редактирование>Трансформирование>Наклон. Выставьте следующие параметры: Назовите этот слой "effect" и сделайте слой “tw_bg” видимым. Скопируйте стиль слоя "tw_bg" и примените его к слою "effect" Напишите “t” со следующими параметрами шрифта: Параметры наложение градиента Шаг 28. Повторите шаг 20, чтобы создать разделитель или скопируйте его. Поместите его как показано ниже: Мы должны сделать так, чтобы наш прямоугольник был неправильной формы. Чтобы сделать это, выбираем слой “tw_bg” и добавляем маску. Выделите ту часть прямоугольника которую нужно удалить, выберите цвет переднего плана черному (#000000), Шаг 29. Напишите какой-нибудь текст, который является поясняющим с этими параметрами шрифта: Чтобы текст располагался ровно по отношению к слою с зелённым фоном, нажмите Выравнивание центров по вертикали Шаг 30. Повторите шаг 27, чтобы создать что-то подобное тому, что изображено ниже. Также создайте прямоугольник, заполните его цветом #334814 и уменьшите прозрачность слоя до 40 %. К прямоугольнику побольше примените Стиль слоя с нижеприведёнными параметрами: Теперь заполните наклонённый прямоугольник более темным цветом: #2a6788. Напишите “t”: Примените Стиль слоя>Обводка: Следите за группировкой слоёв для комфортной работы с ними. Сделайте копию слоя прямоугольника с буквой "t" и измените цвет перекрытия градиентом на #0080ab, а вот этим цветом #00526d залейте наклонённый прямоугольник. Напишите слово "in" с этими параметрами: Создайте третью копию слоя прямоугольника, измените Наложение градиента (для большого прямоугольника): #395796, и #263e6f для наклонённого. Напишите “f” с таким параметрами шрифта: Сделаем последнюю копию. Цвет для градиента большого прямоугольника #e8e8e8, для наклонённого: #cdcdcd. Напишите слову "fr" с этими параметрами: Поместите каждое из изображений в отдельную группу. Выделите все группы с этими слоями и нажмите Распределение левых краёв (см. ниже)
Шаг 32. Создайте выделение размером 1020х460px и заполните его любым цветом (пока). Примените к этому слою Стиль слоя>Наложение градиента, используя следующие настройки: У вас должно получиться что-то похожее на это: С помощью Инструмента Область Шаг 33. Создайте две направляющих, как на изображении ниже: Напишите заголовок с этими параметрами шрифта: Напишите подзаголовок с этими параметрами шрифта:
|
  
Категория «Кино»
Взлеты Топ 5
Падения Топ 5
Популярные за сутки
|
(U), создайте фигуру размером примерно 65х35px и радиусом скругления углов 5px,
создайте выделение в 1px, разместите его как показано ниже:
>
.
(G) от чёрного к белому, проведите с нижнего края до верхнего.
>
(M), и заполните его любым цветом.
(U), создайте стрелку, применив к слою следующие настройки:
(горизонтальная строка), создайте выделение в 1рх, разместите его как показано на изображении и залейте его белым цветом (#ffffff).
(U) создайте фигуру размером 15х15px и заполните её цветом: #4d4d4d. Для вертикального выравнивая воспользуемся функцией Выравнивание центров по вертикали, для этого выберите слой с прямоугольником и кругом.
(U). Создадим две вертикальных линии рядом друг с другом, заполним
как и к слою с разделителем.
(U) создайте прямоугольник 90х90px, и заполняют его любым цветом. Назовите этот слой “photo1_holder”. Это будет рамка для фотографии участника команды. Примените Стиль слоя>Обводка. Используйте следующие настройки стиля.
(горизонтальная строка) создайте выделение высотой в 1рх и залейте его белым цветом (#ffffff).
Загрузка...
взяты из открытых общедоступных источников и являются собственностью их авторов.