ТОП-5 Статей

Поиск по Сайту

Подпишитесь на обновления

Подпишитесь на еженедельные обновления!

Статистика


Яндекс.Метрика

Разное

Советуем почитать

Апр 06

Как нарисовать баннер для сайта

размещено в: Для сайта.
Здравствуйте, дорогие друзья. Сегодня статья будет о том, как нарисовать баннер для сайта или блога. Рисовать мы будем самый простой анимированный баннер в программе Adobe Photoshop CS5. Ну что ж, давайте начнем. 1.Для начала зайдем в программу :) 2.Далее нажимаем на кнопку "Файл" и нажимаем на "Создать". После чего выбираете размер баннера и задаете имя файла. У меня размер будет 468x60 пикселей. 3.Теперь сделаем фон для нашего баннера. Для этого нажимаете вот на эту кнопку:

4.Теперь пишем текст. Для этого нажимаем вот на эту кнопку:

После чего вводим текст. Заметьте, что вверху есть панель текста: можно изменить шрифт, размер и цвет. После того как Вы написали текст сохраняете первую картинку (первую, так как баннер у нас анимированный, а значит будет несколько картинок). С сохранением не спешите. 5.Для того, чтобы сохранить картинку: нажимаете на кнопку "Файл" и после чего нажимаете на "Сохранить для Web и устройств...". Формат выбираете jpg и нажимаете на кнопку сохранить. Итак первая картинка у нас готова. У меня получилось вот так:

6.Далее создаете новый файл. Как это сделать я уже объяснял раннее. Выбираете такой же размер, как и для первой картинки. Вот, например, у меня было 468x60 пикселей и я также выбираю такой же размер. 7.Теперь точно также выбираете фон и вводите текст. Вообщем делать все то же самое, как и с первой картинкой. 8.Итак, после того, как Вы нарисовали вторую картинку, также сохраняете ее. Пока я сделал вот такую надпись:



9.Так теперь Вам нужно определиться, из скольких картинок будет состоят Ваш анимированный баннер. Лично у меня из 4-х. Если Вы хотите еще нарисовать несколько картинок, то я думаю суть Вам понятна. Выбираете фон, причем один для всех картинок, после чего вводите текст и сохраняете картинку. Причем сохраняете, как я уже говорил раннее, так. Сначала нажимаете на кнопку "Файл" и после нажимаете на "Сохранить для Web и устройств...". 10.Теепрь я Вам буду объяснять, как создавать этот самый баннер. Для начала откройте все эти картинки, которые Вы нарисовали. 11.Теперь Вы должны скопировать все картинки, которые нарисовали, в самую первую, нарисованную, картинку. Для этого нужно использовать комбинацию клавиш "ctrl + A" - выделить и "cthl + C" - скопировать. После чего вставляете выделенную картинку в самую первую картинку. Чтобы вставить картинку используете комбинацию клавиш: "ctrl + V". 12.После того, как Вы закончили вставлять все картинки в первую данным способом, нужно перейти к создании анимации. 13.Для этого нажимаете на кнопку "Окно" и на "Анимация".

14.Теперь появятся своеобразное окно кадров. Там будет пока один кадр. Нажимаете вот сюда:

После чего нажимаете на "Создать кадры из слоев". 15.Далее появятся все кадры. После чего, с помощью клавиши "Shift" копируете все изображения и выбираете время, через какое они будут показываться. Выглядит это так:

16.Все наш баннер создан! Теперь осталось сохранить его. Сохраняете также, как и картинки, только теперь вместо формата "jpg" выбираете формат "gif". Фух, ну все нарисовали :) Урок конечно получился очень длинным и Вам возможно уже надоело, но по другому никак. Я Вам старался объяснить все максимально понятно и доступно. Если у Вас возникли вопросы, задавайте их в комментариях. А у меня на этом все. Ах да, еще десерт. Смотрите на красную точку в течение 30 секунд и потом посмотрите на стену, быстро моргая.

Понравилось? Расскажите друзьям :) Всем пока! С уважением, Альберт Карамов.

Подпишитесь на еженедельный дайджест про WordPress и не только!

Похожие записи, из рубрики:

28 коммент.

  1. sergei:
    06.04.2012 в 13:30

    Альберт здравствуйте.Обязательно воспользуюсь.А чертежи по этому принципу можно делать?СЕРГЕЙ

    Оценить комментарий: Thumb up 0 Thumb down 0

  2. Chudikos:
    07.04.2012 в 14:02

    Отличная статья,спасибо,все понятно написали!

    Оценить комментарий: Thumb up 0 Thumb down 0

  3. Руслан:
    07.04.2012 в 20:46

    Ну отлично, теперь баннеры шлепать будем! *BRAVO* А картинка здоровская! Радуга – дуга! *JOKINGLY*

    Оценить комментарий: Thumb up 0 Thumb down 0

  4. sergei:
    08.04.2012 в 13:13

    Понял, спасибо буду осваивать.

    Оценить комментарий: Thumb up 0 Thumb down 0

  5. Артем:
    09.04.2012 в 13:39

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

    Оценить комментарий: Thumb up 0 Thumb down 0

    • Альберт Карамов:
      09.04.2012 в 13:56

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

      Оценить комментарий: Thumb up 0 Thumb down 0

  6. Артем:
    09.04.2012 в 16:40

    Буду очень признателен ! Потому как хочу освоить эту программу!

    Оценить комментарий: Thumb up 0 Thumb down 0

  7. Айназ:
    15.04.2012 в 20:02

    Спасидо!!! Хорошая информация. *IN LOVE*

    Оценить комментарий: Thumb up 0 Thumb down 0

  8. Лариса:
    20.05.2012 в 19:03

    У меня вопрос: что там должно быть, на стене? Я так ничего и не увидела:(

    Оценить комментарий: Thumb up 0 Thumb down 0

  9. Оксана:
    22.05.2012 в 00:35

    Спасибо! Я уже думала: а как же создать банер для сайта? )) Тут у Вас нашла ответ!

    Оценить комментарий: Thumb up 0 Thumb down 0

  10. Татьяна:
    02.09.2012 в 20:14

    Статья просто супер. Написали все от А, до Я.

    Оценить комментарий: Thumb up 0 Thumb down 0

  11. Юля:
    12.11.2012 в 13:47

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

    Оценить комментарий: Thumb up 0 Thumb down 0

  12. Наталья Самолюк:
    10.03.2013 в 12:54

    Обожаю фотошоп. Просто палочка выручалочка во всем. =)

    Оценить комментарий: Thumb up 0 Thumb down 0

  13. Татьяна:
    18.09.2012 в 19:15

    Но баннер теперь точно смогу нарисовать

    Оценить комментарий: Thumb up 0 Thumb down 0

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