ForumDesign TechSupport - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Фонд форумаРеклама на сайте
Стать модераторомОтзывыДонат

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Графика и дизайн » Делаем шапку - Урок 1. "Вырезание картинок на общий фон"


Делаем шапку - Урок 1. "Вырезание картинок на общий фон"

Сообщений 1 страница 10 из 34

1

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ на эту страницу!!

3. Укажите цветовую гамму, которая будет вам предпочтительна для создания шапки-
ну не знаю наверн голубенький иль беленький
4. Дайте картинки для шапки-
Фон - http://s56.radikal.ru/i152/0912/fa/173bf647594b.jpg
можно так зделать???? обрезать скара с симбой а ёлку поставить посередине и может обрезать немного снизу. http://s61.radikal.ru/i174/0912/d1/8498d1e57450.jpg
http://i054.radikal.ru/0912/c2/249af575d12e.jpg
http://s59.radikal.ru/i165/0912/14/3a4b01f6aafa.jpg
http://s56.radikal.ru/i153/0912/d8/d68642937d46.jpg
моно тут обрезать львёнка с кроликом????
http://s40.radikal.ru/i088/0912/9b/8df547bbeb19.jpg
моно всех львят обрезать??? и поместить на фоне?????
5. Какую надпись сделать на шапке и как вы бы ее представляли-
Фантазия Львят: 4 Времени Года

Шаг 1. Создание рабочей области для шапки.

Из заказа очевидно, что шапка должна быть зимней, поэтому я подобрала вот такой фон:
http://ForumD.ru/uploads/0007/e3/f7/16997-1.jpg
Почему фон не такой, как указан в заказе? потому что фоновая картинка не должна быть маленькой, она должна занимать всю рабочую область.
Или это должно быть специальное фоновое изображение, которое можно продублировать на всю рабочую область.

Итак создаем новый документ с прозрачным фоном.
Размер я выбрала 1000х250 пикселей.

http://ForumD.ru/uploads/0007/e3/f7/17010-1-f.jpg

http://ForumD.ru/uploads/0007/e3/f7/17010-2-f.jpg

потом выделяем весь документ при помощи указанного курсором инструмента:

http://ForumD.ru/uploads/0007/e3/f7/17010-3.jpg

открываем фон, который мы заготовили и перетаскиваем выделенную нами область на этот рисунок:

http://ForumD.ru/uploads/0007/e3/f7/17010-4.jpg

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

http://ForumD.ru/uploads/0007/e3/f7/17010-5.jpg

затем, возвращаемся к шапке и вставляем скопированное:

http://ForumD.ru/uploads/0007/e3/f7/17011-1.jpg

Вот и готова рабочая область для будущей шапки:

http://ForumD.ru/uploads/0007/e3/f7/17011-2.jpg

Шаг 2. Вырезание персонажей для шапки.

Вырезание персонажей с картинки осуществляется благодаря инструменту "волшебная палочка".
http://ForumD.ru/uploads/0007/e3/f7/17025-1.jpg
Тут вы можете контролировать, насколько сильно она будет захватывать окружающее пространство.

http://ForumD.ru/uploads/0007/e3/f7/17025-2-f.jpg
Советую поставить значение 30 и от него отталкиваться: если будет сильно наезжать на рисунок, сделайте меньше, и, наоборот, больше, если не вся область вокруг захвачена.

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

Итак, начнем с самой простой картинки. Кликаем волшебной палочкой по белому фону:
http://ForumD.ru/uploads/0007/e3/f7/17025-3-f.jpg

как видно, волшебная палочка выделила только белое, но надписи нам тоже не нужны. Их можно убрать с помощью инструмента "лассо".

http://www.photoshopessentials.com/images/basics/selections/polygonal-lasso-tool/photoshop-lasso-tool.gif

Жмем клавишу SHIFT и не отпуская ее обводим надписи:

http://ForumD.ru/uploads/0007/e3/f7/17025-4-f.jpg

вот, что получится:

http://ForumD.ru/uploads/0007/e3/f7/17025-5-f.jpg

теперь нажимаем delete.

первую картинку мы отделили от фона:

http://ForumD.ru/uploads/0007/e3/f7/17026-1-f.jpg

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

Шаг 3. Располагаем персонажей на шапке.

для этого выбираем инструмент, указанный на рисунке, зажимаем мышкой и перетаскиваем в рабочую область нашей шапки (этим же инструментом можно двигать слои по рабочей области):

http://ForumD.ru/uploads/0007/e3/f7/17495-1.jpg

Вот, что получилось:

http://ForumD.ru/uploads/0007/e3/f7/17495-2.jpg

Меня вполне устраивает размер львенка, но его расположение мне не нравится. Хочется, чтобы он был в противоположном конце шапки и смотрел в сторону центра шапки.
Для этого есть "горизонтальное отражение":

http://ForumD.ru/uploads/0007/e3/f7/17495-4-f.jpg

Заходим в редактирование > трансформирование > "отразить по горизонтали"

Применяем, а после этого двигаем рисунок на другой конец шапки.
вот, что получится:

http://ForumD.ru/uploads/0007/e3/f7/17495-5.jpg

Теперь перетаскиваем второй рисунок:

http://ForumD.ru/uploads/0007/e3/f7/17496-1.jpg

Как видно, рисунок слишком большой, его надо уменьшить.
Для этого нужно "свободное трансформирование". Нажмите Ctrl + T (английскую "Т")
Вокруг рисунка появится область, позволяющая редактировать размер и наклон слоя.

http://ForumD.ru/uploads/0007/e3/f7/17496-2-f.jpg

Наклонять картинку мне не нужно, а вот размер подкорректировать необходимо:
http://ForumD.ru/uploads/0007/e3/f7/17496-3-f.jpg

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

Далее, применяя те же инструменты, расположим остальные рисунки и получим:

http://ForumD.ru/uploads/0007/e3/f7/17496-4.jpg

Шаг 4. Делаем надпись.

надпись делается указанным инструментом и редактируется в этой панельке:

http://ForumD.ru/uploads/0007/e3/f7/17498-1-f.jpg

Если панель не появилась, когда вы выбираете инструмент, нажмите на эту кнопку:
http://ForumD.ru/uploads/0007/e3/f7/17498-2-f.jpg

Теперь расскажу о настройках надписи:

http://ForumD.ru/uploads/0007/e3/f7/17498-3-f.jpg
1 - Шрифт надписи
2 - Размер
3 - Наклон
4 - Расстояние между строк
5 - Расстояние между буквами
6 - Цвет
7 - Различные эффекты (жирный, кривой, подчеркнутый и т.п.)
8 - Самое важное: сглаживание! Оно обязательно должно быть. Не оставляйте текст без сглаживания!

Итак, я выбрала следующие настройки текста:
http://ForumD.ru/uploads/0007/e3/f7/17498-4.jpg

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

http://ForumD.ru/uploads/0007/e3/f7/17499-1-f.jpg

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

Я выбрала для надписи эффект тиснения...
http://ForumD.ru/uploads/0007/e3/f7/17499-2.jpg

... и внешнее свечение:
http://ForumD.ru/uploads/0007/e3/f7/17499-3.jpg

Вот, что получилось в финале:
http://ForumD.ru/uploads/0007/e3/f7/17499-4.jpg

Шаг 5. Делаем финальные украшения и рамочку.

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

http://ForumD.ru/uploads/0007/e3/f7/17500-1-f.jpg

Указанная кнопка создает новый слой.
На этом свое я нарисовала снежинки, вот, что получилось:
http://ForumD.ru/uploads/0007/e3/f7/17500-2.jpg

Теперь делаем самую простейшую рамочку.
Сначала нужно объединить все слои в один:
http://ForumD.ru/uploads/0007/e3/f7/17500-3-f.jpg

Затем заходим в стили слоя и настраиваем эффект "Внутреннее свечение":
http://ForumD.ru/uploads/0007/e3/f7/17500-4-f.jpg

Вот такая шапка у меня получилась:

http://ForumD.ru/uploads/0007/e3/f7/17500-5-f.jpg
http://ForumD.ru/uploads/0007/e3/f7/17500-5-f.jpg

Теги: photoshop, дизайн, шапка,css, урок

Отредактировано Герда (27.10.2012 06:32:18)

+3

2

Герда
Супер! Спасибочки!!!

0

3

Жасмин

не за что. =)
потом еще по шапкам уроки добавлю - на шапки-коллажи, например. http://i.smiles2k.net/aiwan_smiles/wink.gif

+1

4

Дабывь как делать круглые и мигающие баннерыы)

0

5

Nao

круглый баннер божно сделать по образу и подобию круглых иконок: Иконки/Кнопочки
а мигающие картинки вот так делаются: Мигающий аватар

0

6

спасибо!Герда!Вот что получилось в первый раз:кстати как делать код?

Отредактировано Велокоза (28.12.2009 08:14:15)

0

7

Велокоза
где?

0

8

Я не умею шрифты в Фотошоп загружать http://i.smiles2k.net/aiwan_smiles/cray.gif
Скажите пожалуйста, как. http://i.smiles2k.net/lol_smiles/1_009.gif

0

9

Vilka
Если ты скачивала шрифт архивом, то распаковывай его (если с этим проблемы - говори.. мало ли)
Затем идешь в Пуск --) Панель управления --) Папка с названием ШРИФТЫ. Перетягиваешь с распакованной папки шрифт в папку ШРИФТЫ. Готово.
Открываешь свой фотошоп и инструмент Текст обновлен автоматически) Пользуйся)

+1

10

Lady
Спасибо)

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»



Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Графика и дизайн » Делаем шапку - Урок 1. "Вырезание картинок на общий фон"


Рейтинг форумов | Создать форум бесплатно © 2007–2019 «QuadroSystems» LLC