[Arnae]

*кликабельно*

[Список уроков:]
Расплывчатые советы ^^










А также: ответы на вопросы:
Полосочки

Сообщение от вопрос

Тьма, ой мне интересно было узнать как ты делаешь иногда на скринах мелкие белые полосы проходящие по диагонали рисунка. Это текстура ил специальные действия?

Ответ

_____________________

Я работаю в

Фотошоп на английском. Переводы свои, так что
могут отличаться от русского оригинала.

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

[Arnae]

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

Описание задачи: Достаточно часто нам
необходимо вырезать какой-то фрагмент, деталь,
картинку или даже целого сима, но
инструмент Magik Wand Tool (волшебная палочка)
захватывает лишнее или наоборот оставляет
ненужные куски. А сидеть и попиксельно вырезать
с помощью Lasso Tool (лассо)
лишнее
очень неудобно. Нам поможет режим маски.

Описание работы: Открываем наше изображение.
У меня это симбот.



Я хочу вырезать робота, но использовать Magik Wand Tool
я не могу: слишком много различных цветов
вокруг объекта. Обводить его с помощью лассо
я тоже не хочу, поэтому на панели
инструментов нажимаю на Edit in Quick Mask Mode
(редактировать в быстром режиме маски).



После чего выбираем круглую кисть с ровными
краями, я увеличила её диаметр до 40 px, для
начального этапа он удобнее. Позже необходимо
будет уменьшить кисть.



Теперь смело закрашиваем область, где находится
симбот, после закрашивая всей нужной области
выбираем инструмент Magik Wand Tool.



И кликаем им на красной области. Выделяется
всё наше красное пятно. Щелкаем правой кнопкой
мыши и выбираем опцию Select Inverse
(инверсия выделения)



Теперь нажимаем Delete и возвращаемся к нормальному
режиму с помощью нажатия на кнопку Edit in Standart Mode
(редактирование в обычном режиме).



Осталось поместить изображение туда, куда надо.

Пример моей работы с этим роботом:

[lerenok]

Тьма, Подписываюсь сразу) Все-таки идейный вдохновитель, как не прочитать твои уроки?
Хочу, чтобы ты поделилась секретами разезания картинки так, чтобы вкладки, например, были по краям. Во многих династиях, где делала оформление именно ты, этот прием используется. У меня получается располагать кнопочки только в ряд, либо в линейку (при том, если простешая картинка). Подскажи, пожалуйста не новичку, но не асу, как это сделать?
Буду благодарна

[Arnae]

lerenok, хорошо, напишем. Я тоже думала об уроке разрезания. Там будет и про боковые вкладки.
Насколько я поняла, ты о таких, как тут (отчёты, баллы)?
На самом деле они делаются точно также, только сначала идёт один кусок картинки, а потом другой, но с текстом.
Ладно, думаю, что вечером выложу.

[lerenok]

Тьма, да-да-да)ты правильно поняла, именно это я и имела ввиду. после тщетных попыток, сама уже подумывала обратиться за помощью в ЛС, но раз уж ты открыла тему...)
Спасибо за внимание к просьбе

[Arnae]

Разрезание готовой картинки
Тут не будет урока по созданию оформления,
а только о разделении цельной картинки на отдельные.

Описание задачи: Для создания оригинального и просто красивого
рабочего интерфейса, например, по теме используют картинки-ссылки
или картинки-спойлеры (на Prosims'е - cut (вырезка))
Но мало нарисовать цельную картинку-логотип, надо её ещё разрезать,
с этой трудностью встречаются очень многие.
В этом уроке я описываю свой метод разрезания.

Описание работы: Открываем наше изображение.
Я возьму сохраненное изображение логотипа моей темы:



Открытое в фотошопе изображение имеет один слой,
который при этом ещё и закреплён, если я начну менять Canvas Size (размер холста),
то изображение автоматически обрежется. Чтобы этого
не произошло, кликаем мышкой два раза на слое, после чего
появляется окно с информацией о слое. Игнорируем его нажатием Enter.
Теперь прикидываем на глаз, какая высота нужна для
первой кнопки "основатель", если вся высота равна 460 px?
Предполагаем, что 80... Следуем пути:

Image -- Canvas Size
Изображение -- Размер Холста

И меняем Height (высоту). Я уже привыкла
заниматься этим делом, поэтому сразу же угадала
подходящую высоту. Если Вы промахнулись - попробуйте ещё раз.
____________________________(и ещё и ещё...)
После этого сделайте подгонку изображения так, чтобы
сверху и слева никакие элементы не оставались за видимым
холстом. Всё бы ничего, да справа у нас есть ещё кнопки,
поэтому изменяем также и Width (ширину).



Теперь сохраняем картинку-кнопку под цифрой 1, чтобы
потом было проще заливать и вставлять на форум в
правильной последовательности. Теперь берём инструмент
Restangular Marquee Tool (прямоугольная область)
и выделяем всю область картинки, после чего щелкаем
правой кнопкой мыши и выбираем опцию Fill (заполнить)



Выбираем яркий цвет и нажимаем ОК. После чего сбрасываем выделение Esc'ейпом и выбираем инструмент Move Tool (инструмент перемещения) .
теперь сдвигаем по горизонтали картинку до тех пор,
пока не увидим следующую надпись полностью
(или не полностью, вдруг она длиннее). Если длины холста не хватает
или она наоборот слишком большая, меняем её, после чего
подгоняем холст вот так:



Обращаем внимание на то, чтобы сверху не было пустоты или
картинка не "убежала" за границы холста.
Слева мы видим один пиксель от розового прямоугольника,
с помощью клавиш перемещения сдвигаем изображение влево
(одно нажатие - 1 пиксель), и сохраняем картинку.

Затем снова с помощью Restangular Marquee Tool и опции Fill заливаем
область ярким цветом и проделываем то же самое с другой картинкой справа (если она есть). Вы уже поняли, что заливка помогает
определить, что уже сохранено, а что нет. По этим
цветовым меткам можно с легкостью ориентироваться.

Чтобы не мучиться с определением 'остатка' картинки на холсте, запишите где-нибудь:
◘ Всю длину и высоту целого изображения;
◘ Сколько вы уже "отрезали" для кнопки;
И используем собственные математические
способности или калькулятор.

Теперь спускаемся ниже. Тут нет кнопок, поэтому
восстанавливаем прежнюю длину - 640. Также видим, что
надо увеличить высоту, но не забываем о том, что справа у нас
есть кнопка, поэтому регулируем высоту так, чтобы
кнопка была вне поля зрения. и снова заливка...



Снова перемещаем слой ниже. Теперь нам надо уменьшить
ширину, чтобы обрезать отдельно кнопку.

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

Подгоняем ширину и получаем это:



Смещаем на 1px влево и вверх и сохраняем картинку.

Далее просто повторяем подгонку остатков и заливку.

Результат разрезания данной картинки можно посмотреть тут

[breathe_me]

Ох, маска ) Всё время забываю о её существовании и пользуюсь обычным ластиком. Спасибо, что напомнила )
А я обрезаю проще... Расчерчиваю на новом слое линии, шириной 1 пикс, как нужно, чтобы были кнопки и потом нарезаю, запоминая при этом лишь (вот тут я обрезала до линии, а тут нужно ещё после обрезать. Вот и всё ) И заморачиваться не надо.
Вот ещё способ: Обрезанные части дизайна переместить на этот же файл, сделать их темнее (хоть варианты) и поставить именно там, где тебе нужно обрезать кусок. Тоесть и готовое не будешь трогать, да и думать не надо, где там что обрезаешь. Тут уже нужно просто размышлять при обрезки сколько нужно оставлять, потому что, например, у тебя дизайны есть очень сложные (из этого урока например)

[Arnae]

breathe_me, ну, лично мне гораздо удобнее своим способом, а тут и глаза могут разбежаться))

[Arnae]

Эффект туч для красивого колорирования
Простой примерчик)

Описание задачи: Колорирование - это хорошо,
особенно, когда его применяют правильно, к месту
и в нужном количестве. Но однотонное колорирование
приедается, а после него и градиентное. Я решила
узнать, что из себя представляют скачанные колоры...
Скачала, ничего особенного не увидела и удалила,
а вскоре в ходе эксперимента нашла неплохой способ
разнообразить колорирование.

Описание работы: Открываем наше изображение.
Мне нравится этак картинка:



Кадрируем её так, как душа пожелает, после чего создаём
новый слой (Ctrl+Shift+N) и заливаем его черным цветом.
Теперь идём по пути:

Filter -- Render -- Difference Clouds
Фильтр -- Изобразить -- Разные облака

Получаем что-то такое. Изображение каждый раз разное.



Снова выбираем опцию Difference Cloud.
Повторяем до тех пор, пока не будет большего контраста
между светлым и тёмным.



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



Настраиваем по вашему вкусу способ перекрытия...



Теперь включаем слой с "облаками" и также выбираем
способ перекрытия. После чего добавляем текст и т.п.

Я с картинкой больше ничего не делала, хотя лучше было
бы её осветлить,придать больше яркости (контрастности)
и обработать в плагине Topaя Vivacity

Итоги:

Анонс:

[KiSkA97]

Тьма, большое спасибо тебе за уроки Подписываюсь, чтобы не пропустить следующий