Как подготовить изображения для WEB

Этот пост предназначен для тех, кто ещё не знает как можно подготовить изображения (фотографии, рисунки, схемы) для web.

Когда я только начал изучать HTML (Язык Разметки Гипер Текста), я даже и не подозревал о том, что изображение прежде чем разместить и Интернете надо «подготовить» :(. Что у меня получалось при этом: (я учился и файлы были у меня на локальном компьютере) изображения можно было посмотреть только в Internet Explorer, другие браузеры не отображали фотографий, при этом изображения выглядели «корявыми». При этом каждая фотография необработанная, занимает порядка 1 мб (мегабайта). Если вы попытаетесь такую страницу разместить (если у Вас не выделенная линия), то Вы будете её «заливать» минут 10. И соответственно посетитель сайта также будет долго ждать пока фотография загрузится.

Что нужно сделать чтобы разместить фото на сайт?

Во-первых, надо «обрезать» лишнее. Очень часто в кадр попадают объекты, другие люди и т.п., которые Вы бы не хотели чтобы они были видны на фотографии.

Во-вторых, надо изменить размер получившегося изображения. Если просто обрезать фото, то его размер будет больше чем размер экрана. Размер 15 дюймового монитора составляет 1024*768 пикселей, а размер фотографии снятой 4 мегапиксельной камерой составляет 2272*1704 пикселей. Поэтому зачем Вам нужны эти пиксели, которые невидно?

В-третьих, необходимо сохранить фотографию в оптимизированном для web формате. Web поддерживает форматы: jpeg, gif, png.

На этом месте возникает вопрос как это всё сделать?

Это можно сделать через программы обработки изображений. Если у Вас есть Photoshop, то это прекрасно можно сделать при помощи данной программы. Если данной программы у Вас нет, то можно воспользоваться бесплатными программами, например Xnview (6059kb), Gimp (17,12mb). Есть и другие программы для просмотра и обработки изображений, но именно эти приложения являются полностью бесплатными. Давайте поочерёдно рассмотрим как пользуясь ими подготовить фотографию для web.

Если Вы пользуетесь Photoshop, тогда надо открыть фотографию при помощи этой программы. Чтобы обрезать область фотографии выбирайте инструмент Crop Tool (клавиша С на рис цифра 1), выделяйте область которую Вы вбираете (которая останется рис цифра 2) и нажимайте Enter.

Чтобы уменьшить размер изображения выбирайте меню Image — Image Size (или сочетание клавиш Alt+Ctrl+I рис цифра 3)

Чтобы сохранить изображение оптимизированное для web выбирайте File — Save for web (или сочетание клавиш Shift+Alt+Ctrl+S).

В диалоговом окне выбираем формат изображения в котором Вы собираетесь сохранять для web, выбирайте качество изображения. Чтобы определить соотношение параметров размер/качество, в этом диалоговом окне есть функция просмотра исходного изображения и предпросмотра итогового файла. Определять надо на глаз: файл желательно чтобы был как можно меньшего размера и при этом изображение не расплывалось. Далее кликайте на клавишу «Save» и ВСЁ!…

Если у Вас нет программы Photoshop и Вам нужна программа только для оптимизации фотографий для web, то вам подойдёт программа Xnview. Архив этой программы занимает всего 6mb, устанавливать её не надо, можно распаковать архив и работать (программа может работать даже с флэшки).

Запускайте программу Xnview, открывайте файл для редактирования. Простым «протягиванием мыши» выделяйте область изображения которую вы хотите опубликовать (на рис цифра 1) и кликайте на ножницы (обрезать рис цифра 2).

Теперь подгоняем размер под наши нужды (меню «Рисунок» — «Изменение размеров» или сочетание клавиш Shift+S)

После сохраняем для web: меню «Файл» — «Экспорт» или сочетание клавиш Ctrl+Alt+S. Здесь Мы как и в примере с Photoshopом выбираем формат, и качество исходящего файла.

Получившиеся изображения Мы можем смело размещать в сети Интернет, их отобразит любой интернет обозреватель.

Мой Город = Мой ДОМ

Недавно мне довелось поучаствовать в фокус группе, которую заказала администрация нашего города. Тема мероприятия: социально-экономическая ситуация в городе Иркутск. Участники обсуждали какое расслоение в обществе есть на данный момент, кого больше, кого меньше и почему. Одним из вопросов был такой: «Что отличает Ваш город от других городов, что в нём особенного, что Вам бросается в глаза, когда Вы сюда приезжаете?». Ответы на него были самые разные: начиная от главной достопримечательности, озера Байкал (что находится в непосредственной близости с городом), заканчивая историческими местами, домами, улицами и т.д. и т.п.

Мы за чистый город

Когда я приезжаю в наш город, мне прямо «КИДАЕТСЯ» в глаза грязь и мусор на улицах… Город Иркутск очень грязный город, по сравнению с другими городами. В том же Красноярске Вы «такого» не увидите 🙂 Почему это происходит? Почему грязно? Потому что не убирают? Может не хватает финансирования дорожных и коммунальных служб?…

Ответ НЕТ! Как сказал профессор Преображенский: «Разруха начинается в голове». Всё дело в том, как Мы относимся к своему городу. У себя дома Вы вывалите мусор в шаге от мусорного ведра? Может Вы кинете окурок рядом с пепельницей? Или нагадите возле туалета? Опять ответ НЕТ! А почему? Да потому что это Ваш дом, Вы хозяева вашего дома, Вы в ответе за него перед самими собой. Так почему же всё это (что Вы не сделаете дома) можно сделать на лице? Почему нет равенства между «Мой Дом» и «Мой Город»?

В Вашем городе станет чисто только тогда, когда Вы возьмёте на себя ответственность за свои поступки, когда Вы станете вести себя в городе как дома. Тогда станет «Мой Город» = «Мой ДОМ».

Моя первая тема для WordPress :-)

Представляю на всеобщее обозрение своё первое творение в области кастомизации бесплатного блогового движка WordPress. Это тема, выполненная в гранджевом стиле, я назвал её Grange Spider.

Для первого раза, по-моему, неплохо :-).

За основу темы была взята стандартная тема, которая идёт в дистрибутиве WodPress, тема WordPress Default (The default WordPress theme based on the famous Kubrick). В модификации были изменены: «фон», «шапка (header)», «подвал (footer)», ширина шаблона (вместо 760px 900px). Скачать тему для WordPress Grange Spider.

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

Поставьте Google на свой компьютер (GoogleDesktop)

Недавно я протестировал на своём компике прогу Google Desktop… Спешу поделиться своими впечатлениями о программе.

Данная программа предназначена в первую очередь для поиска файлов на локальном компьютере (и в Интернет тоже при активном подключении). Другими словами Вы ставите на свой компьютер свой «маленький» Google, который помогает Вам искать файлы на жёстком диске.

Где взять? Загрузить эту программу можно, зайдя на сайт http://google.ru После установки поисковик начинает сканировать жёсткий диск компьютера. Мой оъёмом 80GB он сканировал часа 3 примерно. Пока идёт индексация файлов Вы сразу можете пользоваться поиском и в этом случае Google предупреждает, что поиск не полный: проиндексировано столько-то процентов.

Ну вот я дождался пока проиндексируется весь HDD. Вбиваю запрос в строке поиска и…. практически мгновенно открывается интернет обозреватель со страницей результатов поиска!!! То-есть Googlю буквально доли секунды потребовалось, чтобы найти все файлы, удовлетворяющие критериям запроса.

Я сразу вспомнил ту самую «собачку» от Microsoft, которая по полчаса искала нужные мне файлы на моём жёстком диске, обычно не дождавшись окончания поиска я останавливал его. С google desktop это в прошлом, сейчас файлы можно искать очень и очень быстро, с минимальными затратами времени и нервов 🙂 .

Ещё меня порадовала такая вещь как «гаджеты». Google Desktop может устанавливаться как отдельная панель на рабочий стол и в этой панели можно установить «гаджеты» (полезные расширения, облегчающие жизнь). Вот пример этой панели:

скриншот Google Desktop

На примере можно увидеть гаджеты: «Часы», «Блокнот», «RSS агрегатор», «Системный монитор». На самом деле их гораздо больше… Я поставил лишь те которые мне нужны.

В заключение, могу сказать что данная вещь из разряда must have.

Постите не заходя на блог

Сегодня я поставил расширение для обозревателя Seamonkey (Mozilla), которое называется ScribeFire. И данный пост я пишу в этой программе. Посмотрим как будет потом всё это дело выглядеть 🙂 …

«Что это за плагин?»: спросите Вы, «И на кой он мне?» Отвечаю: это плагин который позволяет писать посты прямо в браузере, не заходя на Выш блог. Данный плагин поддерживает разные сервисы блогов, включая Blogger, LiveJournal, WordPress и многие другие. Приложение это является Freeware программой, что значит что Вы получаете его, и используете совершенно бесплатно. Его не надо регистрировать, платить за него и прочего геморроя тоже нет.

Мои Впечатления от данного расширения:

Устанавливается дополнение очень просто (если Вы пользуетесь интернет обозревателем Seamonkey: заходите в меню Справка затем Плагины). Вы перейдёте на страницу поиска плагинов. Из раздела тип расширения выбирайте Просмотр новостей и Блоггинг, именно в этой категории и находится это дополнение. Справа от расширения будет кнопка «Добавить в Seamonkey», кликайте на неё и практически всё. Браузер пару раз запросит Ваше подтверждение: соглашайтесь и … ГОТОВО

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

Что порадовало так это проверка орфографии, она встроена и поддерживает русский язык (есть возможность загрузить дополнительные словари). Если в слове есть ошибка, то как в Worde программа подсвечивает это слово. При клике на этом слове правой клавишей мыши, программа предлагает альтернативные слова (исправленные).

Создавать посты можно в автономном режиме, а подключившись к Интернет, загрузить их на блог.

Скриншот плагина ScribeFire

В общем и целом это достаточно удобное решение для ведения Вашего блога, и моего тоже 🙂 .

It is all in your head

it is all in your head Есть такая песня «It is all in your head» (группа Mashin Head), для тех кто «дружит» с английским должно быть понятно это название. Для остальных перевожу «Всё это в вашей голове». Чёрт возьми, как эти парни правы, даже, несмотря на то, что группа работает в стиле Heavy Metal, который разрушает моцк.

По образованию я психолог и ещё когда я учился, то слушал эту запись и удивлялся, как же они правы. Я сейчас поясню, что имею в виду, на простом примере. На днях мне довелось пойти по делам и, закрутившись перед уходом, я забыл посмотреть в окно (на градусник и как там люди одеты). Когда я вышел на улицу, то обнаружил, что одет несколько легко: я был в рубашке с коротким рукавом, все остальные в тёплых куртках. Погода была нейтральная (ни холодно, ни тепло), и вдруг меня осенило. То как я отнесусь к погоде (как я решу к ней отнестись) повлияет на моё ощущение. Если я решу, что вокруг холодно, то мне соответственно станет холодно, и я замёрзну. Если я решу что вокруг тепло, то мне будет тепло. Всё просто!

Однако, за этой простотой скрываются «подводные камни». Очень часто наше мнение (решение) сильно зависит от мнения окружающих. Мы покупаем товары, которые нам «навязывает» реклама по телевизору, мы поступаем, так как сделал бы Ваш лучший друг (подруга), и т.д. примеров много. Психологи утверждают, что лишь примерно 10% наших действий сознательны. В основном, человек сначала что-то делает, а потом придумывает основание своих действий.

Если бы перед уходом я всё-таки посмотрел, как ходят окружающие, то моё решение было бы однозначно: на улице холодно. Таким образом, принятие решения я бы переложил на окружающих (все ходят в куртках, и я тоже пойду в куртке) и от такого решения мои интересы соответственно пострадали. На самом деле не важно, тепло что-то или холодно, хорошо, что-то или нет, Главное как ВЫ к этому относитесь. Так вот о чём я: ВСЁ у нас в ГОЛОВЕ, даже успех в каком-то деле, тоже находится у нас в голове. Если Вы что-то решили, не оглядывайтесь на окружающих идите до конца, до той цели, которую Вы себе поставили.

Подошёл к концу конкурс MLM блоггер

Пользуясь случаем, хочу поздравить всех участников  с этим событием!!! Вы проделали огромную работу за эти 3 месяца, большое Вам спасибо за это!!! Хоть пока ещё не ясно кто удостоится премии, Вы уже победили 🙂

Из всех участников особенно хочу выделить свою жену Марину, Ты смогла за это время из «самовара», незнающего что такое блог, превратиться в продвинутового юзера и дошла до финала!!! Знаю как это было непросто не понаслышке 🙂

Марина, желаю тебе так же активно развивать свой блог, сохранив тот темп, который Ты набрала на этом конкурсе и также успешно развивай свой бизнес в ON Лайне и в OFF Лайне. Не останавливайся на достигнутом и ты станешь настоящим бриллиантом ручной огранки!

Марина Вперёд! Вперёд Фамильный!!!

Tabula rasa

Tabula rasa — означает чистую доску или чистый лист, каждый раз  когда мы начинаем какое-нибудь новое дело, мы волей-неволей сталкиваемся с ней. Она преследует нас с самого начала нашей жизни до самого её завершения. Вот и сейчас, я сижу перед монитором моего ASUSа и испытываю дилемму: о чём писать, как писать…

Слышал, что каждый «новоиспечёный» блоггер испытывает так называемый «барьер чистого листа». Вот уж не думал что это происходит именно ТАК. Вроде мыслей много, а садишься писать, они как тараканы разбегаются в разные стороны…

Так вот, оказывается, избавиться от этого барьера можно только начав движение к поставленной цели. В моём случае опубликовав первый свой пост на maximus-laboratory.

Все кто начинает свой бизнес в сети, не думайте долго над тем как Вы будете строить своё дело: «Великие дела нужно совершать, а не обдумывать их бесконечно» Юлий Цезарь.

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

maximus-mobile

Это логотип моего блога для сотового телефона  (немного «мобильного контента» размер 128*160).