SdelaySite.com » Photoshop

Видеокурс Photoshop для веб-мастера

Андрей Морковин — Wed, 18 Nov 2009 22:39:55 +0000

Уважаемые читатели, этой статьей завершается базовый видеокурс Photoshop для веб-мастера, в котором я постарался познакомить вас с основными моментами работы в данной программе. Все эти знания, которые вы можете получить посредством просмотра видеоуроков, я постоянно использую в своей работе в области веб-строительсва. Надеюсь, они окажут вам пользу.

Сегодня я публикую оставшиеся части: с 6 по 12.

Уважаемый читатель!

Предлагаю вам скачать все видеоуроки курса “Photoshop для веб-мастера” в лучшем качестве одним архивом с выделенного сервера на высокой скорости.

Размер архива – 290,1 МБайт.

Услуга быстрого скачивания платная – 50 рублей. Данный платеж, скорее стимул для дальнейшего развития блога и благодарность за проделанную работу, нежели заработок. При желании вы всегда можете скачать видеоуроки бесплатно: ссылка на бесплатное скачивание с DepositFiles размещена в каждом текстовом описании к очередному видеоуроку.

Оплата принимается в WebMoney (WMR, WMZ, WMU). После совершения оплаты вы получите ссылку на скачивание архива видеокурса с выделенного сервера.

Купить возможность быстрого скачивания всего видеокурса.

В начале я размещу видео с сервиса YouTube, а ниже продублирую те же самые клипы, но с сервиса RuTube. Выбирайте более удобный для вас сервис просмотра. Видео в лучшем качестве вы можете закачать с Deposit Files (ссылки в конце поста).

Предыдущие части объединены одной меткой (Photoshop видеокурс), перейдя по которой вы без проблем сможете отыскать все части данного курса.

Часть 6. Речь пойдет о мощном и очень полезном инструменте программы Photoshop под названием Кисть. В своей работе веб-мастера я не использую всю мощь данного инструмента (в основном пользуюсь только для рисования каких-то пометок, горизонтальных и вертикальных линий), но приходилось сталкиваться с такими задачами, которые я бы не смог выполнить без знания особенностей данного инструмента. Важным является тот факт, что работа с кистью практически идентична работе с целым рядом инструментов: ластик, градиент, осветление, палец и т.д.

Часть 7. Здесь мы познакомимся с возможностями инструмента Градиент. Я покажу как настраивать данный инструмент, для создания очень красивых эффектов. Кроме того, я познакомлю вас с работой в режиме быстрой маски.

Часть 8. В восьмой части я расскажу о принципах работы с очень интересным и важным инструментом Штамп, который частенько использую. Благодаря данному инструменту, можно легко продублировать текстуру объекта из одного места на другое.

Часть 9. А в этой части мы познакомимся с принципом действия простеньких инструментов (ластик, размытие, осветление, затемнение, резкость, губка). Я редко применяю эти инструменты, но, иногда, они оказываются крайне полезными, поэтому нужно знать об их существовании.

Часть 10. В этом видео мы изучим основные приемы работы с инструментом Текст. Это, наверное, один из самых часто используемых мной инструментов.

Часть 11. Важное видео, в котором я рассказываю о работе с палитрой истории и архивной кистью. Важность заключается в том, что здесь я, наконец-то, приоткрою завесу тайны, висящую над сочетанием горячих клавиш для отмены ошибочных действий

Часть 12. Еще один, часто используемый мной инструмент, это Свободное трансформирование, с которым я вас и познакомлю в этом видеоуроке. Заодно мы научимся легко изменять размеры изображения, крутить его на любой угол, а также, при помощи инструмента Искажение, я покажу способ изменения перспективы.

Как и обещал, ниже я размещая код плееров для просмотра изображения на сервисе RuTube (который, почему-то, не работает в Google Reader).

Часть 6.

Часть 7.

Часть 8.

Часть 9.

Часть 10.

Часть 11.

Часть 12.

По традиции, т.к. сервисы YouTube и RuTube своими алгоритмами сжатия делают мелкие детали на видео невозможными для нормального восприятия, предлагаю скачать ролики в гораздо лучшем качестве с Deposit Files:

Архив с роликами с 6 по 12 – 92,8 Мбайта (*.zip). Скачать.

P.S. Я готов обменяться постовыми с тематическими ресурсами. Все предложение пишите на мою эл. почту (указана в контактах автора).

Ну что же, теперь те самые постовые.

Советую посетить портал веб-масетров, дизайнеров и программистов. С ним вы всегда будете “в теме”.

Улучшаем индексацию сайта поисковиками — robots.txt для Joomla, SMF, WordPress

Photoshop для веб-мастера. Часть #5

Андрей Морковин — Thu, 12 Nov 2009 20:16:06 +0000

Приветствую вас, уважаемый читатель, в новом видеоуроке курса Photoshop для веб-мастера.

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

Содержание пятого видеоурока:

Основные операции, совершаемые из политры слоев (о перемещении и наложении слоев друг на друга я говорил в первом видеоуроке).
Работа со стилями слоя.
Перемещение содержимого слоя. Как не странно, очень часто возникают проблемы при попытке перемещения содержимого слоя. Необходимо четко понимать, что изображение, которое вы хотите переместить, обязательно должно находится на активном слое.
Выделение содержимого слоя.
Копирование объекта в новый документ. Скользким моментов является копирование изображения со стилями слоя в новый документ, т.к. изображение скопируется без стилей, их нужно вставлять дополнительно.

Переходите к просмотру видео.

Видео на сервисе RuTube:

Видео на сервисе YouTube (Часть 1):

Видео на сервисе YouTube (Часть 2):

Из-за алгоритмов сжатия видео сервисами YouTube и RuTube мелкие детали становятся плохо различимы. Вы можете скачать видео в лучшем качестве с Deposit Files (37.2 Мбайт *.wmv).

С уважением, Андрей Морковин.

Photoshop для веб-мастера. Часть #4

Андрей Морковин — Wed, 11 Nov 2009 17:05:00 +0000

В продолжении видеокурса Photoshop для веб-мастера, мне кажется, совершенно необходимо упомянуть о способах рисования сложных объектов, не смотря на то, что такая задача перед веб-мастером встает редко.

Этой теме я и посвящаю четвертый видеоурок.

Принципы рисования новых графических элементов в Photoshop можно разделить на два способа:

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

В видеоуроке я упомяну принципы рисования фигур при помощи первого способа и более детально рассмотрю второй; расскажу о принципах работы с инструментом “Перо” и с готовыми векторными объектами; вскользь затронем возможности работы со стилями слоя.

Видео на сервисе RuTube:

Видео на сервисе YouTube (Часть 1):

Видео на сервисе YouTube (Часть 2):

Из-за алгоритмов сжатия видео сервисами YouTube и RuTube мелкие детали становятся плохо различимы. Вы можете скачать видео в лучшем качестве с Deposit Files (33.1 Мбайт *.wmv).

P. S. На своем стареньком ЖЖ я опубликовал небольшую историю, с видеовставками и фотографиями, о своей научной деятельности. Если вам интересно, можете ознакомится.

С уважением, Андрей Морковин.

Photoshop для веб-мастера. Часть #3

Андрей Морковин — Mon, 09 Nov 2009 07:00:59 +0000

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

В интернете завоевали популярность три графических формата:

GIF
JPG
PNG (варианты PNG-8 и PNG-24).

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

Форматы сохранения графики

Давайте познакомимся с нашими подопытными форматами GIF, PNG, JPG подробно.

Формат GIF

GIF – представляет собой сжатый формат хранения графики без потерь.

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

Единственное, что влияет на качество сохраняемого изображения – это ограничение по максимальному количеству используемых цветов. Максимум цветов в формате GIF равен 256.

Таким образом, данной формат подходит для сохранения простых изображений, без сложных цветовых переходов, т.к., при помощи 256-цветов, всю насыщенность сложной картинки фотографического качества передать просто-на-просто не возможно.

К простым изображением можно отнести:

Текст, представленный на сайте в виде картинки.
Схему (карта проезда, чертеж и т.д.).
Логотип.

Преимущества GIF:

Поддержка прозрачности (т.е. на изображении, сохраненном в формате GIF, могут присутствовать прозрачные участки, через которые просвечивается подложка под картинкой).
Поддержка анимации (т.е. в файл GIF-формата можно сохранять несколько изображений, которые циклично переключаются, одно-за-одним с установленной временной задержкой).

Недостатки GIF:

Алгоритмы сжатия, применяемые в данном формате, являются устаревшими и серьезно проигрывают сжатию PNG-8 (о котором пойдет речь ниже). Еще бы, ведь по данным Википедии, применяемый в GIF метод сжатия был разработан в бородатом 1978 году и проигрывает PNG-формату 5 – 25% веса картинки. Подробнее об алгоритмах сжатия написал в своей статье технолог студии Артемия Лебедева Сергей Чикуенок.
Для разработчиков серьезным минусом данного формата была его патентная защита, но, слава Богу, она истекла в 2006 году.

Формат PNG

Встречается в PNG-8 и PNG-24 разновидностях.

PNG-8 – представляет собой сжатый формат хранения графической информации без потерь, очень похожий на GIF-формат. Все тоже ограничение по максимальному количеству цветов (256). Но, в отличии от устаревшего GIF, PNG-8 эффективнее сжимает картинки.

Вследствие ограничения в 256 цветов, данный формат, также как GIF, подходит для хранения простых изображений.

Преимущества PNG-8:

Более продуктивный алгоритм сжатия, в отличии от GIF.
Поддержка прозрачности сохраняемого изображения.

Недостатки PNG-8:

Как и у всех остальных форматов, кроме GIF, отсутствует поддержка анимированного изображения.

PNG-24 – в отличии от своего собрата, данный формат не имеет ограничение в 256 цветов, а прекрасно работает с миллионами цветов сложных изображений.

Формат PNG-24 представляет собой сжатый формат хранения графической информации без потерь. Вследствие этой безпотерьности нельзя регулировать степень сжатия. Поэтому, изображения в формате PNG-24 могут занимать гораздо больше места, нежели изображения в JPG-формате (о котором пойдет речь ниже), при относительно одинаковом внешнем виде.

Преимущества формата PNG-24:

Поддержка прозрачности и полупрозрачности (т.е. вы можете оперировать прозрачностью изображения не только в измерениях “прозрачное-непрозрачное”, но и плавными переходами градиентообразной прозрачности, от полной непрозрачности к полной прозрачности).
Работа с миллионами цветов.

Недостатки формата PNG-24:

С прозрачностью данного формата не умеет работать IE6, но с этой проблемой можно успешно бороться (о том, как побороть проблемы прозрачности в IE6 для формата PNG-24 я рассказывал в 7-м видеоуроке по блочной верстке сайта).
Из-за принципиальных особенностей алгоритмов сжатия данного формата, нельзя установить степень компрессии и полноцветные изображения могут занимать непозволительно много места.

Формат JPG

JPG представляет собой сжатый формат хранения графического изображения с потерями. Степень потерь можно регулировать при сохранении в данный формат, например, посредством программы Photoshop (при помощи ползунка Качество диалога сохранения для веб и устройств; я наглядно показываю как это делать в видеоуроке к данной статье).

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

Также как и PNG-24, JPG работает с миллионами цветом, а значит, хорошо подходит для хранения сложных изображений фотографического качества.

Преимущества формата JPG:

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

Недостатки формата JPG:

Полностью отсутствует поддержка прозрачности.

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

Эксперимент: какую картинку в какой формат лучше сохранять

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

Как сохранять изображения в Photoshop и настраивать форматы сохранения

На этот вопрос я постарался дать ответ в видеоуроке. Приступайте к просмотру

Видео с сервиса RuTube:

Первая часть видео с сервиса YouTube:

Вторая часть видео с сервиса YouTube:

Из-за алгоритмов сжатия видео сервисами YouTube и RuTube, мелкие детали становятся плохо различимы. Вы можете скачать видео в лучшем качестве с Deposit Files (23.5 Мбайт *.wmv).

P.S. Сегодня в записи имеет место первый постовой на блоге, встречайте seo и заработок в интернете от практика SeoProfy.

С уважением, Андрей Морковин.

Photoshop для веб-мастера. Часть #2

Андрей Морковин — Fri, 06 Nov 2009 14:43:38 +0000

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

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

Содержание видеоурока #2:

Решение проблемы нередактируемости изображения gif-формата, скачанного из интернета.
Принципы сознания новых графических элементов при помощи инструмента “Выделение”.
Изменения размера холста посредством инструмента “Рамка”

Переходите к просмотру видеоурока.

Видео на сервисе RuTube:

Первая часть видео на сервисе YouTube:

Вторая часть видео на сервисе YouTube:

Из-за алгоритмов сжатия видео сервисами YouTube и RuTube мелкие детали становятся плохо различимы. Вы можете скачать видео в лучшем качестве с Deposit Files (23.3 Мбайт *.wmv).

Если вдруг скачанное видео не проигрывается, либо воспроизводится без звука, то вам просто нужно установить новую версию кодеков. Можно поставить, например, K-Lite_Codec_Pack_520_Full. Я его уже скачал и загрузил себе на Deposit Files. Так что, все желающие могут дернуть его с Депозита (11.8 МБайт).

***

Кстати, в свете моего, прошедшего вчера, дня рождения, у меня появились новые наушники с микрофоном.

Было:

Стало:

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

Шум в звукозаписи все равно присутствует, но это вина звуковой карты.

С уважением, Андрей Морковин.