Фотошоп. Простые вещи.

[Alastor]

Как обещал, открою серию мини-уроков по всеми нами любимому продукту компании Adobe - Adobe Photoshop CS4.

До этого я пользовался версией CS3, но он не очень удобен при работе с масками, поэтому пришлось раскошелиться на новую версию.

Многие думают, что знают фотошоп хотя бы на 50% его возможностей. Я не буду в этих, назовем это заметками, уроках, описывать создание различных эффектов с помошью этого редактора. Такого добра в инете полно.

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

Итак, заметка первая.

Использование инструментов Slice Tool и Slice Select Tool для разрезки пунктов меню

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

1. Для начала создадим новый файл (Ctrl+N) размером, например, 400х400px покрасим его для контраста в синий цвет.

2. В меню View отметьте пункты Extras, Rulers, Snap:

Теперь напишем сами пункты меню. Для этого возьмем обычный Arial, размер 18pt, цвет белый, расстояние между строками регулируем с помощью панели Character - поставим для примера интервал 24pt.

*Чтобы вам было проще, просто скопируйте эти строки в созданный файл:

Lorem ipsum

Dolor sit amet

Consectetuer

Adipiscing elit

Sed diem nonummy

Nibh euismod

Tincidunt ut lacreet

Dolore magna

Aliguam erat volutpat

3. Выбираем инструмент Move Tool (клавиша V), зажимаем левую кнопку мышки (курсор должен находиться на линейке с делениями) и тащим направляющие со всех четырех сторон.

Так как мы отметили пункт View --> Snap, направляющие автоматически будут "прилипать" к краям текста очерчивая наше меню.

В итоге получится:

4. Далее выбираем инструмент Slice Tool и тянем от верхнего-левого угла меню к правому нижнему (как выделение в виндах). Выделение тоже будет "прилипать" к направляющим, так что не ошибетесь:

Наше меню обведено желтой рамкой:

5. Далее выбираем инструмент Slice Select Tool ( С ), в верхнем меню нажимаем копку Divide, так как у нас 9 пунктов меню, в верхнем поле ставим число 9, смотрим на результат.

Наше меню автоматически поделено на равные блоки:

Если мы щелкнем два раза на любом пункте меню, то можем заранее задать имя нашего графического файла и некоторые другие параметры (если кто не знал, фотошоп предоставляет возможности верстки напрямую из файла):

Продолжение следует, извините, работа.

Edited March 10, 2010 by Alastor

[CEBEP]

по поводу US ARMY, просто ctrl+щелчёк по первому слою с текстом, потом ctrl+shift+щелчёк по второму слою текста, потом выбираем слой с вояками и нажимаем "создать маску", так и слои с надписью останутся нетронутыми и займёт это меньше времени...

Edited September 19, 2010 by CEBEP

[Justnewone]

Вердер, если будет время - можешь рассказать как ПРАВИЛЬНО сращивать слои со всякими эффектами?

Часто бывает - на макете полупрозрачный слой с кучей эффектов - пытаюсь перевести его в векторный объект и потом вроде как можно с нажатым контралом кликнуть, чтобы скопировать - пишет что-то типа "а фиг тебе".

[s0rr0w]

Вердер, если будет время - можешь рассказать как ПРАВИЛЬНО сращивать слои со всякими эффектами?

Часто бывает - на макете полупрозрачный слой с кучей эффектов - пытаюсь перевести его в векторный объект и потом вроде как можно с нажатым контралом кликнуть, чтобы скопировать - пишет что-то типа "а фиг тебе".

Дай пример такого элемента.

[Justnewone]

Дай пример такого элемента.

Щас в личку покажу

[VMSO]

Материал интересный, но с точки зрения внутренней оптимизации, тексты на кнопках надо писать в HTML, а спрайты (кнопки) использовать в таблице стилей - CSS, в качестве фона.

[Temiks]

Добавьте пожалуйста урок "как скруглить углы в фотошоп'е?"

[Great Rash]

Щито?

[workerbeeviii]

Юзаю Photoshop CS3.

При сохранении изображений в JPG, в диалоговом окне Save As есть ползунок Качество, так для веба какие значения можно задавать?

[Great Rash]

55, или 51. Главное чтобы не ниже 51, а там в зависимости от требуемого качества и веса.

[workerbeeviii]

Вот скриншот прилагаю, а то вдруг мы о разных вещах

А значение 51-55, это скажем так общепринятые или распространенные значения для JPG в вебе или только ваше правило?

Edited December 9, 2011 by workerbeeviii

[Great Rash]

Да, я говорил про это.

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

Иногда выбираю 55, потому что нужны более качественные мелкие детали, редко выбираю значения больше 60 (все зависит от конкретного изображения). Но меньше 51 не выбираю никогда.

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

[workerbeeviii]

Как можно за один прием удалить направляющие от Slice, т. е. чтобы разметка Слайсом полностью удалилась. Прятать я умею (Ctrl + H).

[Great Rash]

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

[workerbeeviii]

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

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

[Great Rash]

Сразу за одну комбинацию наверно никак. Если слайсы ставили вы, то можно тупо по истории в начало вернуться.

[workerbeeviii]

Слайсы чужие. А можно как-то выделять несколько слайсов? Попробовал с Ctrl, Alt, Shift не помогло.

[sigma77]

workerbeeviii,

В русской версии - Просмотр/Удалить фрагменты. Как в английской сейчас не скажу, нет под рукой.

[workerbeeviii]

Спасибо, помогло. У меня тоже русская версия стоит.

[workerbeeviii]

Юзаю CS3.

Размер шрифта указанный в Фотошопе (например, 16pt) не соответствует размеру, который отображается в браузере. Как можно вычислить размер шрифта для браузера?

[Great Rash]

Размер шрифта указанный в Фотошопе (например, 16pt) не соответствует размеру, который отображается в браузере. Как можно вычислить размер шрифта для браузера?

Для полного соответствия надо попросить дизайнера рисовать макет в разрешении 96dpi, сейчас у вас в макете наверняка стоит 72dpi, из-за этого вся разница. При 96dpi 1pt = 1px.

[workerbeeviii]

Размер шрифта указанный в Фотошопе (например, 16pt) не соответствует размеру, который отображается в браузере. Как можно вычислить размер шрифта для браузера?

Для полного соответствия надо попросить дизайнера рисовать макет в разрешении 96dpi, сейчас у вас в макете наверняка стоит 72dpi, из-за этого вся разница. При 96dpi 1pt = 1px.

Спасибо.

Без перевода в 96 dpi, придется на глаз ориентироваться?

[Great Rash]

Без перевода можно по формуле посчитать:

16pt * 96dpi / 72dpi =~ 21px

[workerbeeviii]

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

[cyklop77]

научите пожалуйста делать размножающуюся часть фона (tile)?

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

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

Edited December 29, 2011 by cyklop77

[Vin]

Создание прозрачной подложки

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

Щёлкаем правой кнопкой мышки по соответствующему слою и выбираем пункт "параметры наложения".

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

У начинающих, возможно, возникнет вопрос о том, как потом это сверстать. Об этом есть здесь http://chikuyonok.ru/2009/10/decor/.

Edited January 22, 2012 by Vin