twitter
rss
facebook
Главная » Уроки фотошопа » Уроки фотошопа по открыткам » Урок фотошопа. Открытка своими руками

Урок фотошопа. Открытка своими руками

Февраль 09, 2013 | Автор Ольга | 12 комментариев

Урок фотошопа. Открытка своими руками.

В этом уроке фотошопа будем создавать поздравление с днем Валентина. Чтобы получилась красивая открытка, создадим картинку с анимацией, добавим красивое поздравление и открытка своими руками будет готова! На основе этого урока фотошопа вы сможете в дальнейшем делать любые поздравительные открытки своими руками, для ваших дорогих и  любимых людей! 1. Первым делом надо создать фон для нашей открытки. Можно сделать такой фон самостоятельно из подходящего клипарта или поискать готовый фон в интернете. Допустим, вы торопитесь, и делать фон вам некогда, тогда ищем в поисковике фон для поздравительных открыток.  Вы можете подобрать готовый фон у меня на сайте: "На день святого Валентина. Фон для открыток". Подходящий клипарт можно подобрать здесь: "День святого Валентина. Картинки для фотошопа".


За основу урока выбрана фотография из Бесплатного фотобанка.

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

2. Добавим слою пространства. Идем в Изображение - Размер холста и увеличиваем  наш слой вправо до 1600 пикселей.

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

4. Идем в Редактирование - Выполнить заливку с учетом содержимого. Выделение - Отменить выделение.

5. Теперь добавим на фон подходящую к празднику картинку. Обычно на день Святого Валентина дарят сердечки и мишек или кошечек. Мы тоже посадим на картинку красивых котят. Откройте картинку в фотошопе и перенесите ее на основной фон. Подходящие картинки вы можете выбрать в моем клипарте "День святого Валентина. Картинки для фотошопа". Я выбрала вот таких симпатичных котят.

6. Откроем новый слой для текста. Нажимаем под панелью слоев на маленький квадратик и у нас появляется слой поверх остальных слоев. 

7. Берем инструмент Текст и пишем поздравление черным цветом.

8. Для того, чтобы текст смотрелся красивее и объемнее воспользуйтесь стилями. Как поставить стили в фотошоп вы можете узнать из моего урока: "Стили для фотошопа". Разнообразные стили вы сможете скачать на сайте под рубрикой "Стили". Далее добавляем еще один слой для нашего поздравления в стихах. Действуйте по пункту №6. Копируйте текст заранее сохраненного на компьютере стихотворения и вставляйте его на новый слой в фотошопе. Примените стили или подберите более читаемый текст - это на ваше усмотрение. Подпишите картинку или поставьте свой логотип. После этого объедините все слои. Можете сделать обводку или оставить без окантовки. Вот теперь можно приступать к анимации нашей открытки.

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

10. Открываем анимированный фон в фотошопе. После открытия зайдите во Вкладку Окно и нажмите там: Анимация. Вы увидите, что фон состоит из 47 слоев и такого же количества кадров.

11. Встаем на 1 слой, зажимаем клавишу Shift, прокручиваем слои до последнего 47 слоя и кликаем по нему. Все наши слои выделятся синим цветом. После этого нажимаем на маленький треугольничек справа от слоев и в выпавшем окне выбираем: Создать группу из слоев. Так будет проще работать с таким большим количеством слоев.

12. В верхней части рабочего стола фотошопа есть значок: "Упорядочить документы. Нажимаем возле него на галочку и в выпавшем списке выбираем кнопку - 2 вверх. Рабочий стол разделится на два окна - с основным фоном и с анимированным фоном. В панели слоев встаем на слой с группой, зажимаем левую кнопку мыши и просто перетаскиваем группу на основной слой. 

13. Затем снова нажимаем на этот же значок и выбираем: квадратик - Объединить все. Рабочий стол приобретет прежний вид с одним окном.

14. Идем в Редактирование - Свободное трансформирование и, зажав клавишу Shift, растягиваем анимированный фон на всю картинку. Размер немного не совпадает, но в данном случае это не играет роли. Пусть фон вверху выйдет за край картинки. Теперь в панели слоев находим окошко Режим слоев и меняем режим наложения на Экран. Черный фон с картинки исчезнет.

15. Если у вас не отрыто окно анимации - откройте. Там сейчас мы видим 1 кадр. С правой стороны панели кадров нажимаем на треугольничек и в выпавшем окне выбираем: Создать кадры из слоев.

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

17. Выделим все кадры с помощью той же кнопки Shift, т.е. нажмите на 1 кадр и прокрутив до последнего, зажмите клавишу Shift и кликните по нему. Все кадры выделятся синим цветом. Теперь можно проставить задержку времени в анимации - 0,03 - такую же, как была на черной анимации. Размер нашей картинки большой, кадров много, поэтому анимация получится тяжелая и будет долго грузиться, поэтому уменьшим размер картинки например до 480 пикселей по ширине. Для этого идем в Изображение - Размер изображения и ставим в окне ширины 480, высота изменится сама. Вот и все! Теперь включаем нашу анимацию и любуемся. Идем в Файл - Сохранить для Web и устройств. Надеюсь, что урок фотошопа вам понравился и вы будете пользоваться им для создания своих красивых анимированных открыток.

Скачать урок фотошопа Открытка своими руками можно бесплатно, с Яндекс Диска.




Понравилась статья? Поделись с друзьями!







12 коммент. к Урок фотошопа. Открытка своими руками

  1. Margo Февраль 10, 2013 в 4:56 дп

    Очень красивая открыточка получилась! Спасибо, Оля!

    [Ответить]

    Ольга отвечает:

    Я своих-то наделала открыток и вот решила других научить, как легко можно такие же делать.

    [Ответить]

  2. Татьяна Февраль 10, 2013 в 11:05 дп

    Здравствуйте Оля, у меня не получается п.4 : заливается пространство не ровным цветом, а с элементами от цветка….

    [Ответить]

    Ольга отвечает:

    Таня, привет! Этот прием работает, когда много однородного фона и нужно добавить такой же. Ты, я так понимаю, взяла свой какой-то фон, да? Есть еще одна возможность — растянуть фон, т.е., выделить прямоугольным выделением кусок однородного фона с того края, где его нужно увеличить под текст и, не снимая выделения, пойти в Редактирование — Свободное трансформирование и когда появятся маркеры по сторонам выделения, взять и потянуть за маркер посредине стороны. Фон закроет прозрачное место, но это будет смотреться нормально, если этот фон без рисунка, просто один-два цвета. Попробуй и напиши, что получится и еще можешь прислать мне свою картинку на почту-я посмотрю, что можно сделать с ней. Как я уже сказала, не ко всем картинкам подходит этот прием.

    [Ответить]

    Ольга отвечает:

    Посмотрела, стыков не видно, все красиво получилось, молодец! Рамочку только может чуть потоньше надо было сделать, было бы нежнее.

    [Ответить]

    Татьяна отвечает:

    Спасибо за оценку, мне приятна твоя похвала

    [Ответить]

    Ольга отвечает:

    Таня, я и поругать могу, если будет за что, но если правда хорошо, то так и говорю. Удачи тебе!

    [Ответить]

  3. Алёна Февраль 10, 2013 в 7:55 пп

    Спасибо за урок!!!А я отказывалась от анимированного фона только потому, что он был на чёрном фоне… ОКАЗАЛОСЬ так всё просто!!ДА и еще кучу подсказочек увидела!!!Обязательно урок опробую от начала до конца!!!

    [Ответить]

    Ольга отвечает:

    Да, Аленка, надо было всего лишь поменять режим наложения, но мы многого еще не знаем и каждый раз открываешь для себя какие-то приемы. Удачи в уроке. покажешь, что получится? Жду на почту картинку.

    [Ответить]

  4. Ольга Апрель 4, 2013 в 4:22 дп

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

    [Ответить]

  5. tOrange Август 2, 2015 в 8:53 дп

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

    [Ответить]

    Ольга отвечает:

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

    [Ответить]

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

:bye:  :good:  :negative:  :scratch:  :wacko:  :yahoo:  B-)  :heart:  :rose:  :-)  :whistle:  :yes:  :cry:  :mail:  :-(  :unsure:  ;-)