Как сделать иконку на прозрачном фоне в фотошопе
Иногда нужно загрузить изображение, содержащее прозрачные элементы, сквозь которые будет проглядывать первоначальный фон. В этих случаях, было бы удобно загрузить PNG изображения, поскольку они способны сохранять прозрачность.
В этой статье мы расскажем, как сделать картинку в формате PNG в Фотошопе .
Как сделать файл PNG в Adobe Photoshop?
Первый шаг – это создание файла. Для этого откройте Adobe Photoshop и в меню « Файл » ( File ) вверху страницы выберите « Создать » ( New ).
Затем в появившемся окне « Новый документ » ( New Document ) создайте файл нужного размера, и убедитесь, что разрешение документа составляет 72 пикселя на дюйм ( поскольку файл предназначен для использования в веб ). А также, что вы выбрали значение « Прозрачный » ( Transparent ) в выпадающем списке « Содержимое фона » ( Background Contents ).
Перед тем, как сделать PNG в фотошопе, нужно уточнить, что в этом примере мы создаем изображение для загрузки в качестве фона для сайта, поэтому размер документа задан следующим образом: ширина 3000 пикселей, высота 1730 пикселей, что является рекомендуемыми размерами для загрузки HD изображений:
После того, как вы задали значения параметров, нажмите « OK », чтобы открыть новый документ.
Затем в панели « Слои » ( Layers ) убедитесь, что работаете на прозрачном слое, а не на фоновом:
После того, как вы завершили создание и готовы сохранить прозрачное изображение, в зависимости от используемой версии Photoshop , в меню « Файл » ( File ) вы можете использовать один из возможных вариантов:
Как сделать фото в пнг с помощью Adobe Photoshop версии ранее, чем CC 2015
Сейчас мы расскажем, как сделать прозрачность картинки в Фотошопе , который вышел раньше CC 2015 . В этих версиях используют метод « Сохранить для Web » ( Save for Web & Devices ), чтобы сохранить и оптимизировать PNG изображения для использования в вебе. Чтобы воспользоваться этим методом, просто зайдите в меню « Файл » ( File ), и далее – « Сохранить для Web » ( Save for Web & Devices ):
Затем в появившемся окне выберите PNG-24 из выпадающего меню возможных значений, а потом убедитесь, чтобы выбраны опции « Прозрачность » ( Transparency ) и « Преобразовать в sRGB » ( Convert to sRGB ). Это подтверждает, что изображение будет содержать прозрачный фон и его цветовой режим будет преобразован в sRGB , рекомендованное цветовое пространство для веб.
Поля « Размер изображения » ( Image Size ) автоматически заполняются значениями, которые вы задали, когда создавали файл. Но если вы хотите изменить размер файла перед сохранением, то можно сделать это сейчас.
Чтобы сохранить изображение, нажмите кнопку « Сохранить » ( Save ) внизу окна.
Как сделать пнг файл с помощью Photoshop версии CC 2015
Перед тем, как сделать прозрачность фото в Фотошопе , нужно знать, что с версии CC 2015 опция « Сохранить для Web » ( Save for Web & Devices ) в меню « Файл » ( File ) помечена как Legacy ( устаревшая ). И замещена на новую опцию « Экспорт » ( Export ), которая предлагает идентичную функциональность с более быстрым сохранением в файле меньшего размера и в лучшем качестве. Чтобы воспользоваться опцией « Экспорт », нажмите меню « Файл » ( File ), а затем - « Экспортировать как » ( Export As ).
Примечание: Adobe по-прежнему предлагает опцию « Сохранить для Web » ( Save for Web & Devices ) в Photoshop CC 2015 , и она доступна через меню Файл > Экспорт ( File > Export ) или при использовании комбинации клавиш Command+Option+Shift+S ( для Mac ) или Ctrl+Alt+Shift+S ( для ПК ):
Затем в появившемся окне выберите PNG из выпадающего меню « Формат » ( Format ) и убедитесь, что выбраны опции « Прозрачность » ( Transparency ) и « Преобразовать в sRGB » ( Convert to sRGB ).
Поля « Размер изображения » ( Image Size ) и « Размер холста » ( Canvas Size ) должны автоматически заполниться значениями, которые вы задали, когда создавали файл. Но при желании можно изменить эти параметры перед тем, как сделать эффект прозрачности в Фотошопе :
Доброго всем денечка, мои дорогие друзья! Вы знаете? Иногда так надоедают стандартные ярлыки, точнее иконки, что хочется чего-то новенького, дабы разнообразить свое пребывание за компьютером. Можно конечно поменять курсор мышки, сменить фон рабочего стола, но сегодня я хотел бы вам рассказать как сделать иконку из картинки с помощью моего любимого фотошопа.
Многие ошибочно предполагают, что достаточно поменять расширение картинки на ICO, и сразу изображение преобразуется в эту самую иконку. Ну-ну. Попробуйте сами и вам выдастся ощибка, когда вы попытаетесь заменить изображение ярлыка. В общем давайте лучше делать, чем трындеть) Погнали!
Сейчас я хочу сменить иконку для моего браузера гугл хром. Как лучше всего поступить в данной ситуации? Давайте по порядку.
- Если не знаете чтобы такого придумать, то лучше идите в Яндекс или Гугл и набирайте «Гугл хром png» (естественно без кавычек).
- Лучше всего, чтобы изображение было реально в формате PNG, и не просто PNG, а именно с прозрачным фоном. Проверить это легко: нажмите на понравившеюся картинку и посмотрите какой будет задний фон. Прозрачный фон всегда изображается бледно-серыми и белыми квадратиками.
- Ну а когда нужный файл нашелся, сохраняем его (если кто не знает, то для сохранения изображения на него нужно правой кнопкой мыши и выбрать пункт «сохранить картинку» ). После этого естественно открываем его в фотошопе.
- Теперь измените размер изображения до 256 пикселей по ширине и высоте, а лучше еще меньше (где-нибудь 64*64). Очень желательно, чтобы стороны были одинакового размера.
- После этого вы можете слегка подредактировать картинку, снабдить его каким-нибудь эффектом, трансформировать его и т.д.
- А теперь, всё, что вам остается это сохранить изображение в формате ICO . Да, в своей статье про форматы файлов изображений я не рассказывал, но он особо-то и нужен на самом деле. Только есть одна проблема. Если начнете сохранять документ, то формата ICO вы там не увидите. Что за фигня? Дело в том, что по умолчанию его тупо нет.
Что же тогда делать? Как тогда нам сделать иконку? Да элементарно. В этом нам поможет один внешний плагин (дополнение), благодаря которому нужный нам формат станет доступным для сохранения. В общем давайте, повторяйте за мной.
- Скачиваем плагин ICO. Можете скачать у меня здесь. Как загрузите его — распакуйте.
- Видите там находятся 2 файла? Воооот. Выделяйте их, копируйте и идите в директорию, где у вас установлен ваш фотошоп, например C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\Plug-Ins\File Formats . У вас программа может быть установлена на другом диске (просто я на диск F у себя поставил).
Что мы только что сделали? Мы скачали файлы плагинов (для разных разрядностей), которые дополнительно устанавливают новый формат в фотошоп. Папка File Formats как раз служит для подключения новых форматов. Надеюсь, я понятно объясняю? А то мало ли)
Ну а теперь заходите снова в фотошоп, открывайте картинку из которой хотите сделать иконку. Теперь вы сможете сохранять файл с расширением ICO. Просто как обычно сохраните картиночку и теперь выберите нужное расширение из списка.
ВАЖНО! Если у вас большое изображение, то при сохранении вы не увидите формата ico в списке допустимых. Дело в том, что эта возможность недоступна, если ваша картинка превышает размер 256*256. Если это так, то просто уменьшите размер изображения до 64*64. Думаю, что больше вам не потребуется. После замены расширение будет доступно.
Ну а теперь дело за малым, осталось лишь заменить полученную штуку на ярлыке. Для этого нажмите правой кнопкой мышки на нужном ярлыке и выберите «Свойства» . После этого выберите «Сменить значок» и теперь ищите свежесохраненную иконку там, куда вы ее положили, нажав предварительно кнопку обзор.
Ну как? Не появилось у вас желания обновить ваши ярлычки? Можете поэкспериментировать и слегка преобразить ваш рабочий стол.
Ну а вообще, если вы хотите хорошо освоить фотошоп, то я очень рекомендую вам посмотреть [urlspan]прекрасные видеоуроки[/urlspan], благодаря которым вы научитесь владеть этим замечательным фоторедактором. Все уроки построены просто великолепны. Я сам его смотрел и узнал много новенького.
Ну вот пора и честь знать. На сегодня я заканчиваю. Надеюсь, что вам моя статья понравилась и я увижу вас и в других своих постах. И конечно же я рекомендую вам подписаться на обновления блога, дабы не пропустить чего-то интересного. Успехов вам! Пока-пока.
скажи пожалуйста какой надо размер для иконки сделать, чтобы она была больше? пробовала 500х500 сайт выдаёт ошибку
Чтобы конвертировать картинку в иконку надо сохранить ее как BMP и просто поменять расширение на ICO. А вам, соплякам, требуется для этого онлайн-сервис. :)
А в целом плюс ;)
Озарение
Только что понял, зачем в жигулях делали такой тюнинг как на фото.
Всё потому что в ВАЗе должна быть роза.
Мерзкие хоббитцы
Речь Путина на немецком ТВ
Немецкое ТВ транслируют парад победы на красной площади. Показали речь Путина полностью с переводом на немецкий. Я моряк идем транзитом через Германию.
Праздник со слезами на глазах
Спасибо силовикам
Хочу выразить огромную благодарность полиции, ФСБ, службе внешней разведке, контрразведке и прочим причастным, за то, что в День Победы в нашей стране не произошло ни одного теракта. Они хорошо выполняют свою работу, хотя мы далеко не всегда видим её.
Судьба человека, отрывок
Наверное многие читали и отрывок, и полностью произведение, и фильм смотрели, но каждый раз что-то щелкает внутри.
Cпpaшивaю:
- Гдe жe твой отeц, Baня?
Шeпчeт:
- Погиб нa фpонтe.
- A мaмa?
- Мaмy бомбой yбило в поeздe, когдa мы exaли.
- A откyдa вы exaли?
- Нe знaю, нe помню…
- И никого y тeбя тyт pодныx нeтy?
- Никого.
- Гдe жe ты ночyeшь?
- A гдe пpидeтcя.
Зaкипeлa тyт во мнe гоpючaя cлeзa, и cpaзy я peшил: "Нe бывaть томy, чтобы нaм поpознь пpопaдaть! Bозьмy eго к ceбe в дeти". И cpaзy y мeня нa дyшe cтaло лeгко и кaк-то cвeтло. Нaклонилcя я к нeмy, тиxонько cпpaшивaю: "Baнюшкa, a ты знaeшь, кто я тaкой? " Он и cпpоcил, кaк выдоxнyл: "Кто?" Я eмy и говоpю тaк жe тиxо. "Я — твой отeц".
Божe мой, что тyт пpоизошло! Кинyлcя он ко мнe нa шeю, цeлyeт в щeки, в гyбы, в лоб, a caм, кaк cвиpиcтeль, тaк звонко и тонeнько кpичит, что дaжe в кaбинкe глyшно: "Пaпкa pоднeнький! Я знaл! Я знaл, что ты мeня нaйдeшь! Bce paвно нaйдeшь! Я тaк долго ждaл, когдa ты мeня нaйдeшь!" Пpижaлcя ко мнe и вecь дpожит, бyдто тpaвинкa под вeтpом. A y мeня в глaзax тyмaн, и тожe вceго дpожь бьeт, и pyки тpяcyтcя… Кaк я тогдa pyля нe yпycтил, дивy можно дaтьcя! Но в кювeт вce жe нeчaянно cъexaл, зaглyшил мотоp. Покa тyмaн в глaзax нe пpошeл, — побоялcя exaть: кaк бы нa кого нe нacкочить. Поcтоял тaк минyт пять, a cынок мой вce жмeтcя ко мнe изо вcex cилeнок, молчит, вздpaгивaeт. Обнял я eго пpaвой pyкою, потиxонькy пpижaл к ceбe, a лeвой paзвepнyл мaшинy, поexaл обpaтно, нa cвою квapтиpy. Кaкой yж тaм мнe элeвaтоp, тогдa мнe нe до элeвaтоpa было.
Бpоcил мaшинy возлe воpот, нового cвоeго cынишкy взял нa pyки, нecy в дом. A он кaк обвил мою шeю pyчонкaми, тaк и нe отоpвaлcя до caмого мecтa. Пpижaлcя cвоeй щeкой к моeй нeбpитой щeкe, кaк пpилип. Тaк я eго и внec. Xозяин и xозяйкa в aкypaт домa были. Bошeл я, моpгaю им обоими глaзaми, бодpо тaк говоpю: "Bот и нaшeл я cвоeго Baнюшкy! Пpинимaйтe нac, добpыe люди! " Они, обa мои бeздeтныe, cpaзy cообpaзили, в чeм дeло, зacyeтилиcь, зaбeгaли. A я никaк cынa от ceбя нe отоpвy. Но коe-кaк yговоpил. Помыл eмy pyки c мылом, поcaдил зa cтол. Xозяйкa щeй eмy в тapeлкy нaлилa, дa кaк глянyлa, c кaкой он жaдноcтью ecт, тaк и зaлилacь cлeзaми. Cтоит y пeчки, плaчeт ceбe в пepeдник. Baнюшкa мой yвидaл, что онa плaчeт, подбeжaл к нeй, дepгaeт ee зa подол и говоpит: "Тeтя, зaчeм жe вы плaчeтe? Пaпa нaшeл мeня возлe чaйной, тyт вceм paдовaтьcя нaдо, a вы плaчeтe". A той — подaй бог, онa eщe пyщe paзливaeтcя, пpямо-тaки paзмоклa вcя!
Поcлe обeдa повeл я eго в пapикмaxepcкyю, поcтpиг, a домa caм иcкyпaл в коpытe, зaвepнyл в чиcтyю пpоcтыню. Обнял он мeня и тaк нa pyкax моиx и ycнyл. Оcтоpожно положил eго нa кpовaть, поexaл нa элeвaтоp, cгpyзил xлeб, мaшинy отогнaл нa cтоянкy — и бeгом по мaгaзинaм. Кyпил eмy штaнишки cyконныe, pyбaшонкy, caндaлии и кapтyз из мочaлки. Конeчно, вce это окaзaлоcь и нe по pоcтy и кaчecтвом никyдa нe годноe. Зa штaнишки мeня xозяйкa дaжe paзpyгaлa. "Ты, — говоpит, — c yмa cпятил, в тaкyю жapy одeвaть дитя в cyконныe штaны!" И момeнтaльно — швeйнyю мaшинкy нa cтол, поpылacь в cyндyкe, a чepeз чac моeмy Baнюшкe yжe caтиновыe тpycики были готовы и бeлeнькaя pyбaшонкa c коpоткими pyкaвaми. Cпaть я лeг вмecтe c ним и в пepвый paз зa долгоe вpeмя ycнyл cпокойно. Однaко ночью paзa чeтыpe вcтaвaл. Пpоcнycь, a он y мeня под мышкой пpиютитcя, кaк воpобeй под зacтpexой, тиxонько поcaпывaeт, и до того мнe cтaновитcя paдоcтно нa дyшe, что и cловaми нe cкaжeшь! Ноpовишь нe воpоxнyтьcя, чтобы нe paзбyдить eго, но вce-тaки нe yтepпишь, потиxонькy вcтaнeшь, зaжжeшь cпичкy и любyeшьcя нa нeго…
Пepeд paccвeтом пpоcнyлcя, нe поймy, c чeго мнe тaк дyшно cтaло? A это cынок мой вылeз из пpоcтыни и попepeк мeня yлeгcя, pacкинyлcя и ножонкой гоpло мнe пpидaвил. И бecпокойно c ним cпaть, a вот пpивык, cкyчно мнe бeз нeго. Ночью то поглaдишь eго cонного, то волоceнки нa виxpax понюxaeшь, и cepдцe отxодит, cтaновитcя мягчe, a то вeдь оно y мeня зaкaмeнeло от гоpя…
Но бывает так, что нашел какое-то офигенное изображение, которое бы подошло к общей тематике, но она, собака такая, находится с лишними предметами и фоном. И что тогда? Забить на хорошую графику? Да ни за что. и как раз сегодня я вам с удовольствием покажу, как в фотошопе сделать прозрачный фон картинки несколькими довольно простыми способами.
Вы можете посмотреть мою статью, где я писал о том, как выделять волосы в фотошопе. Этот способ подходит для нашей цели (вы также выделяете объект и переносите его на новый документ на прозрачном бэкграунде), но я бы советовал им пользоваться именно для таких сложных выделений. Для обычного удаления ненужного фона (то есть создания прозрачного) будем использовать более простые методы.
Перед тем, как приступить к основной работе, откройте изображение и постарайтесь обрезать его до того момента, чтобы элемент в нее помещался. Так будет легче, поверьте. Тем более делается это несложно. Просто возьмите инструмент «Рамка» и уменьшите границы.
Создание нового документа
Если вы рассчитываете делать что-то с нуля, то изначально позаботьтесь о том, чтобы при создании нового документа у вас был прозрачный фон. Для этого создаем новый документ и после выставления всех параметров обязательно установите «Прозрачный фон» . А дальше работаем в штатном режиме
Волшебная палочка
Этим инструментом лучше всего убирать задний план, когда он однородный, либо же с похожей структурой. Я для примера взял фотографию обезьянки на веревке. Как видите, она на белом фоне, а нам нужен именно прозрачный. Тогда хрустим пальчиками и начинаем делать всё по шагам.
- Выберите инструмент «Волшебная палочка» и поставьте допуск 50.
- Теперь тыкните один раз левой кнопкой мышки по любому месту фона. У вас должна будет выделиться либо огромная часть фона, либо весь бэкграунд целиком. Это зависит от препятствий.
- Если у вас остался промежуток между ног и между рук, то нужно выделить и остальные пробелы. Но если мы нажмем в другое место, то сбросится наше выделение. А что тогда делать? Это элементарно. Просто остальные части нужно выделять с зажатой клавишей SHIFT.
- Теперь, когда у нас всё выделено, нам что нужно сделать? Нам необходимо инвертировать выделение. Для этого нажмите комбинацию клавиш SHIFT+CTRL+I. Теперь пунктирная линия будет окутывать только саму мартышку. Вот этого-то мы и добивались.
- Ну а дальше нажмите комбинацию клавиш CTRL+J и вы увидите, что обезьяна скопировалась на новый слой, но теперь с прозрачным задним планом. И если вы хотите, то можете удалить главный слой и работать уже с мартыхой без фона.
Если вы видите, что фон выделяется либо слишком мало, либо слишком много, то поиграйте с допуском. Чем он больше, тем больше похожих пикселей он захватит, т.е. больше если допуск стоит минимальный, то он будет выделять строго один цвет, а если его увеличить, то в диапазон включатся еще и оттенки, которые близки к этому цвету.
Только не забываем, что такие изображения надо сохранять в формате PNG, иначе прозрачность потеряется и у вас снова будет белый фон.
Если фон очень разнородный и явно видно, что даже допуск не поможет, тогда воспользуетесь другими инструментами выделения, например быстрой маской или даже лассо. Кстати я уже показывал это на конкретном примере.
Ластик
Также фон можно стереть обычным ластиком. Да-да, именно им. Только не забудьте снять замочек со слоя, а то вместо прозрачности все закрасится белым цветом.
Процесс конечно довольно муторный. Ведь надо и жесткость нормальную подобрать, и спокойно стирать, не задевая сам элемент, в данном случае леопарда. В любом случае, как вариант его нельзя исключать. Вы согласны?
Конечно есть способ и попроще, а именно инструмент «Фоновый ластик» . Единственное, лучше, чтобы фон и элемент достаточно отличались друг от друга по цвету и насыщенности. Поэтому я взял фотографию тигра, который прыгает на фоне неба. Отличный вариант.
- Выберите «Фоновый ластик» . Для этого нажмите правой кнопкой мыши на «Ластик» в панели инструментов. Нашли? Отлично. Здесь допуск можно поставить побольше, так как пиксели сильно отличаются друг от друга. В общем остановимся на числе 50.
- Теперь выберите размер стёрки. Ну в общем нажимаем правой кнопкой мыши на рабочем пространстве и там уже ставим жесткость (давайте 85 процентов) и размер (Ну тут я выбрал 200).
- А дальше просто начинаем стирать весь фон, не боясь задеть тигра. Он будет стирать только те пиксели (и похожие на них), на которые вы нажали, чтобы начать стирать. В тех местах, где небо более светлое, у вас может ничего не стереться, так как пиксели уже совершенно другого оттенка, поэтому почаще меняйте точку отсчета.
Ну и заодно про еще одну стерку не забуду. В той же самой группе инструментов выберите «Волшебный ластик» . Опять же смотрим на допуск. При такой композиции можно поставить высокий уровень допуска, даже 80-90.
Теперь нам нужно просто один раз нажать на небо. Видите, что получилось? Нам уже ничего не надо стирать. Большинство неба сбрилось благодаря одному нажатию.
Нажимайте на остатки небосвода, чтобы полностью его убрать. Тигр должен быть только на прозрачном фоне. Ну а дальше всё по схеме. Счищаете всё до прозрачности и сохраняете картинку в формате PNG.
Ну? Не красота ли? Всё. Теперь его можно использовать для каких-либо коллажей или других видов изображений. Можете даже сделать так, как будто он пытается на вас напасть))). Ну это уже как ваша фантазия вам подскажет.
Ну а если вы серьезно хотите научиться делать красивые, интересные и профессиональные коллажи, то обязательно посмотрите [urlspan]курс от Елены Виноградовой[/urlspan], профессионала в создании коллажей по этой теме. Курс действительно отличный и смотрится на одном дыхании.
Ну а на этом я с вами прощаюсь. Надеюсь, что мой сегодняшний урок вам понравился и был для вас полезен. Не забывайте подписываться на обновления блога и делиться с друзьями в социальных сетях. А вас я жду в своих других статьях. Кстати, про конкурс не забыли? Через неделю уже объявлю результаты. Так что спешим! Ну а вам я желаю успехов. Пока-пока!
Плоский дизайн - это относительно новое веяние. Но с учетом того, что на сегодняшний день iOS и Windows активно внедряют эту структуру дизайна, совсем скоро это будет не так. И большинство ( если не все ) сайтов в Сети начнут применять ее.
Почему бы не начать менять концепцию дизайна своего сайта уже сейчас? Можно начать перестройку ресурса с векторных иконок, используемых в плоском интерфейсе.
Существует много изображений, которые можно " сгладить ". Вы можете начать с логотипа, или с иконок навигации.
Мы создадим иконки навигации для вашего сайта или блога. В этой статье я буду использовать Adobe Photoshop CS6 . Поэтому приготовьтесь, мы начинаем создание элементов плоского интерфейса.
Что мы будем создавать :
Откройте Photoshop . Создайте новый файл с помощью пресета для фото (1 0 на 8 дюймов, 300 точек на дюйм, прозрачный фон, цвет RGB ).
Мы уже создали векторную иконку " Главная страница ", но я хочу добавить длинную тень. Так что продолжаем.
Разверните тень в обратном направлении. Растрируйте слой тени. С помощью « Волшебной палочки » выберите весь слой ограничивающего прямоугольника с закругленными углами и инвертируйте выделение ( можете использовать комбинацию клавиш Ctrl + Shift + I ). При активном выделении ( обозначенном мигающей линией ) выберите слой с тенью и нажмите удалить.
Наша векторная иконка предмета готова. Чтобы сохранить его, перейдите в Файл> Сохранить для Web ( комбинация клавиш Ctrl + Shift + Alt + S ). Сохраните изображение в формате PNG-24, при этом установите флажок для опции « Прозрачность ». Мы будем все сохранять в формате PNG-24 , так как он поддерживает прозрачные пиксели.
Далее мы создадим векторную иконку " Записи ":
А это векторные иконки " О себе " и " Связаться со мной ":
Я надеюсь, что после того, как вы прочтете эту статью, вы приступите к реконструкции своего сайта. Это очень сложный процесс, но изменения неизбежны, так что чем раньше вы начнете, тем лучше. К тому же, плоский дизайн является не только красивым, но еще и практичным. Таким образом вы сможете извлечь двойную выгоду.
Я хотел бы напомнить вам, что это всего лишь общее руководство. Вы можете поэкспериментировать, отталкиваясь от него.
Читайте также: