November 2013

Тема 3. Когда с исходиком становится тяжело работать

Рисуете вы, значит, сайт. День, второй, третий... Слоев все больше и большше. Там поправили, тут поменяли. Все слои по папочкам разложили, переименовали, чтобы самому потом можно было разобраться. Все как бы логично выглядит, но слоев далеко за сотню и компик начинает подтормаживать. Что делать? Оптимизировать.

    • сначала все повторяющиеся элементы в smart Object'ы;
    • потом эти smart object'ы экспортируйте в отдельные файлы (*.psb) в каталог с вашим исходником. У меня это обычно хедеры, футеры, листинги, блоки комментариев и так далее. Называть их лучше с префиксом, напр. "projectname_so_footer.psb", чтобы сходу отличать от основных psd. И если, в дальнейшем, понадобится где-то еще включить блок, который вы уже экспортировали, то делаем File->Place. При этом, сделав изменения в psb, вы их увидите везде, куда он подключен;
    • потом, если слои все еще тяжело перетаскиваются по документу, каждый шаблон сайта сохраняем как отдельный документ. Залинкованые psb не слетают, полет нормальный;

Но бывает и в пределах одного шаблона, все начинает тормозить. Что случилось? Скорее всего вы намудрили. Или выделили мало оперативной памяти под фотошоп. Если же на самом деле документ получился очень объемным, то тут могу посоветовать следующее:

    • слои «летают» быстрее, если предварительно их поместить в Ctrl+T (но нужно быть осторожнее с группами в которых есть тексты, поскольку они могут встать не по пикскльной сетке и «замылиться»)
    • но даже самую объемную группу можно передвинуть по сетке молниеносно, сделав следующее: а) сначала прямоугольное выделение, где один из углов будет целью; б) при помощи Align Edges просто выровнять группу, по вашему выделению. Успех.

Картинка ниже прояснит ситуацию.

Тема 2. Когда картинки нет, а хочется оформить список красиво.

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

Чтобы не ставить заглушки, изобрел вот такой дивный способ. Используя overflow:hidden у контейнера пишем название блока большими буквами вместо картинки. Не стесняйтесь! Вот так это может выглядеть.

Тема 1. Трюк с наложением масок на слой, содержащий эффекты.

Наверняка вы сталкивались с проблемой, когда слой, к которому применены какие-либо эффекты, «неправильно» отображается под маской. Будь она векторная маска или растровая, обводки и прочие эффекты начитают выглядеть как-то странно.

Хорошая новость. Можно обойтись без создания „Smart Objects” и облегчить себе редактирование документа. Как-то раз, вчитываясь в названия опций в окне «Blending Options...» я наткнулся на чекбоксы «Layer Mask Hides Effects» и «Vector Mask Hides Effects». Оказывается, это и есть тот самый волшебный эликсир, который позволит использовать на полную всю мощь масок и стилей.