PokrovBlog

Когда Photoshop отображает совсем не то, что надо

Максим Покровский — Sun, 23 Aug 2009 22:51:04 +0000

Такая вот ситуация: дизайнер присылает макет, а у верстальщика открывается какая то лабуда светлая, или темная (если верстальщик испольует МасOS, а дизайнер Win.). Или же верстальщик сохраняет картинку, а там цвета другие стали.

Разберемся почему так и как с этим жить.

Небольшой экскурс в теорию. Для отображения цвета на наших мониторах используется цветовая модель RGB, но поскольку но, поскольку, мониторы разных моделей и производителей различаются, были предложены несколько альтернативных цветовых пространств, соответствующих «усредненному» монитору. Нам интересно пространство sRGB.

" isinserted="
sRGB – это цветовая модель использование которой будет одинаково отображать графику как на навороченном так и на допотопном ноутбуке.
">
sRGB – это цветовая модель использование которой будет одинаково отображать графику как на навороченном так и на допотопном ноутбуке.

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

Различие в профилях.

У правильного верстальщика профиль стоит North America Web/Internet. Проследите чтобы в Working Spaces было именно sRGB.

У правильного дизайнера тоже должен стоять такой профиль при создание макета сайта. Тогда ни у кого не будет проблем.

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

Различия в OS

В Win по умолчанию на картинки накладывается профиль sRGB, то есть даже если вы не выбрали вышеуказанный профиль, у вас все равно будет sRGB. Однако в MacOs на картинки по умолчанию накладывается профиль монитора, что плохо. Однако решающее значение будет играть тот факт, какой профиль вы используете в граф. редакторе.

Есть еще одно различие: в Win гамма по умолчанию 2.2, а в Мас 1.8 (по крайней мере в последней ОС). Из за этого картинки с Мака выглядят темнее в Винде, и наоборот. Если дизайнер хочет постичь Дао, то нужно на Маке поднять гамму до 2.2 (~~кто скажет как это сделать, тому спасибо и ссылка~~ Настройки -> Мониторы -> Цвет -> Калибровать -> Продолжить -> 2.2 Телевизионная гамма… Прокликать дальше, как-нибудь назвать и использовать.
Спасибо Вадиму Макееву). Почему поднять на Маке, а не опустить на Вин? Потому что в Linux тоже 2.2, да и новая версия МаcOS выйдет с гаммой 2.2 (слухи ходят).

Мне прислали макет в профиле отличном от sRGB

Это самое интересное.

Так бывает. Стоит у дизайнера какой-нибудь “Cinema HD_BQB01072007” и дизайнер знать об этом не знает. Мол, наше дело нарисовать, художника всякий обидеть может и тэдэ.

Вряд ли сможете убедить дизайнера перевести макет в sRGB и перерисовать все цвета. Разве что при совсем уж отчаянной харизме (впрочем топор тоже может помочь). Не страшно.

Для начала необходимо убедится, что у нас стоят вот эти галки.

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

Что мы тут можем сделать.

Мы можем применить профиль который идет с изображение
Мы можем конвертировать профиль в наше рабочее пространство.
Мы можем продолжить использовать свой профиль.

Многие начинающие верстальщики перебирают все три способа, пока картинка не будет идентична той что отображается в просмотрщик(ACDSee или Irfan и примеру). И останавливаются на третем. Это НЕ ПРАВИЛЬНО, потому что вас просмотрщик тоже отображает не правильно.

И так допустим вы выбрали первый вариант. В этом случае при сохранении картинок нужно обязательно при сохранении картинки через Save for Web & Devices… убрать галку с Convert sRGB. Иначе у нас сохранится совсем не то что нам надо.

Внимание. В Photoshop CS3 она прячется здесь.

Я же настоятельно рекомендую выбирать второй пункт — конвертацию. Но перед этим зайдите в Convert to Profile и снимите вот эту галочку

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

На этом все. Жду ваших вопросов.

Новости. Новая форма.

Максим Покровский — Mon, 17 Aug 2009 21:29:52 +0000

Моими очумевшыми от работы руками была сделана вот такая красивая форма. Да, можно было бы простую рамку с текстареа и чекбоксы, но кидал я через бедро этот аскетизм.

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

З.Ы.
Что бы посмотреть в работе кликните на ссылку: “Заказать мне работу”

Как получить доступ К DOM родителя из iframe через jQuery

Максим Покровский — Wed, 12 Aug 2009 04:04:07 +0000

$("#someID", top.document);

Как получить доступ к DOM iframe через jQuery

Максим Покровский — Mon, 10 Aug 2009 12:16:45 +0000

Iframe: <iframe id="i" name="i" frameborder="0" allowtransparency="1" src="form.php"></iframe>
Содержимое iframe: <div id="j">Абракабабра</div>
jQuery: $('#i').contents().find('#j').html();

Бесценно или не имеет цены?

Максим Покровский — Fri, 31 Jul 2009 19:02:47 +0000

Эти два понятия диаметрально противоположны.

Бесценно — это когда «ну очень много денег», а не имеет цены — значит тебе ничего за это не дали.

Разумеется цена здесь не носит номинальный характер. Во фрилансе, с их гуру и демперами, услуга или товар, вообще не имеет номинала. Можно потратить своевременных пять минут, для того чтобы потом облегчит владельцу сайту жизнь на долгие месяцы, — и это будет бесценно, а можно потратить месяц на умопомрачительный дизайн, что его так и внедрили, — и это уже “не имеет цены”.

Выводы сами сделайте.

Размещаем что-либо поверх flash блока

Максим Покровский — Sun, 26 Jul 2009 13:31:05 +0000

Размещаем любой блок над флеш: <div class="flash-wrap">
<a class="flash-link" href="#">Перейти на PokrovBlog</a>
<object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
<param name="wmode" value="opaque">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
</object>
</div>

.flash-wrap{
position: relative;
}

.flash-link{
position: absolute; top:0px; left:0px;
}

Это наитипичнейшый пример, но иногда требует нечто более сложное. Например, мне нужно было сделать чтобы баннер с активной ссылкой (то есть уже вшитой в код самого флеша), вел на другой адрес.
Размешаем активную область над флеш.: <div class="flash-wrap">
<a class="flash-link" href="#"></a>
<object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
<param name="wmode" value="opaque">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
</object>
</div>

.flash-wrap{
position: relative;
}

.flash-link{
position: absolute; top:0px; left:0px;
width:180px; /*Размеры флешки*/
height:220px;
background: url('images/0.gif') no-repeat; /*Особенный костыль для всех IE. Если фона нет, то воспринимается ссылка вшитая во флеш, а не наша. Думаю понятно, что 0.gif это прозрачный однопиксельный гиф.*/
}

Пример

Крупные компании отказываются от поддержки IE6

Максим Покровский — Sat, 18 Jul 2009 09:45:23 +0000

Какое то время назад я предложил ограничить поддержку IE6. Блогом я не ограничился и связался с некоторыми компаниями. Отказались. Мотивируя, что только дескать они не дураки, что надо бороться за каждого клиента, ну и прочие поверхностные суждения, здорово оправдывающие узость мышления, заботой о ближнем. Тем временем журнал internetno.net опубликовал следущее.

">
Популярные веб-сервисы начинают отказываться от поддержки браузера Microsoft Internet Explorer6.

Как передает TechCrunch, видеохостинг YouTube теперь предупреждает пользователей о скором прекращении поддержки IE6 и призывает «обновиться» до последних версий Chrome, Firefox и Internet Explorer 8.

Аналогичный шаг готов предпринять Digg. Ранее поддерживать IE отказались разработчики из 37signals. Все их веб-сервисы, включая Basecamp, Highrise и Campfire, требуют установленного Internet Explorer 7-й версии и выше. Такое же решение год назад приняла и Apple — для работы с MobileMe требуется IE7+.

Шире мыслят за пределами нашей родины. Теперь ожидаю волну подражателей, возможно кто-то даже снабдит свой index.html девизом: “Мы первые!”.

Как верстальщик я, конечно рад. Как личность тщеславная — обидно, что не я. Что упорства в себе не нашел за шиворот оттащить от “шестерки” тех кого мог.

Среди комментаторов вряд ли, но наверняка среди читателей найдутся те, кто не раз и не два оставлял на форумах вариации на тему “Ну когда же он сдохнет!”.

Что думаете други? Вечно плестись в заду у запада бум?

Wordpress. Как сделать экспорт одной категории

Максим Покровский — Sat, 11 Jul 2009 14:28:09 +0000

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

Открываем админку нашего сайта, переходим “инструменты –> Экспорт”

Чем мотивировались разработчики привязывая экспорт к имени, для меня загадка, но и ляд с ним. Будем исправлять.

Открываем wp-admin/export.php и ищем там вот такие строчки:

if ( isset( $_GET['download'] ) ) {

   export_wp( $_GET['author'] );

   die();

}

Меняем их на:

if ( isset( $_GET['download'] ) ) {

   export_wp( $_GET['category'] );

   die();

}

Далее снова ищем…

<table class="form-table">

<tr>

<th><label for="author">('Restrict Author'); ?></label></th>

<td>

<select name="author" id="author">

<option value="all" selected="selected">('All Authors'); ?></option>

$authors = $wpdb->get_col( "SELECT post_author FROM $wpdb->posts GROUP BY post_author" );

foreach ( $authors as $id ) {

$o = get_userdata( $id );

echo "<option value='$o->ID'>$o->display_name</option>";

}

?>

</select>

</td>

</tr>

</table>

… и меняем

<table class="form-table">

<tr>

<th><label for="category">('Выберете категорию'); ?></label></th>

<td>

<select name="category" id="category">

<option value="all" selected="selected">('All Categories'); ?></option>

$categories = (array) get_categories('get=all');

foreach ( $categories as $c ) {

echo "$c->cat_name</option>";

}

?>

</select>

</td>

</tr>

</table>

В результате получаем вот такую внушающую оптимизм, но пока еще не функционирающую картинку:

Продолжаем рыть землю. Открываем …wp-admin/includes/export.php

function export_wp($author='') {

Меняем:

function export_wp($cat='') {

Теперь найдем:

if ( $author and $author != 'all' ) {

$author_id = (int) $author;

$where = $wpdb->prepare(" WHERE post_author = %d ", $author_id);

}

И поменяем:

if ( $cat and $cat != 'all' ) {

$cat_id = $cat;

$ids = $wpdb->get_col("SELECT object_id FROM $wpdb->term_relationships WHERE term_taxonomy_id=$cat");

$where = $wpdb->prepare(" WHERE ID IN(".join(',',$ids).")");

}

На выходе получаем XML файл, который можно импортировать встроенными средствами Wordpress.

Горизонтали в дизайне и верстке

Максим Покровский — Wed, 08 Jul 2009 10:08:28 +0000

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

Взглянем на пример. Так по мнению дизайнера должен выглядеть макет.

А вот так он будет выглядеть по желанию копирайтеров, сеошников и других недизайнеров.

Что вызывает негодование в дизайнерской душе. Однако у сеошников и других “противников эстетики” своя работа, а у вас своя. И жертвовать кол-вом текста, высотой картинки и лишним баннером они не будут.

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

Разумеется если вы хорошо верстаете или верстали когда-то, подобные проблемы отпадают за несостоятельностью.

Как восстановить пароли в Firefox 3.5

Максим Покровский — Thu, 02 Jul 2009 13:20:50 +0000

Ищем в папке вашего профиля файл signons.sqlite и переименовываем его в signons.sqlite.bak После чего перезапускаем браузер.

—

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