Как сделать прозрачную gif в фотошопе
как создать сайт на wordpress, настроить и оптимизировать wordpress
Данным способом можно создать баннер или украсить ваш сайт различными анимированными эффектами.
Давайте создадим пузырек, который поднимается вверх.
Шаг 1. Загружаем на компьютер картинку пузырька с прозрачным задним фоном.
Для начала нам нужно отыскать изображение пузырька. Для поиска картинок я использую Google.
Вообще для создания дизайна сайтов вебмастера используют в основном 3 формата изображения – это jpg, gif, png.
Причем форматы gif и png поддерживают свойство прозрачности, а gif еще и анимацию.
Поэтому для того, чтобы найти изображения с прозрачным фоном можете в поиске забивать, например: “пузырек png” или “пузырек gif”.
Открываем Google, вводим в строку поиска например “пузырек gif”, далее слева выбираем пункт “картинки” и выбираем понравившуюся нам, далее сохраняем ее на свой компьютер.
Шаг 2. Работа в онлайн графическом редакторе.
Сейчас в интернете есть множество онлайн графических редакторов типа Photoshop, будем использовать один из них, так как просто не охото устанавливать на свой компьютер пиратскую программу (официальный Photoshop платный), да еще и кряки, которые могут заразить компьютер различного рода вирусами.
Я буду пользоваться следующим онлайн ресурсом:
Я открыл свой найденный на Google пузырек и сразу же видно, что фон за ним прозрачные (фон в виде шахматной доски).
Теперь нам нужно подогнать изображение под тот размер, который нам необходим, например я определился, что пузырек у меня будут располагаться в подвале и в ширину он будут занимать 200 px, а в высоту 210 px.
А скаченное изображение у нас имеет размер 43 на 44 px.
Для увеличения выбираем в онлайн графическом редакторе в верхнем меню пункт “Изображение”, далее подпункт “Размер изображения”, в открывшемся окошке снимаем галочку напротив значения “Сохранить пропорции” и изменяем размер, например 200 на 210 px, жмем “ок”.
Теперь уменьшим сам пузырек, для этого нажимаем комбинацию клавиш ctrl+t (одновременное нажатие клавиш ctrl и t или же можете выбрать в меню онлайн редактора пункт “Редактировать” и подпункт “Free transform”) и уменьшаем сам шарик, при уменьшении можете зажать клавишу shift, тогда шарик сохранит свои пропорции.
Теперь для создания эффекта анимации нам нужно создать кадры, которые будут показывать движение данного пузырька.
Сохранять изображения будем в формате png (так как он поддерживает прозрачность фона, можно было бы и в gif, но данный графический редактор его не поддерживает).
Для начала нам нужно выбрать инструмент перемещение, слева в окошке “Инструменты” он выглядит как черная стрелочка.
Теперь можете передвигать пузырек.
Вот какие кадры получились у меня.
Шаг 3. Создаем эффект анимации.
Для этого воспользуемся другим онлайн ресурсом, а именно:
Здесь загружаем наши сохранные изображения (кадры нашей будущей анимации), для этого нажимаем кнопку обзор и выбираем по порядку изображения, как видите есть только три строчки для добавления файлов, но чтобы добавить четвертую и т.д., вам необходимо нажать на ссылку “Добавить еще одну картинку”.
Далее можно настроить размер будущей анимации, здесь выберите пункт “Дополнительно” и укажите свой размер, я указал нужный мне: 200 px.
Следующее, что можно настроить – это скорость анимации (быстрее или медленнее будут сменяться кадры вашей анимации), я оставил “Нормально”.
Осталось нажать на кнопку “Создать анимацию” и здесь вы можете увидеть как это будет выглядеть.
Теперь сохраняем анимацию на свой компьютер, для этого нажимаем на ссылку “Сохранить эту картинку на ваш компьютер”.
Все готово, осталось вставить данную анимацию в нужном месте на своем сайте.
Я вставлял пузырек себе в футер (подвал), получилось достаточно интересно.
Для этого заходите в панель управления вашим сайтом, в левом меню выбираете пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов находите footer.php и вставляете в нем картинку с gif анимацией, ну например так:
Похожие записи:
Создаем анимацию с прозрачным фоном : 3 комментария
Благодарю! Мне надо было как раз на картинке с прозрачным фоном поменять надпись, помог ресурс, указанный Вами. Обычно, когда пост стал для меня полезным, жму рекламку в знак благодарности, у Вас не нашел, извините.
Спасибо за очень подробное описание. Обязательно воспользуюсь.
Замечательный материал. Попробовала сделать, получилось классно. Спасибо большое
Прозрачный GIF (Graphics Interchange Format) в Adobe Photoshop делается следующим образом. Открываем файл, который нужно сделать прозрачным. Заходим в меню File > Save for Web & Devices (Alt+Ctrl+Shift+S). В открывшемся окне в поле Optimized file format выбираем GIF и отмечаем флажок Transparency.
Затем нам нужно определить, какие цвета будут прозрачными. Все цвета, присутствующие в изображении, содержатся во вкладке Color Table (Таблица цветов) и отображаются в виде цветных квадратиков. Выбираем в панели инструментов в левой части окна инструмент Eyedropper (пипетка).
Определить цвета можно двумя способами. Проще всего указать цвет пипеткой непосредственно на изображении — после этого цвет выделится на таблице цветов темной обводкой. Ну, а если вы точно знаете, какой цвет должен быть прозрачным, можно выделить его прямо на таблице цветов, нажав соответствующий цветной квадратик. И в первом и втором случае при необходимости выбора нескольких цветов нужно работать с нажатой клавишей Shift (или Ctrl). Цвет выбран, нужно дать указание программе сделать его прозрачным. Для этого нужно нажать иконку Maps selected colors to Transparent (Добавить выбранные цвета к прозрачности). На верхнем рисунке эта кнопка обведена кружком, и красный цвет выбран прозрачным. На изображении появится прозрачная область, а квадратик на таблице цветов изменит свой вид — часть его станет белым треугольником. Повторное нажатие на иконке Maps selected colors to Transparent отменит прозрачность выбранного цвета.
Несколько слов о способе задания прозрачности. За него отвечает выпадающее меню Specify Transparency Dither Algorithm, по-русски — Алгоритм имитации прозрачности (рис. внизу). Можно сделать четыре выбора: No Transparency Dither — нет алгоритма, Diffusion Transparency Dither — диффузный алгоритм, Pattern Transparency Dither — алгоритм на основе узора и Noise Transparency Dither — алгоритм на основе шума. В режиме диффузного алгоритма становится активным ползунок Amount (Величина), позволяющий менять значение диффузии. Что применять на практике? В зависимости от цели и изображения. Я же всегда оставляю по умолчанию — No Transparency Dither.
Нажимаем Save — прозрачный GIF готов. Работа производилась в Adobe Photoshop версии CS3, но все действия и клавиатурные сокращения актуальны как для более ранних версий (вплоть до v.7), так и для более поздей версии CS4.
Если изображение имело четкие границы, то дальнейшей обработки не требуется. В случае использования теней либо если границы прозрачности не совсем четкие иногда приходится повозиться, заново открыв созданный прозрачный GIF в Photoshop и стирая резинкой по одному пикселю границы изображения. В случае, если прозрачный GIF сделан кем-то другим, а вам нужно использовать его и при этом цвет фона изображения существенно отличается от цвета фона web-страницы, то такая обработка краев просто необходима. Придется инструментом Pencil выравнивать по краям цвета, подбирая близкие к фону страницы. При этом необходимо перед обработкой перевести изображение в RGB, а по окончании ее — обратно в индексированные цвета. На рисунках показано, как это делается. Первый рисунок — прозрачный GIF, приготовленный для красного фона (на белом фоне видна грубая красная граница), второй — увеличенная граница, полностью убрав которую получим «зубцы». На третьем рисунке края уже обработаны, на четвертом — примерная схема обработки краев. Чтобы избежать подобных проблем, следует придерживаться правила: если предстоит сделать прозрачный GIF, необходимо заранее сделать цвет фона файла таким же (либо приближенным) как фон в web-странице.
GIF или формат обмена графикой — это короткое анимированное изображение без звука. Это серия изображений, объединенных в один файл, который будет повторяться непрерывно или в течение определенного периода времени. Однако не каждый файл GIF будет создан с прозрачным фоном. Многие пользователи захотят иметь прозрачный фоновый GIF-файл, который они могут объединить с другими GIF-файлами. Когда дело доходит до удаления фона из файла GIF, это не так просто, как кажется. В этой статье мы предоставим вам методы, с помощью которых вы легко сможете удалить фон любого файла GIF.
Метод 1. Использование сайта редактирования изображений в Интернете
Есть много интернет-сайтов, которые предоставляют инструменты для редактирования файлов GIF. Каждый сайт индивидуален и использует разные эффекты для редактирования. Некоторые заменяют цвет фона на прозрачность, а другие просто удаляют выделенную область. В зависимости от вашего GIF вы можете попробовать сайт, который помогает лучше редактировать. В этом методе мы используем сайт онлайн-редактирования изображений в качестве примера, чтобы продемонстрировать идею редактирования GIF-файлов в Интернете. Вы всегда можете проверить разные сайты с помощью разных инструментов для удаления фона.
Метод 2: Использование Adobe Photoshop
Photoshop — одна из самых известных программ для редактирования изображений, известная во всем мире. Как мы знаем, GIF-файлы — это серия объединенных изображений, поэтому мы можем разделить их в Photoshop, чтобы редактировать каждый кадр отдельно. Если у вас нет Photoshop, вы можете использовать программу GIMP, которая работает очень похоже на Photoshop. Выполните следующие шаги, чтобы сделать прозрачный фон для GIF:
Примечание: если кадры на временной шкале отображаются правильно после выполнения всех операций редактирования в слоях, пропустите шаги 5 и 6.
- Откройте приложение Photoshop, дважды щелкнув ярлык или выполнив поиск с помощью функции поиска Windows.
- Теперь нажмите на меню «Файл» в строке меню и выберите опцию «Открыть». Перейдите к файлу GIF и откройте его.Открытие файла в фотошопе
- Вы можете видеть, что каждый кадр открывается как слой на панели слоев. Выберите инструмент Magic Wand (или нажмите W), а затем выберите фон для каждого слоя. При нажатии кнопки Backspace или Delete будет удалена выбранная область.
Примечание. Вы также можете щелкнуть меню Windows в строке меню и выбрать опцию «Временная шкала». Это откроет временную шкалу, через которую вы можете воспроизводить и просматривать свой файл GIF.Удаление фона для каждого слоя - Это займет некоторое время, если у GIF сложный фон. После этого вы можете проверить рамки временной шкалы, чтобы увидеть, не совпадают ли они и не совпадают.
Примечание: иногда редактирование может испортить временную шкалу, и во всех кадрах будет отображаться одно и то же изображение. Это также сохранит GIF как одно изображение. - Если кадры совпадают, выберите первый кадр, удерживайте клавишу Shift, а затем выберите последний кадр. Это выберет все кадры. Теперь щелкните значок меню в правом верхнем углу панели «Таймлайн» и выберите параметр «Удалить кадры». Это удалит все неправильные кадры.Удаление испорченных кадров
- Теперь снова щелкните значок меню на панели «Таймлайн» и выберите «Создать кадры из слоев». Это позволит правильно создать все рамки по слоям.Изготовление рамок из слоев
- Теперь щелкните меню «Файл» в строке меню и выберите «Экспорт»> «Сохранить для Интернета». Затем выберите «Форматировать как GIF», выберите качество GIF-изображения в раскрывающемся меню «Предустановки» и нажмите кнопку «Сохранить».Сохранение отредактированного GIF
- Назовите файл и выберите расположение для файла. На этом завершится процесс удаления фона из файла GIF.
В настоящее время GIF довольно распространены на многих сайтах и в социальных сетях. Пользователи могут создавать файлы GIF, выбирая для них множество различных настроек и эффектов. Однако некоторые пользователи захотят редактировать существующий GIF, который они загружают из Интернета. Редактирование файла GIF не так просто, как редактирование одного слоя изображения, оно требует программы, которая может открывать каждый кадр файла GIF для редактирования. В этой статье мы покажем вам методы, с помощью которых вы можете легко редактировать существующие файлы GIF.
Редактирование существующего GIF на сайте
Онлайн-сайт — это всегда лучшее и быстрое решение для редактирования файлов GIF. Он не требует установки программного обеспечения, благодаря чему экономит время и место для хранения для пользователя. В настоящее время большинство онлайн-сайтов предоставляют множество функций для редактирования GIF-файлов. Пользователь просто должен загрузить свой GIF на сайт, и он сможет его редактировать. Как только редактирование завершено, оно предоставляет возможность сохранения для загрузки GIF обратно в систему. Есть много разных сайтов, которые предоставляют разное качество и функции, мы собираемся использовать сайт EZGIF. Выполните следующие шаги, чтобы попробовать это:
Редактирование существующего GIF в Photoshop
Одной из самых известных программ для редактирования файлов GIF является Adobe Photoshop. Когда дело доходит до редактирования фотографий и GIF-файлов, Photoshop — лучший выбор для большинства пользователей. Photoshop предоставляет функцию временной шкалы, где пользователь может легко редактировать каждый кадр GIF и просматривать его для проверки. Это немного сложно для новичков, но, следуя нашим шагам, вы можете легко получить представление о том, как вы можете редактировать файлы GIF в фотошопе.
- Откройте файл GIF в вашей программе Photoshop, перетаскивая или используя открытую функцию.
- Вы найдете каждый кадр в виде слоя на панели слоев справа. Щелкните меню «Окно» в строке меню и выберите параметр «Временная шкала».Открытие окна шкалы времени
- Это принесет временную шкалу внизу, через которую вы можете редактировать временные интервалы между каждым кадром, а также воспроизводить GIF для проверки изменений.
Примечание: Вы также можете выбрать опцию Другое, где вы можете определить пользовательское значение для задержки кадра.Установка времени между каждым кадром - Вы также можете изменить количество раз, когда GIF должен проигрываться. Для большинства GIF-файлов будет установлено значение «навсегда», однако вы можете изменить его на количество раз, которое вы хотите воспроизвести.Настройки цикла для GIF
- Вы также можете добавить текст в свой GIF, нажав инструмент «Текст». Добавьте текст о том, что вы хотите, и он появится в новом слое.Добавление текста в GIF
- Теперь вы можете переместить этот текст в любую позицию между слоями. Если вы поместите текстовый слой вверху, он будет отображаться во всех кадрах GIF.
Примечание. Вы также можете объединить текст только с определенным слоем на панели слоев.Перемещение текстового слоя наверх для применения на всех слоях - Наконец, как только вы закончите редактирование вашего GIF. Вы можете нажать в меню «Файл», выбрать «Экспорт» и выбрать «Сохранить в Интернете».Экспорт GIF-файла
- Вы можете изменить качество GIF в выпадающем меню Preset. Нажмите на кнопку Сохранить и введите имя, чтобы сохранить файл GIF.Сохранение файла GIF с другим качеством
Редактирование существующего GIF в GIMP
GIMP — еще одна программа для редактирования фотографий, похожая на фотошоп. Тем не менее, GIMP — это бесплатная программа с открытым исходным кодом, которую вы можете легко загрузить с официального сайта. Он также покажет кадры GIF в виде слоев. Сложность редактирования GIF зависит от количества кадров в GIF. В фотошопе вы можете поместить текстовый (отредактированный) слой поверх слоев, чтобы применить его ко всем другим слоям, однако в GIMP этот слой нужно поместить между каждым слоем. В любом случае, редактирование GIF все еще возможно в GIMP, выполните следующие действия, чтобы попробовать его:
Решил написать этот урок у себя в блоге и продублировать тут в связи с частыми просьбами друзей нарисовать юзербар на форум. Надеюсь урок окажется полезным хабросообществу.
В этом уроке мы рассмотрим приемы создания анимациии в фотошопе на примере юзербара.
Итак, приступим!
Сразу скажу, что урок ориентирован на новичков. Гуру фотошопа могут постоять, покурить и посмотреть мельком (а вдруг пропустили чего интересного =))
Часть 1. Создание юзербара
Для начала необходимо создать заготовку для создания анимации.
Шаг 1. Создание документа
Создаем новый документ. Я взял размеры 350х20.
Шаг 2. Градиент.
Берем Gradient Tool (G) и заливаем градиентом наш будущий юзербар.
Результат:
Шаг 3. Текстура
Далее я решил добавить нашему юзербару текстуру.
Рисуем текстуру карбона
Для этого нарисуем текстуру карбона которую мы сможем использовать в дальнейшем.
Создаем новый документ размером 8х8 пикселей и закрашиваем его следующим образом. Можно брать произвольные оттенки серого. Главное здесь — порядок.
Далее идем в Bleding Options слоя с юзербаром.
Результат:
Шаг 4. Текст.
Осталось добавить текст. Для этого нам понадобится шрифт Visitor.
Берем Visitor TT1 BRK устанавливаем размер в 10 пунктов. Я написал “Adobe Photoshop CS4 User”.
Шаг 5. Рамка.
Добавим рамку. Для этого выделим весь юзербар с помощью Rectangular Marquee Tool. Заходим в Edit -> Stroke и ставим там:
Результат:
Часть 2. Анимация юзербара в фотошопе
Шаг 1. Добавление иконки к анимации.
Теперь добавим иконку и перейдем к анимации.
Я добавил классическую иконку четвертого фотошопа и провел масштабирование.
Шаг 2. Разбираемся с палитрой анимации.
Заставим ее двигаться.
Для это настроим сначала наше рабочее место выбрав Window > Workspace > Video или просто включив палитру Animation.
Перейдем в режим покадровой анимации.
Разберемся с палитрой анимации.
Шаг 3. Анимируем юзербар.
Что дальше? Теперь я выделяю слой с иконкой и двигаю ее немного вверх, после этого создаю новый кадр (смотри шаг 2). И повторяю пока не прокрутится вся иконка. Это основной принцип создания анимации в фотошопе.
При ошибках вы можете удалить не понравившийся кадр кнопкой удаления (корзина).
Также выставим нужную задержку. Я поставил 0,1 секунду на все кадры кроме последнего. У него стоит задержка 2 секунды.
Шаг 4. Сохранение в Gif – анимацию.
Когда анимация готова мы должны сохранить ее. Выбираем File > Save for Web & Devices… (Alt+Shift+Ctrl+S). Выбираем формат файла GIF.
Заключение
Итак, мы создали стильный юзербар. Затем на основе него мы создали gif – анимацию. И все это средствами великого и могучего фотошопа. Не правда ли круто?
Читайте также: