Профессиональный макет сайта в фотошоп. Как создать в фотошопе шаблон


Как сделать шаблон в Фотошопе

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

Помимо этого, пользователь, проследовав некоторым рекомендациям, как создать шаблон в Фотошопе, может получить оригинальное изображение, подставляя желаемое фото к созданному шаблону.

Используя шаблон, вы сможете создать свое уникальное фото на интересном фоне

Как создаётся шаблон

Безусловно, для того чтобы получить собственное изображение на красивой яхте, на вершине высочайшего горного массива, за штурвалом самолёта, вовсе не обязательно лично участвовать в экстремальных или экзотических путешествиях. Для этого вполне достаточно найти подходящий фон и фото, которое впоследствии будет подставляться под шаблон.

Правила создания простого шаблона

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

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

Выберите фото, которое послужит исходником вашего шаблона

Если же подобрать фон, противоречащий реальности, можно получить забавное фото. Например, как кто-то плавает в окружении нескольких акул или прыгает без парашюта с высокой скалы.

Такие фотографии можно сделать, если предварительно подготовить шаблон в Фотошопе.

После того как была подобрана фотография, выступающая в качестве желаемого фона, она должна быть открыта в Фотошопе. Далее, очень важно создать дубликат этого изображения, чтобы основная фотография была сохранена без изменений. Для получения дубликата достаточно применить комбинацию клавиш «Ctrl» и «J».

Для более комфортной работы с изображением желательно увеличить масштаб, что также легко достигается комбинацией клавиш «Ctrl» и «+». Далее, на панели инструментов выбирают инструмент «перо», при помощи которого аккуратно выделяют лицо того, кто содержится на фото. После того, как контур выделения замкнётся, следует кликнуть правой кнопкой мыши, вызывая дополнительное меню, в котором выбирается пункт «Образовать выделенную область».

Показатель радиуса растушёвки должен быть равен либо 1, либо 2. Нажмите на «Delete», лицо исчезнет. Если пользователь желает создать классический шаблон, то перед удалением следует скопировать первое фото, задействовав комбинацию клавиш — первоначально «Ctrl» и «C», а затем «Ctrl» и «V». Таким образом, будет получено два одинаковых слоя, только на одном из них будет удалено лицо.

Правила создания шаблона на основе трёх слоёв

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

Первое фото берётся за основу фона, со второго вырезается изображение человека. Для этого потребуется выделить его с помощью инструмента «перо» и проделать действия, описанные выше. После этого, выделенную область следует вставить в основное фото.

Если размер человека резко контрастирует с предметами, которые имеются на основной фотографии, следует подкорректировать его размер. Для этого вызывается рамка, позволяющая трансформировать изображение — уменьшать его и увеличивать, изменять направление. Вызвать такую рамку несложно, достаточно зажать две клавиши «Ctrl» и «T», после этого, удерживая «Shift», следует потянуть изображение по диагонали.

Проделав такие несложные манипуляции, пользователь получает два готовых слоя. Чтобы получить третий слой, необходимо продублировать (скопировать и вставить) слой с изображением человека, после чего в нём вырезать, используя уже знакомую технику, лицо. Таким образом, получается шаблон, состоящий из трёх слоёв.

Применяя технику создания шаблона с использованием трёх слоёв, как раз можно получать самые невероятные фотографии, сочетая то, что в реальной действительности никогда не сочетается.

В завершении работы, пользователь обязательно должен сохранить созданный шаблон, чтобы при необходимости использовать его в дальнейшем.

Сохраните полученный шаблон в формате PSD

Как вставляется фотография в шаблон

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

Правила вставки изображения в шаблон

Первоначально, в Adobe Photoshop следует открыть ранее сохранённый шаблон, который может быть создан на основе нескольких слоёв. Они отображаются на вкладке «Слои».

Далее, необходимо открыть фотографию, которую планируется подставлять в подготовленный шаблон. Оба изображения должны быть видны пользователю. Если открыт полноэкранный режим, важно перейти в оконный, нажав на специальную кнопочку, расположенную в правом верхнем углу.

Далее, пользователь должен воспользоваться инструментом «Перемещение», при помощи которого захватывается фотография и перетягивается на шаблон. После такого перемещения, фотография оказывается сверху, а должна быть снизу.

Всё это поправимо, только необходимо перейти на вкладку «Слои», на которой отображаться все имеющиеся слои. Слой с фотографией следует переместить вниз, для этого по нему следует кликнуть мышкой, зажать клавишу и перетянуть её вниз, чтобы она заняла вторую позицию.

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

Если из-под шаблона выглядывает часть нижнего фото, необходимо эту часть удалить. В Фотошопе обрезка относится к сложным действиям, которые нуждаются в профессиональных умениях. Однако при использовании шаблона, можно воспользоваться инструментом «Полигональное лассо» и решить проблему будет гораздо проще.

На фотографии, при помощи этого инструмента, выделяются ненужные области, которые следует обрезать, после чего в контекстном меню выбирается «Инвертировать», чтобы во время последующего удаления было оставлено только одно лицо.

Кстати, в отдельных случаях, для удаления ненужных областей можно воспользоваться даже простым «ластиком», расположенным также на панели инструментов.

Также пользователь должен посмотреть и оценить наклон лица. Если он действительно нуждается в корректировке, следует вызвать инструмент «Вращение», после чего установить правильный угол наклона, чтобы готовое изображение выглядело вполне естественно.

В завершение, когда результатом работы пользователь остаётся доволен, файл следует сохранить в формате jpg. Если же пользователь желает ещё вернуться к работе с этим изображением, его сохраняют в формате psd.

Итак, создать шаблон и вставить в него личное фото или фотографию друга, совершенно несложно. Для этого потребуется получить небольшое количество информации, последовательные инструкции. Проделав один раз такие операции в Фотошопе, пользователь уверится в том, что ничего сложного в таких действиях нет, что вставить изображение под желаемый фон можно легко — для этого потребуется лишь наличие свободного времени и хорошее настроение.

nastroyvse.ru

Как сделать шаблон в фотошопе

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

Итак приступим. Для этого урока я выбрал вот такую фотографию. Я думаю на фоне такого автомобиля хотел бы оказаться каждый.

Создадим дубликат слоя для этого нажмём комбинацию клавиш Ctrl  J

 

Выбираем инструмент Перо

 

Увеличим нашу фотографию, для этого нажмём комбинацию клавиш Ctrl +

 Аккуратно выделяем голову

Затем кликаем правой кнопкой мыши по выделенной области и выбираем Образовать выделенную область

Радиус растушевки устанавливаем равным единице

После этого нажимаем клавишу Delete

Как видим у нас исчезло лицо, но как сделать так чтобы у нас получился классический шаблон. Для этого отменяем действие по удалению лица, нажав комбинацию клавиш Ctrl   Alt    Z. Далее нажмем клавиши Ctrl   C  и затем Ctrl     V. У нас образуется новый отдельный слой с лицом. На основном слое удалим лицо, нажав клавишу Delete

Сейчас самое главное не забыть сохранить наш шаблон в формате PSD. Для этого заходим в меню Файл -> Сохранить как…, выбираем нужную нам папку и сохраняем.

Сегодня мы рассмотрели как сделать шаблон в фотошопе. Думаю вы с легкостью справитесь с этим уроком и он Вам пригодится для создания ваших шаблонов, которые Вы даже сможете размещать на каких либо сайтах и возможно зарабатывать на этом деньги. Ну а я с вами прощаюсь и в следующем уроке мы рассмотрим как можно вставить любое лицо в шаблон. Не забывайте пожалуйста писать комментарии к уроку ниже и заходите на сайт FotoshopDesign.ru

fotoshopdesign.ru

Создаем шаблон в фотошопе. | Фотошоп от Олечки

На днях получила письмо от своей читательницы, в котором она спросила есть ли  у меня на сайте урок, как создать картинку, на которой были размещены портреты девушки на определенном цветовом фоне.

Лена писала, что ей приходится подставлять фотографии разных девушек на фон часто, и просила этому научить.

Конечно, все просто, ей приходится создавать коллаж, что в переводе с французского означает приклеивать объекты (фотографии) на определенный фон.

Я, честно говоря, решила, что коллаж, который она мне прислала, она использует всегда и только меняет фотографии девушек, и не дождавшись ее ответа, бросилась «с места в карьер», и давай делать скриншоты для урока.

И только сегодня узнала, что она хотела узнать, как делается такой коллаж.

Но дело сделано, скриншоты ждут своего часа в папке, и я все-таки расскажу, как сделать шаблон в фотошопе, который ей, а, может, кому-то еще пригодится для работы, а, может,этот урок пригодится вам просто для творчества. Ведь главное, понять суть, а как использовать эти знания, будет решать каждый самостоятельно.

Ну, а урок по созданию простого коллажа я обещаю опубликовать совсем скоро.

Не получается у меня выстраивать свои записи так, чтобы изучать  фотошоп постепенно, хотя в этом уроке все инструменты фотошопа вам уже знакомы.

Итак, у меня был только присланный Леной коллаж, и нашла в интернете три фотографии известных дам, специально разного размера, чтобы объяснить некоторые нюансы работы в фотошопе.

Это будут ИСХОДНИКИ.

Коллаж Лены.

И фото трех девушек. Вот они.

Эти файлы я использовала для работы.

1. Загружаем коллаж в фотошоп. Надеюсь, что вы уже умеете это делать, если забыли, то урок здесь. И переводим фон в слой (снимаем замок).

2.Выставляем масштаб 100% в нижнем левом углу панели состояния, чтобы было удобно работать.

3. Создаем дубликат слоя, чтобы работать на нем, и, в случае чего, не испортить исходник. Для этого жмем по активному (синему слою) правой кнопкой мыши и в открывшемся окне ищем строчку СОЗДАТЬ ДУБЛИКАТ СЛОЯ, кликаем по ней левой кнопкой мыши. Можно его переименовать, я в этот раз этого не делала. Жмем ОК. Эти действия должны вам быть уже знакомы.

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

Для этого активируем инструмент ПРЯМОУГОЛЬНОЕ ВЫДЕЛЕНИЕ. Забыла пометить его на скриншоте. Он находится слева на панели инструментов и второй по счету.

Обводим им одну фотографию на пару пикселей  больше по ширине и высоте, чем она сама, и вокруг нее вы увидите прерывистые линии. Это выделение. Жмем на клавишу Delete (Удалить) и первая фотография удалена.

Чтобы не повторять функцию ВЫДЕЛЕНИЯ, становимся в окно с удаленным и по-прежнему выделенным фото, зажимаем левую кнопку мыши и, не отпуская ее, тащим ВЫДЕЛЕНИЕ на соседнюю фотографию.

Повторяя описанные действия, удаляем все фотографии.

Вот и получился шаблон, который в дальнейшем можно использовать для работы. В данном случае это фон с окнами для фотографий. Для повторного использования его можно сохранить в формате png. Напомню как: Меню — Файл — Сохранить для Web и устройств. Только в настройках выставите формат png-24.

Теперь я сразу же расскажу, как им пользоваться. Я буду продолжать работу в этом же документе. Если вы будете начинать с использования уже готового шаблона, то его нужно будет только открыть в программе фотошоп.

5. С помощью линейки, я прикинула размер вырезанного окна. У меня получилось около 196 на 240 пк. Линейки вы видите на скриншоте.

6. Будем вставлять в свободные окна фото девушек. Но для начала надо открыть ИСХОДНИКИ в программе фотошоп. Как это сделать вы уже знаете. Я буду открывать сразу три файла сразу.

6.1. Проверим размер фотографии блондинки с короткой стрижкой. Эта фотография отлично подходит для замены в исходнике коллажа, так как на фото только лицо красавицы, но размер фото очень велик. Поэтому используем уже знакомый нам метод уменьшения размера фото.

Вместо оригинального размера изменим ширину до 198 — 200 пк. Напоминаю, что ширина окна для фото 196 пк.

После уменьшения размера исходника выделяем его классическим способом. Для этого идем в Меню — Выделение — Все. Жмем на ВСЕ левой кнопкой мыши.

Далее копируем выделение. Меню — Редактирование — Скопировать.

Переходим на слой 0, чтобы скопированный слой встал выше.

Вставляем скопированное фото: Меню — Редактирование — Вставить. Вы уже видите, что в палитре слоев фото с лицом девушки встало под шаблоном, но на рабочем поле оно расположилось посередине шаблона.

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

Один и тот же объект можно перенести  во все пустые окна вышеуказанным способом ИЛИ при активном инструменте ПЕРЕМЕЩЕНИЕ зажимаем одновременно клавиши Strl+Alt и левую кнопку мыши и двигаем первое изображение в соседнюю свободную ячейку. Так можно заполнить все ячейки шаблона одинаковыми фотографиями.

6.2. Но у меня еще есть фото другой девушки, и на этой фотографии не только лицо, и она тоже большого размера, поэтому сразу же покажу, как вставить в шаблон только лицо этой девушки.

Копируем фото в шаблон тем же классическим способом, который я описала выше. Напоминаю: на вкладке с фото Меню — Выделение — Все, затем Меню — Редактирование — Скопировать. Переходим на вкладку с шаблоном: Меню — Редактирование — Вставить. Фото большое и закрыло все свободные окна.

Инструментом перемещение передвигаем лицо девушки в нужное свободное окно.

Теперь будем его уменьшать и передвигать в пределах нужного окна. Для уменьшения идем в Меню — Редактирование — Трансформирование — Масштабирование.

Возле фотографии образуется рамка, которую можно уменьшать и увеличивать при необходимости, потянув за уголок. Чтобы размеры фото оставались пропорциональными, делать это нужно с зажатой клавишей Shift. В нашем случае уменьшаем фото до нужных размеров и выставляем лицо по центру свободного пространства так, как написано в тексте скриншота.

Когда фотография уменьшится до нужных размеров, не забываем убрать лишнее, вышедшее за рамки шаблона, но не видное,  с помощью инструмента КАДРИРОВАНИЕ.

Теперь можно и лицо красавицы вырезать. Активируем инструмент ПРЯМОУГОЛЬНОЕ ВЫДЕЛЕНИЕ, обводим им лицо девушки размером на пару пикселей больше окна для вставки, выделяем область лица. Чтобы обрезать одежду и все ненужное, спрятавшееся под шаблоном, идем в Меню — Выделение — Инверсия, и жмем на клавишу Delete.

Теперь видим, что на слое 2 осталось только лицо девушки.

Создаем дубликат слоя 2. И перетаскиваем его в ячейку справа.

Выполняем перечисленные ранее действия для вставки 3-его фото, тем более, что оно маленькое и особым изменениям не подлежит.

Так что наши свободные ячейки заполнены красавицами. Мы получили документ, который моей читательнице Лене понадобится для работы. Сохраним его в формате jpg (Меню — Файл — Сохранить для Web и устройств).

7. Хочу вам показать, как заменить фон, на котором находятся наши подопечные. Отключаем видимость шаблона. В моем случае это слой 0 копия.

Добавляем новый слой в палитры слоев, кликнув по значку с отогнутым уголком внизу палитры, перетаскиваем его вниз под слои с фотографиями девушек, и заливаем его любым подходящим цветом.

А можно подложить под фото другой фон.

В моем случае буду использовать фон, который я делала для открыток предыдущей записи.

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

И наконец, для использования этого документа в будущих работах, для его редактирования сохраним его в формате PSD. Идем в Меню — Файл — Сохранить как…

Лена, такой документ я выслала тебе на почту.

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

Урок по созданию простого коллажа я опубликую совсем скоро.

Если у вас есть вопросы по этому уроку, или вы хотите чему-то научиться конкретно, то пишите на е-мейл или в комментариях.

Всегда рада быть вам полезной.

photoshop-ot-olechki.ru

СОЗДАНИЕ ШАБЛОНА В PHOTOSHOP | Страна Мастеров

ДОБРОГО ВРЕМЕНИ СУТОК!!!Попробую показать и объяснить как делаю шаблон в графическом редакторе Photoshop.У меня стоит версия Photoshop CS3.---------------------------------------------------Должна сказать, что используя Photoshop хорошо получаются фотографии в качестве портрета, где светлый фон и нет множества лишних деталей.Есть два варианта создания шаблона: ПЕРВЫЙ - используя коррекцию изображения ИЗОГЕЛИЯ и ДИФФУЗИЮ.ВТОРОЙ - используя фильтр ПОЧТОВАЯ БУМАГА

Итак. начнем с варианта №1. Коррекцию изображения ИЗОГЕЛИЯ.Открываем фотографию в программе.

Всегда когда делаем что-либо в Photoshop, для изображения создаем дубликат слоя. Для этого нажимаем Ctrl и букву J.Либо на панеле инструментом заходим в СЛОЙ--СОЗДАТЬ ДУБЛИКАТ СЛОЯ.

Работаем с новым слоем. Заходим ИЗОБРАЖЕНИЕ -- КОРРЕКЦИЯ -- ИЗОГЕЛИЯ

Автоматически фотография становится черно-белой. Справа у нас появляется окошко в котором ползунком редактируем порог яркости. У меня стоит на позиции 111 (на этом фото плохо видно).

Далее необходимо немного смягчить края. Заходим ФИЛЬТР -- СТИЛИЗАЦИЯ -- ДИФФУЗИЯ.

Режим выбираем АНИЗОТРОПНЫЙ. В дополнительном окошке видны изменения.

Далее заходим в ИЗОБРАЖЕНИЕ -- КОРРЕКЦИЯ -- УРОВНИ.

И только верхним ползунком редактируем. Крайние ползунки смещаем к центру. У меня слева 138, по центру 0,81, справа 182.

В принципе можно сказать что готово. Но вырезать все еще неудобно. Некоторые моменты образа не видно. Поэтому на слое с которым мы работали делаем непрозрачность где-то 57%. Получается что наш основной слой, который цветной стал немного виднее.Кто любит рисовать в Photoshop кисточкой запросто могут дорисовать недостающие эллементы, в данном случае это ворот рубашки, плечи, контур правого уха. Я делаю иначе.

Перед тем как сохранить наши слои необходимо объединить. Выделяем слои (верхний у нас уже выделен, прижимаем Ctrl и левой кнопкой мыши на второй слой). Теперь правой кнопкой мыши - ОБЪЕДИНИТЬ СЛОИ.

Слева на вертикальной панели выбираем инструмент ПРЯМОУГОЛЬНАЯ ОБЛАСТЬ. Выделяем наш рисунок. Правой кнопкой мыши нажимаем, выбираем СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ

Еще раз правой кнопкой мыши - ОТРАЗИТЬ ПО ГОРИЗОНТАЛИ.

Теперь справа на вертикальной панели нажимаем ПЕРЕМЕЩЕНИЕ (черная стрелочка на самом верху). ПРИМЕНИТЬ трансформирование.

Сохраняем. ФАЙЛ -- СОХРАНИТЬ КАК. Выбираем папку в которой будем сохранять. Тип файла выбираем JPEG

Качество выбираем наилучшее "12". Формат БАЗОВЫЙ

Наш рисунок сохранен. Закрываем программу, при запросе сохранить изменения выбираем НЕТ, т.к. это запрос на сохранение исходной фотографии.

Фотографию отобразили в зеркальном виде для удобства вырезания. Таким образом у нас есть и шаблон для вырезания и в то же время слабый фон основной фотографии для коррекции при вырезании. Чтоб не забыть о тех деталях которые не нарисовались программой я рисую простым карандашом.

ВТОРОЙ вариант - ПОЧТОВАЯ БУМАГА. Это более простой вариант, но не совсем точный.Выбираем ФИЛЬТР - ЭСКИЗ - ПОЧТОВАЯ БУМАГА

Справа редактируем ползунком. ЗЕРНИСТОСТЬ и РЕЛЬЕФ сводим к позиции "0" влево. ТОНОВЫЙ БАЛАНС подбираем на ваше усмотрение. У меня на позиции "19"

Далее КОРРЕКЦИЯ -- ЯРКОСТЬ И КОНТРАСТНОСТЬ

Яркость полностью отводим влево на позицию "-150", контрастность "+100". Этот шаг делаем дважды.

Отобразили. Получается так. Можно сделать непрозрачность как в первом варианте.

А это в FotoSketcher. В данном случае в этой программе слишком расплывается изображение.

ИТАК. Слева вверху - оригинал. Сверху справа - Photoshop вариант первый используя коррекцию ИЗОГЕЛИЯ.Снизу слева - Photoshop вариант второй - почтовая бумага. Снизу справа - FotoSketcher.Повторюсь еще раз, что такие портреты лучше получаются все-таки в Photoshop.

stranamasterov.ru

Как использовать шаблоны для фотошопа

Самые памятные моменты нашей жизни всегда остаются с нами. Некоторые восстанавливают картины прошлого из собственной памяти, но у большинства есть документальное подтверждение в виде фотографий.

Особенные моменты всегда ценны, но редко когда идеальны, поэтому миллионы людей устанавливают фотошоп. Каждый psd-файл этой программы делает реальное лучше:

Фотошоп – не самая простая программа. Конечно, прицепить свиные уши своему лучшему другу – это дело обязательное и не требующее особых навыков. Но сделать так, чтобы эти уши выглядели как родные – задача для более опытных пользователей.

Есть люди, которым по роду занятий приходится использовать Photoshop. Профессии бывают разные, поэтому отличаются и цели создания графических объектов. Иногда требуется лишь незначительно изменять изображения, чтобы получить требуемый эффект. Именно в таких случаях идеально подходят шаблоны для фотошопа, о которых и пойдёт речь в этой статье.

Зачем нужны шаблоны?

Шаблон – это единожды созданный для последующего многократного применения объект. При использовании Photoshop возникает множество ситуаций, когда требуются готовые решения. Рассмотрим две наиболее общие категории.

  • Шаблоны для фотомонтажа. С их помощью можно создавать действительно красивые фотографии. Шаблон помогает имитировать нужный интерьер или природные условия:

Фигура человека при этом, как правило, берется полностью.

  • Фотошаблоны. Для фотошопа нет ничего невозможного: Бред Питт может переодеться в купальник, а ваша собака стать президентом. Фотошаблоны позволяют вставить лицо в нужное место на фотографии, подобно известному развлечению на морских пляжах (просунуть голову в картонную декорацию):

Как сделать кого-то бизнесменом

Для человека, который имеет даже самые общие знания о технологиях фотошопа, вставить лицо в шаблон не составит труда. Проделаем это шаг за шагом.

Для начала, нужно купить (или скачать бесплатно) понравившийся шаблон. Этот файл имеет расширение psd и открывается точно так же, как любое изображение поддерживаемого формата («Файл»-«Открыть»). После этого шаблон для фотошопа в нашем полном распоряжении:

Бизнес – это бизнес, поэтому нужно подобрать серьезных персонажей. Открываем нужную фотографию и перетаскиваем изображение на шаблон:

Теперь необходимо подогнать картинку по размеру. Уменьшать следует пропорционально. Также максимально обрезаем все ненужное.

Переходим к окошку слоев. Чтобы лицо гармонично вписывалось в шаблоны фотошопа, его требуется поместить на задний план относительно основного слоя. В нашем случае, Слой 2 перемещаем на нужное место:

Осталась не самая привлекательная серая область вокруг лица. Её убираем «волшебной палочкой»:

При правильно подобранных пропорциях и аккуратной обрезке изображения, можно добиться идеального интегрирования лица в фотошоп-шаблоны, требуется лишь практика и время для неё.

Создавать шаблоны самостоятельно

Часто возникают ситуации, когда имеющиеся в наличии шаблоны не подходят по стилю, и в таком случае применяется метод «сделай сам». Прежде, чем начать изготавливать шаблоны для фотосессии своими руками, нужно учесть следующие моменты:

  • Шаблон не должен состоять из большого количества скомбинированных изображений. Если сочетать слишком много деталей, то фотография будет смотреться дешево;
  • Структура слоев должна быть четко продумана;
  • Лучше корректировать существующие шаблоны, чем создавать всё с нуля.

Таким образом, шаблоны для фотошоп существенно упрощают редактирование изображений, так как не требуется каждый раз заново подготавливать необходимые детали. Если нужный шаблон найти не удалось, не стоит пугаться, ведь можно легко сделать всё своими руками.

www.internet-technologies.ru

Профессиональный макет сайта в фотошоп

Создание привлекательных и функциональных веб-макетов – неотъемлемая часть жизни веб-дизайнера. В этом уроке мы будем создавать профессиональный макет сайта с нуля. В процессе урока Вы узнаете некоторые полезные трюки при создании дизайна.

Ресурсы урока:

  1. Набор иконок (wefunction.com)Альтернативный набор иконок
  2. Иконка Twitter (iconeden.com)
  3. Шрифт Bebas (dafont.com)

Архив

Шаг 1. Mockup

Прежде, чем мы начнем создавать макет сайта, нужно создать план-эскиз будущего макета, на котором будет видна его функциональность и приблизительный внешний вид.

Шаг 2. Создаем документ.

Мы будем создавать макет сайта шириной в 960 пикселов. Для этого, создайте новый документ размером 1200х1500  пикселов. Разрешение 72 пиксела.

Так, как макет сайта будет шириной в 960 пикселов, нам нужно определить эту область, добавив направляющие. Выделите весь документ (Ctrl+A).

Перейдите в меню Выделение – Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.

Установите направляющие точно по границам выделения.

Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение – Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

Залейте выделение серым цветом, а в дальнейшем используйте стили слоя, чтобы применять цвета и градиенты.

К шапке добавим градиентную заливку через стиль слоя Наложение градиента (Gradient Overlay). Создайте градиент из двух цветов.

Теперь шапка будет выглядеть так:

К шапке теперь нужно добавить подсветку. Создайте новый слой (Ctrl + Alt + Shift + N) и выберите мягкую кисть размером 600 пикселов. Выберите цвет #19535a и кистью кликните один раз в верхней центральной части шапки.

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete, чтобы удалить выделенную часть.

Слой с подсветкой сожмите по вертикали (Ctrl + T).

Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструмент Перемещение (Move Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Создайте новый слой (Shift + Ctrl + N) и нарисуйте инструментом Карандаш (Pencil Tool) точку, размером в 1 пиксел. Для рисования используйте цвет #01bfd2.

Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент (Gradient Tool) и создайте градиент, как показано ниже:

Примените новый слой с маской, которую залейте только что созданным градиентом.

Шаг 4. Создаем узор

Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование – Определить узор) (Edit > Define Pattern):

Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор  и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.

После добавления текстуры шапка выглядит так:

Сделайте плавный переход от узора к шапке: к слою с узором добавьте маску и мягкой кистью белого цвета (#ffffff) с непрозрачностью 60% пройдитесь по маске.

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

Нарисуйте кнопку навигации, используя инструмент Прямоугольная область выделения (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка до нуля.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N), выберите Кисть (Brush Tool) с диаметром 400 пикселов. Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:

Выберите черный цвет (#000000) и нарисуйте пятно:

Для смягчения краев примените фильтр Размытие по Гауссу (Gaussian Blur).

Выделите нижнюю половину тени и удалите (Delete).

Поместите слой с тенью над слайдером:

Сожмите слой с тенью за средний маркер (Ctrl + T), а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения (Rectangular Marqee Tool). Залейте кнопки черным цветом (#000000).

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).

Оставьте между тенью и заголовком пропуск в 1 пиксел.

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J).

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

Добавьте к слою с линией маску и при помощи градиента сделайте плавный переход на краях.

Шаг 13.  Добавляем контент

Пришло время добавить области под контент. Область контента будет разделена на 3 колонки с равным отступом. Между каждой колонкой будет отступ в 25 пикселов.

Добавьте направляющие по обеим сторонам колонок.

Добавьте в колонки список услуг. Украсьте текст с услугами иконками.

Нарисуйте кнопку «Read More» при помощи инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) в режиме слой-фигуры.

К слою с кнопкой примените стили слоя Наложение градиента (Gradient Overlay) и Обводка (Stroke).

Дублируйте слой с кнопкой (Ctrl + J).

В нижней части этих трех колонок нарисуйте серые прямоугольники и добавьте к ним стиль Обводка (Stroke), размером в 3 пиксела.

Добавьте изображения в эти серые области:

Создайте тень, как делали это ранее и поместите ее под области с фотографиями:

Добавьте описание проекта:

Поместите в одну из колонок иконку Twitter.

Добавьте сообщение о Twitter.

Нарисуйте кнопку More Tweets.

Примените к этой кнопке стили слоя:

Добавьте текст.

Шаг 14. Создаем футер

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

Примените к этой области стиль слоя Наложение цвета (Color Overlay).

В финале, добавьте на футер навигацию и копирайт.

Финальное изображение:

Автор урока: Niranth

photoshop-master.ru

Создаем Psd шаблон для сайта

В данном уроке Вы узнаете, как нарисовать простой и удобный шаблон для сайта.

Теперь начнем наш урок, по созданию Psd шаблона.

Создадим для начала новый документ размерами 1020×1020 px, фон выбираем белого цвета.

Выбираем основной цвет — #c5e0dc и цвет фона - #ece5ce

Затем я выбрал инструмент Градиент и в панели настроек выбрал первый тип градиентов.

Теперь залейте градиентом наше белое полотно, протащив линию от верхней грани полотна до нижней.

Вот что должно получится:

Создание навигации и поисковую форму

Выбираем инструмент “ Горизонтальный текст” (T) я воспользовался шрифтом Tahoma размером 24px и цветом # 895b41. Напишем этим шрифтом Stylish, затем для надписи Template изменю цвет на белый. Описание сайта написал шрифтом Tahoma размером 12 px.

Затем создадим поисковую форму.Воспользуемся инструментом «Прямоугольник» . Для придания более лучшего вида применим следующие стили слоя.

Инструментом “ Горизонтальный текст” (T) внутри форму напишем надпись.

Выбираем Инструмент «Прямоугольник со скругленными углами» и создадим подобную кнопку

Я применил следующие стили слоя:

Инструментом “ Горизонтальный текст” (T) напишем текст кнопки.

Вот мой результат поисковой форму.

Создание навигации

Выбираем Инструмент «Прямоугольник со скругленными углами» и создаем будущую навигацию.

Применим следующие стили слоя:

Вот что должно получится:

Выбираем Инструмент «Прямоугольник со скругленными углами» и создаем элементы панели навигации.

Применяем следующие стили:

Добавляем надписи для панели навигации.

К надписям применяем следующие стили слоя:

Создадим область для вывода новых новостей.Выбираем инструмент «Прямоугольник». Нарисуйте область, равную по ширине навигации. Созданный слой располагаем выше слоя с навигацией.

Примените следующие стили слоя:

Воспользовавшись не которыми изображениями и текстом, я заполнил область под вывод новых новостей.

Единственно чего не хватает это кнопки для прокрутки новостей. Её мы создадим с помощью знакомого инструмента «Прямоугольник со скругленными углами».

И применим к нему следующие стили слоя:

Это заключительный результат верхней части шаблона.

Создание области под текст.

При помощи инструмента “ Горизонтальный текст” (T) и некоторых картинок, Вы можете создать эту часть менее чем за 5 минут.Вот что получилось у меня:

Создание подвала сайта

Для начала выберем инструмент «Эллипс» , и воспользовавшись цветом #c5e0dc, создадим 2 формы, так же на скриншоте ниже.

Заключительный этап: добавьте текст авторского правав подвал сайта.

Вот мой окончательный результат:

psdtop.ru