[Уроки Adobe Photoshop ]

15:34
Блог сайтостроителя

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

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

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

Как сделать прозрачный фон у картинки

Возьмём в пример одну простую картинку в формате .jpg (вообще формат не важен особо):

Блог сайтостроителя

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

Блог сайтостроителя

Загружаем наше изображение. Справа в окошке "Слои" появится слой "Фоновый", на котором замочек (не дает удалять фон картинки).

Блог сайтостроителя

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

Блог сайтостроителя

Теперь берем волшебную палочку (панель инструментов, правый столбец вторая кнопка сверху), указываем следующие параметры: допуск = 21, галочки стоят на сглаживании и непрерывности (обычно такие параметры стоят по стандарту), хотя с параметрами можете поэкспериментировать; и нажимаем на фон картинки (в нашем случае, на белый фон).

Блог сайтостроителя

Теперь удаляем фон нажатием кнопочки "Delete" и получаем нужное нам изображение с прозрачным фоном.

Блог сайтостроителя

Остается только сохранить изображение. Файл - Сохранить. Сохраняем изображение обязательно в формате .png. иначе прозрачный фон пропадет.

Блог сайтостроителя

В итоге на выходе получаем то же изображение с прозрачным фоном.

Блог сайтостроителя

Как сделать прозрачный фон у картинки

Спасибо огромное. Подскажите, пожалуйста, а почему иногда выделяя предмет, он не выделяется конкретно по контуру, а забирается ещё и на внутренние фрагменты картинки!?

Видимо, предмет четко не отделен от фона. То есть в случае с РФ, здесь буквы не имеют щелей, а вот есть бы там были ПС, допустим, то фон выделялся бы вместе с внутренностями букв. При более сложной фигуре ситуация та же самая. Волшебная палочка выделяет места от точки нажатия на фон до любой границы, куда она может проникнуть, распространяясь по выделяемой части изображения.

спасибо большое Вам. Огромнейшее!!

Ну вот пришла по ссылке как заменить смайлы, теперь обязательно просмотрю все Ваши статьи, одна лучше и нужней другой. Вы бы только знали, сколько за эти года я поставила различных сайтов и вечно просила родных, умеющих пользоваться фотошопом, сделать прозрачными картинки. Ваше простое объяснение и ссылка на онлайн фотошоп-это просто золотое дно для меня Блог сайтостроителя так всё просто оказалось, проще некуда Даже не знаю как Вас за всё отблагодарить, ну можно к примеру скачать даром мой диск http://www.for-friends.biz/forum/viewtopic.php?t=626 Ещё раз огромное спасибо.

Божымой. а я вот это когда-то мс фотоэдитором маналась, а теперь и он не работает. а всякая фотошопа и корела это для чукчи реально китайский…
Автор! Спасибище Вам огроменное. (-:

Спасибо. Это то, что я искал! Мне это очень пригодится для моего сайта! Но искал нужный материал долго, часа 2…

Большое спасибо! Способ как раз для блондинок — все пошагово-доступно! А то прямо замаялась рисовать себе визитки!

СЕРЁЖА,ЧЕСТНО-Я ЧАЙНИК.ВАША ПРОГР.-ЧУДО…НО У МЕНЯ НЕ ПОЛУЧАЕТСЯ НАЙТИ КНОПКУ Delette.И У ВАС НА РИСУНКЕ НЕ ВИЖУ ЕЁ…ВОТ МУЧАЮСЬ—РЕШИЛА ВАМ НАПИСАТЬ…ПРОШУ—ОТВЕТЬТЕ—ДАВНО ХОТЕЛА ИМЕТЬ ТАКОЕ У СЕБЯ…БЛАГОДАРЮ ВАС!

Кнопка Delete находится на клавиатуре. Но если вы используете только мышь, то можете вместо кнопки воспользоваться аналогичной функцией редактора. Для нажмите в верхнем меню редактора Редактировать и в выпавшем меню нажмите Очистить.

даже выбрала кнопкой очистить-он не выделяет и не очищает….вот такая беда…Серёжа

 

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

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

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

Как сделать прозрачный фон у картинки

Возьмём в пример одну простую картинку в формате .jpg (вообще формат не важен особо):

Блог сайтостроителя

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

Блог сайтостроителя

Загружаем наше изображение. Справа в окошке "Слои" появится слой "Фоновый", на котором замочек (не дает удалять фон картинки).

Блог сайтостроителя

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

Блог сайтостроителя

Теперь берем волшебную палочку (панель инструментов, правый столбец вторая кнопка сверху), указываем следующие параметры: допуск = 21, галочки стоят на сглаживании и непрерывности (обычно такие параметры стоят по стандарту), хотя с параметрами можете поэкспериментировать; и нажимаем на фон картинки (в нашем случае, на белый фон).

Блог сайтостроителя

Теперь удаляем фон нажатием кнопочки "Delete" и получаем нужное нам изображение с прозрачным фоном.

Блог сайтостроителя

Остается только сохранить изображение. Файл - Сохранить. Сохраняем изображение обязательно в формате .png. иначе прозрачный фон пропадет.

Блог сайтостроителя

В итоге на выходе получаем то же изображение с прозрачным фоном.

Блог сайтостроителя

Как сделать прозрачный фон у картинки

Спасибо огромное. Подскажите, пожалуйста, а почему иногда выделяя предмет, он не выделяется конкретно по контуру, а забирается ещё и на внутренние фрагменты картинки!?

Видимо, предмет четко не отделен от фона. То есть в случае с РФ, здесь буквы не имеют щелей, а вот есть бы там были ПС, допустим, то фон выделялся бы вместе с внутренностями букв. При более сложной фигуре ситуация та же самая. Волшебная палочка выделяет места от точки нажатия на фон до любой границы, куда она может проникнуть, распространяясь по выделяемой части изображения.

спасибо большое Вам. Огромнейшее!!

Ну вот пришла по ссылке как заменить смайлы, теперь обязательно просмотрю все Ваши статьи, одна лучше и нужней другой. Вы бы только знали, сколько за эти года я поставила различных сайтов и вечно просила родных, умеющих пользоваться фотошопом, сделать прозрачными картинки. Ваше простое объяснение и ссылка на онлайн фотошоп-это просто золотое дно для меня Блог сайтостроителя так всё просто оказалось, проще некуда Даже не знаю как Вас за всё отблагодарить, ну можно к примеру скачать даром мой диск http://www.for-friends.biz/forum/viewtopic.php?t=626 Ещё раз огромное спасибо.

Божымой. а я вот это когда-то мс фотоэдитором маналась, а теперь и он не работает. а всякая фотошопа и корела это для чукчи реально китайский…
Автор! Спасибище Вам огроменное. (-:

Спасибо. Это то, что я искал! Мне это очень пригодится для моего сайта! Но искал нужный материал долго, часа 2…

Большое спасибо! Способ как раз для блондинок — все пошагово-доступно! А то прямо замаялась рисовать себе визитки!

СЕРЁЖА,ЧЕСТНО-Я ЧАЙНИК.ВАША ПРОГР.-ЧУДО…НО У МЕНЯ НЕ ПОЛУЧАЕТСЯ НАЙТИ КНОПКУ Delette.И У ВАС НА РИСУНКЕ НЕ ВИЖУ ЕЁ…ВОТ МУЧАЮСЬ—РЕШИЛА ВАМ НАПИСАТЬ…ПРОШУ—ОТВЕТЬТЕ—ДАВНО ХОТЕЛА ИМЕТЬ ТАКОЕ У СЕБЯ…БЛАГОДАРЮ ВАС!

Кнопка Delete находится на клавиатуре. Но если вы используете только мышь, то можете вместо кнопки воспользоваться аналогичной функцией редактора. Для нажмите в верхнем меню редактора Редактировать и в выпавшем меню нажмите Очистить.

даже выбрала кнопкой очистить-он не выделяет и не очищает….вот такая беда…Серёжа

 

Сайтостроение

сайтостроение

Интересные записи

Категория: FAQ | Просмотров: 330 | Добавил: KateloK | Теги: Delete находится клавиатуре если ис, Delete находится клавиатуре если ис, Явно одного меня такая проблема одн, блог, Delete находится клавиатуре если ис | Рейтинг: 0.0/0
Всего комментариев: 0
avatar