9 slice photoshop что это
I tried to create an image in photoshop with 9 equal squares and I failed horribly. Is there a simple way to divide a canvas into equal sizes rectangles without having to work out the numbers?
5 Answers 5
С нуля до Frontend-разработчика. Начало
Всем привет,
произошел небольшой казус в прошлом посте (не знал всех правил редактирования постов, извиняйте), поэтому решил написать новый пост.
Как говорил ранее, все кто начинают обучение в веб-разработке сталкиваются с огромным количеством информации в сети и отсутствием практических навыков. Я не стал исключением.
Даже имея RoadMap и обучающие курсы, происходит так, что мы учим сухую теорию и когда дело доходит до собственного проекта, руки и голова забывает как писать код.
Пересмотрев уйму информации в интернете, а также повторяя код за лектором, решил остановиться и начать свой путь заново, почти с нуля.
Сейчас хотел бы посоветовать небольшой план для людей, которые только начинают свой путь в веб-разработку:
1) Думаю, самый народный способ изучить основы HTML и CSS это воспользоваться бесплатными курсами от HTML Academy.
Затем эти знания можно закрепить пройдя бесплатные задания на FreeCodeCamp. (Basic)
2) Советую скачать бесплатно курс, который писал здесь (п. 2)
!Либо можете найти ссылку на скачивание zip-файла в комментариях в этом посте!
Посмотрев первый модуль, вы уже отточите свои базовые знания + будет настроено пространство.
3) После этого сразу советую изучить препроцессор CSS (хотя его и ставят в середину обучения, считаю его надо учить сразу после основ). Про них можно узнать в модуле 2 - 025 из того курса, либо из любого другого видео на YouTube.
4) Изучаем основы Git/Github. Из курса Модуль 3 - 041, либо на YouTube. В начале необходимо уметь только пушать проекты в репозиторий. имхо)
+ также многие советуют выделять время на прочтение книг и изучения англа. Но я считаю, что лучше получать информацию с помощью интерактивных ресурсов (видео), а также стараться не распыляться на другие темы.
Сложно описать сколько времени у вас займет на обучение данного материала, но в среднем можно предположить 2/3 недели.
После этого можно уже с головой углубляться в верстку.
Мой план обучения на ближайшее время:
1) Практикуем верстку с помощью Bootstrap Grid (ее многие недолюбливают, но я хотел бы закрепить эти знания);
2) Продвинутая верстка с Flexbox без интерактива;
3) Стараемся настолько набить руку, чтобы могли сверстать почти любой проект без интерактива;
4) Основы JS;
5) Поверхностное изучения JQuery и добавления интерактива на сайты.
6) Продвинутый JS;
7) React.js
8) Создаем портфолио;
8) Стараемся устроиться на работу джуном.
План на следующую неделю:
1) Доделать проект из курса (модуль 2);
2) Найти и сверстать самостоятельно пару лендингов с помощью сетки + делать их "резиновыми".
Повторюсь, что постараюсь вести этот блог и создавать новые посты пока что каждую неделю, для структурирования знаний, получения фидбека, и возможно кому-то этот путь пригодиться)
Все получилось сумбурно, я еще дилетант в этом деле, так что рад любой критике и пожеланиям :)
Деление области реза Slice
Выделите любую область разметки и нажмите на кнопочку разделить Divide на панели настроек инструмента. Появится полезное диалоговое окно. Что же оно умеет? На самом деле очень многое, и косвенных применений этому окну масса.
Окно разделения делит область на нужное количество областей. Вы можете разделить область по вертикали и по горизонтали. В обоих случаях вы можете указать либо цельное число, на которое нужно поделить область. Либо указать этот размер в пикселях. В последнем случае Фотошоп постарается разбить область на нужное вам количество пикселей, но если вы не точно указали число, последний кусок может получиться не полным.
Конечно прямым назначением этого диалогового окна является разбивка области на равные части. Но значительно более интересны косвенные возможности или маленькие веб хитрости. Если вы уже делали макеты сайтов, но наверняка знаете как в Фотошопе не просто найти центр рабочей области, и ещё сложнее разбить область на равное количество частей. Чаще всего веб дизайнеры используют инструмент Free Transform, чтобы выделить задний фон и по якорям выделения найти центр.
С инструментом Slice Tool найти центр проще некуда. Просто кликните по пустой рабочей области, нажмите кнопку Device и разделите область на 4 равные части. После этого вытаскивайте направляющие и размечайте область. Порезанные области далее можно либо удалить правой кнопкой мышки и из меню Delete. Либо скрыть
Точно так же я воспользуюсь Slice Tool для разбивки области макета под меню. Ниже я подготовил красную область для условного контента. Теперь я хочу разбить её на 5 областей под кнопки, и вы знаете, что Фотошоп не лучшая программа для разметки и разбивки. Инструментом Slice Tool я нарисую область меню. А далее разобью её на 5 равных частей диалоговым окном Device.
Манипулирование слоями
Теперь несколько слов о манипулировании слоев. При резке сайта вам придется постоянно выискивать нужные слои. При этом большая часть разработчиков, занимающихся версткой, и слабо знающих Фотошоп, ищут слои в вкладке Layers Слои. Что, конечно, логично. Однако удобно это только в том случае если дизайнер позаботившись о вас, бережно разложил все слои по папочкам, аккуратно назвав каждую кнопку. В этом случае найти нужный элемент не сложно. Чтож, не всегда дизайнер поступает так сознательно. В хаотично раскиданных слоях порой невозможно найти ничего, особенно если слоев более ста.
На самом деле рыться в слоях панели Layers вовсе не обязательно. Вы можете точно идентифицировать местонахождение слоя инструментом Move Tool. Как это работает я уже показывал в Видео уроке по инструменту Move Tool. Просто выберите этот инструмент, и кликайте по нужным объектам нажав клавишу CTRL. Фотошоп автоматически выделит нужный слой на панели слоев. Вы можете так же нажать в настройках инструмента галочку Auto Select. Далее необходимо выбрать слои Layers. Тогда вам не придется постоянно нажимать CTRL, однако в этом случае инструмент будет работать постоянно в режиме авто нахождения. Куда бы вы не кликнули, он будет перескакивать со слоя на слой, что не всегда удобно, если вы хотите передвинуть выделенный слой.
Выбрав нужный слой его края тут же будут выделены благодаря настройке Views > Show > Layer Edge, которую мы включили несколько ранее. Так вам будет значительно проще настроить направляющие и нарезать сайт. Теперь, когда подготовления закончены, переходим к самой резке.
Инструмент Slice Select Tool
Slice Select Tool — управляет вашими разметками. Этим инструментом вы можете передвигать области, выравнивать, делить на двое, сливать и присваивать различные настройки, полезные для создания HTML прототипа. Постепенно мы рассмотрим все из них.
Но для начала несколько полезных советов.
Создавая области реза ручным способом вы создаете активные и пассивные области. Пассивные области возникают автоматически, точно также, как если бы вы вырезали ножницами квадратик из чистого листа бумаги. Остаток бумаги и есть пассивные области. Эти области не будут сохраняться как графика, но любую пассивную область можно превратить в активную. Как? Для демонстрации я опять разметил макет направляющими, но области нарезки нарисовал вручную.
Инструментом Slice Select Tool выберите любую пассивную область реза, а на панели настроек нажмите кнопку Promote.
Некоторым пользователем может мешать обилие областей разметки. Пассивные, активные, вы не хотите видеть все области, хотите видеть только то, что будет сохранено отдельными картинками. В этом случае просто нажмите кнопку Hide Auto Slices и все пассивные области разметки будут скрыты.
В некоторых ситуациях вы хотите доработать дизайн, а области резки начинают мешать. В этом случае выберите View > Show > Slices. И области разметки пропадут. Как только вы активируете инструмент Slice Tool они опять появятся.
For Photoshop CS6 or older
Choose View > New Guide , Click Vertical , Enter 33.33%, hit OK.
Choose View > New Guide , Click Vertical , Enter 66.66% hit OK.
Choose View > New Guide , Click Horizontal , Enter 33.33%, hit OK.
Choose View > New Guide , Click Horizontal , Enter 66.66% hit OK.
Not the answer you're looking for? Browse other questions tagged adobe-photoshop or ask your own question.
Related
Hot Network Questions
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.5.11.42086
Любому веб дизайнеру приходилось нарезать сайт для верстки в HTML+CSS. Заняты тем же самым не только веб дизайнеры, но и верстальщики-программисты. Я давно заметил, что как только дело доходит до резки сайта, дизайнеры и программисты достают из кармана инструмент выделения Rectangular Marquee Tool, и начинают поочередно выделять каждый элемент графики. Копируют, делают Paste в новый фаил, сохраняют. Примерно в таком прогрессивном темпе происходит резка всего макета.
Я и сам нарезал сайт точно так же. Старое и надежное всегда предпочтительнее нового и непонятного. Но от старых привычек надо же когда-то избавляться. Не зря же в Фотошопе уже лет 15 существуют прогрессивные способы резки сайта. Не такие прогрессивные, как в Fireworks, конечно. Но тоже ничего. В этом уроке я возьму один из своих недавних макетов веб сайтов и нарежу его инструментом Slice Tool.
Как нарезать сайт в Фотошопе?
Правильную резку сайта стоит начать с направляющих. Направляющими являются пунктирные линии, которые помогают размечать макет в Фотошопе. Работая с ними нужно понимать, что направляющие никак не прикрепляются к краям пикселя. Если вы установите направляющую не между пикселей, а к примеру, по середине пикселя 50%+1% то при выделении вы зацепите этот лишний ненужный вам пиксель. Чтобы избежать я применю несколько нехитрых трюков.
- Убедитесь что у вас включены Views > Extras. Эта настройка отвечает за все вспомогательные метки одновременно.
- Включите линейку Views > Rulers, из линейки вы будете доставать направляющие.
- Включите Views > Snap. В общем виде это значит, что ваши направляющие будут крепиться к слоям, слои к направляющим, или друг к другу. В общем, все будет немного притягиваться как магнит. Это поможет вам быть более точным при работе с направляющими.
- Далее включите настройки Views > Show > Layer Edge, эта настройка будет показывать края слоев, при выделении.
- Views > Show > Guides — видимость самих направляющих.
- И Views > Show > Smart Guides. Они тоже не будут лишними.
Скорее всего большая этих настроек и так включена. Но проверить лишнем не будет.
Сохраняем нарезанные картинки
Чтобы сохранить нарезанные картинки переходите в File > Save for Web. И это самое основное диалоговое окно для создания будущего прототипа, о котором мы поговорим в следующих статьях. Но сейчас мы просто сохраним разом нарезанные картинки.
В диалоговом окне вы увидите ваш макет. Вы так же увидите области разметки. Выберите инструмент Slice Select Tool и выделите такую разметку. В поле с правой стороны вы можете настроить опции графики, конкретно для этого участка выделения. Большую картинк имеет смысл сохранить в JPG, логотип в PNG или GIF. Все настройки нужно выставить заранее, пройдясь по всем областям разметки.
К сожалению Фотошоп не может сохранять подобные изображения с полупрозрачностью. Надо понимать, что эти инструменты были внедрены в Фотошоп во времена IE5, а то и раньше. Поэтому если вы все же хотите сохранить логотип, или другие части дизайна с полупрозрачностью, вам нужно вернуться в макет, и отключить в слоях задний фон.
Теперь нажимаем на Save. В диалоговом окне сохранения в Формате выбираем Images Only. В настройках Default. В свойствах резки вы можете выбрать области для сохранения из Всех кусков, активных кусков Users Slices или только тех кусков, которые вы выделили в окне Save for Web.
Лично я выберу Selected Slices, потому что я хочу сохранить очень определенные области разметки, так как мне нужно несколько раз вернуться к макету, чтобы отдельно сохранить графику на полупрозрачном фоне. Всего несколько минут такой работы и графика нарезана.
Надеюсь эта статья оказалась для вас полезной и вы нашли в неё что-то новое. Теперь вы без особого труда сможете автоматизировать нарезку сайта в Фотошопе. Удачных экспериментов!
При создании html-макета страницы иногда приходится иметь дело с множеством однотипных картинок. Например, выпало верстать фотоальбом. Нужно нарезать порядка двадцати «превьюшек», потом их всех поименовать и сохранить. Рутина.
Для того, что бы быстрее разделать со всем этим — используем несколько хитростей.
Нарезка
Выделяем инструментом Slice Tool одну картинку. А потом, не отходя от кассы, нажимаем Alt и тащим слайс до следующего пациента. При необходимости корректируем форму слайса. Двадцать секунд — и всё порезано:
Сохранение
Каждый слайс должен иметь своё собственное, уникальное и вменяемое имя. Для этого нам нужно дважды кликнуть по слайсу и вызвать Slice Option. Но, если мы хотим ускориться, то правильнее будет сначала всё порезать, а именовать слайсы уже в Save for Web.
Почему? Потому что в этом случае нам придётся делать меньше действий: кликаем по слайсу, нажимаем Tab и, вуаля, попадаем на имя слайса. В то время как в нормальном режиме нам придётся либо четыре раза нажимать Tab, либо таскать мышку туда-сюда.
Однако у нас с вами целый полк из изображений, которые, скорее всего, будут нужно задать имя вида some-name-[n]. И в этом случае можно вообще не влезать в настройки слайса.
Выделяем нужные нам слайсы и жмём главную кнопку — Save. В окне сохранения указываем Selected Slices и выбираем в списке Settings пункт Other.
В окне Output Settings заходим в раздел Saving Files и здесь конструируем удобное для нас имя файла. Конструктор серьёзный, деталек много, так что никто не уйдёт обиженным.
Имея твёрдую руку вы затратите на всё это действие не больше минуты и получите пачку картинок. А о большем и мечтать сложно.
Маленькое вступление. Уверен, что каждый, кто использовал питон некоторое время, полюбил выражения в прямоугольных скобочках. В этой статье я хочу от «а» до «я» рассказать о срезах. Для начала немного о терминологии: в английском языке их называют «slice». Я буду называть их то «слайсами», то «срезами», как в моем понимании этого слова. Будем все учиться на примерах. Для меня, такой метод был бы самым удобным, быстрым и простым.
Для начала, самое распространенное применение. Создания копии последовательности или ее части.
Рассмотрим срез как часть последовательности. Например, несколько срезов со списка:
Это ещё не все,
Далеко не все знают, но могут быть слайсы с тремя параметрами:
Все эти действия можно проворачивать со строками, кортежами и списками.
Совсем забыл, спасибо xeningem:
Но и это ещё не все, есть несколько действий со срезами, которые можно делать только со списками (ну, почти). Дело в том, что они единственные из базовых последовательностей, которые могут изменяться, и, для которых, имеет значение порядок (нельзя делать срезы из словарей и множеств/наборов). Дальше пойдет разговор о срезах, которые изменяют последовательность.
Слайсы можно удалять, например:
Ещё можно вставлять элементы:
В варианте замены:
Ну, или вариант вставки попроще:
Если мы хотим создать класс, с которого можно снимать срезы? Проще некуда, для этого есть два пути:
Неправильный:
1) Переопределить фунции __getslice__, __delslice__ и __setslice__. Но это устаревший метод (в 2.0 помечен как deprecated)
И правильный:
2) Переопределить __getitem__, __setitem__ и __delitem__.
С первого взгляда все кажется предельно простым, но если присмотреться, то __getitem__(self, key) – получает только один параметр, key, а у среза у нас может быть целых 3 числа… Все предельно просто: в случае, когда кто-то пытается срезать кусочек от нашего объекта, значением key функция получит объект типа slice:
Конечно, пример очень символический, но понять можно: у объекта класса slice есть три свойства: start, stop и step, соответствуют числам из скобок среза. Нужно быть внимательным, если число пропущена, то значение будет None, например [::] будет slice(None, None, None) а [:-3] будет slice(None, -3, None).
Замену/вставку и удаление срезов делаем по аналогии.
Как упражнение, можете попробовать перегрузить словарь, чтобы с него можно было делать срезы. В питоне3 это будет начинаться как class SliceableDict(dict):
Ну, вроде все, что есть о срезах.
Если что пропустил с удовольствием выучу и допишу.
Upd1: накопил 5 кармы, перенес в питоний блог. Спасибо.
Upd2: Спасибо за комментарии, исправился, дополнил.
Наверно каждый сталкивался с тем, что бы в Photoshop нарезать много картинок.
Сейчас я покажу как это сделать быстро и без всякого труда.
Для примера я скачал Free psd Template. Загуглил и перешел по первой ссылке.
Скачал какой то Surfing Free Theme.
Открываем и видим огромное наличие картинок, а значит нам нужно дать им название, вырезать. И сделать это быстро.
С такой проблемой чаше всего сталкиваются верстальшики, и обычно на этапе обучения не знают как делать это правильно. Поэтому даже если вы уже давным давно делаете каким то другим способом, узнав этот вы сможете сравнить.
Есть прекрасный инструмент Slice Tool (горячая клавиша 'C')
Как с этим работать ? Зажимаете левой кнопкой мыши и выделаете область. Затем с выделенной областью (готовым слайсом) вы можете - работать. К примеру поменять Название. Нажав два раза на область слайса.
Но согласитесь делать так с каждой картинкой очень долго и муторно. Как их сохранять я покажу далее. Сейчас нас волнует вопрос. Как быстро Отслайсить картинки ?
Выделять каждую картинку таким образом долго. Скорее всего есть возможность Отслайсить сразу Слой. Да такая возможность есть.
Выделаем нужную нам картинку
В данном случае картинка под маской, поэтому нам надо выделать саму маску. Это base слой.
Вот он выделенный слой, я его специально выделил. Ctrl + нажать на сам слой. (Выделил чисто для наглядности)
Дальше переходим в панель управления, где Layer - > New Layer Based Slice
И вуаля готовый slice. Но есть несколько проблем.
1. У нас нет hot key, что бы делать это быстро.
2. Выделив данный slice мы не можем поменять его параметры (ширину, высоту. )
Для того что бы открыть возможность редактирование необходимо данный slice сделать User Slice-ым.
Для это в режиме slice (горячая клавиша C). Жмем правой кнопкой мыши на slice область и нажимаем Promote to User Slice и теперь можем менять размеры slice.
Но согласитесь это довольно НЕУДОБНО делать с каждой картинкой, хотя нам не надо выделять область вручную. ЧТО же делать ? Есть выход. Назначить горячую клавишу ! Но, она будет делать только Based Slice, размеры которого мы не сможем отредактировать и вообще с ним будет не удобно работать в таком варианте. Плюс где то нам надо выделать саму картинку, а где то маску под которой находиться картинка.
Ведь все что нам надо, это выделил картинку - > нажал горячую клавишу и получил slice.
Это также можно реализовать.
Для этого нам понадобится окно Actions (Alt + F9)
Вот уже готовые actions
Далее я покажу как их сделать. Но как они работают ? Как я и писал ранее. Вы через выделение
Выберете картинку и затем просто жмете F2 и получаете готовый User Slice. К примеру я выделил 5 картинок ну за секунд 15, а то и меньше.
F3 - использую для того что бы выделить картинку и если я вижу что она под маской, значит мне надо опуститься на слой ниже и выбрать слой маску, но что бы не делать этого ручками - я записал это действие в action. Поэтому за считанные минуты я нарезаю все картинки. И в свою очередь могу заменить эту картинку и просто пересохранить ее.
Как сделать эти actions. Скажу сразу я выбрал F2 и F3 потому что они рядом и ими удобно быстро пользоваться, для F4, F5, F6 и так далее. Забил другие action которыми тоже часто пользуюсь.
Итак мы решили создать новый action.
1. Для начала я создал папку, что бы группировать свои action по разным папкам.
Создадим папку Example и подготовимся к записи action
Action по факту просто повторит все то что вы сделаете от исходной точки.
Поэтому выбираем нужную картинку через Move Tool
Теперь начинаем записывать action
Называем свой action и выберем hot key, у меня F2 выбрать не получилось, потому что я его уже занял, но нам предложили и другой вариант Shift + F2
Нажимаем Record и начинается запись, активная красная кнопка говорит, что запись идет
Теперь делаем то что я описывал ранее
Сделав это увидим что уже записалось одно действие
Далее выберем режим Slice в левой панели или нажимаем горячую клавишу C
Жмем правой кнопкой мыши и делаем Promote to User Slice
И нажимаем стоп
Теперь экшен готов и мы можем его использовать.
Теперь выделаем нужные нам картинки с зажатым Shift и жмем F2 и создаются сразу Slice для всех выделенных картинок или по одной картинки. Далее можем назвать их так как нам нужно.
Потом сохраняем через Ctrl + Alt + Shift + S.
Переходим во вкладку Original и выделаем нужные слайсы через зажатый Shift, выбераем нужный формат и качество и нажимаем Save.
Выберем куда сохранить и обязательно указываем Selected Slices, а то накидает вам все слайсы которые есть
В то место которые мы выбрали, автоматически создать или сохраниться в папку images
Могу сделать описание и других популярный экшенов. Возможны ошибки и опечатки. Сразу извиняюсь. Просто хочу поделиться опытам и знанием. Если есть вопрос и поправки - пишите, буду рад ответить.
P.S на практике сделать это намного проще, чем я описал. Но научившись делать экшены, можете сильно упростить работу с Photoshop.
Инструмент Slice Tool
После того, как все области намечены направляющими, выбираем инструмент Slice Tool из панели инструментов. Этот инструмент Фотошопа представлен двумя инструментами:
- Slice Tool — вырезает графику на куски, а точнее, только определяет места, которые уже потом будут сохранены как разные изображения.
- Select Slice Tool — из названия понятно, что этот инструмент выделяет уже «нарезанные» области с целью поменять настройки. Почему два инструмента нельзя было объединить в один?
Кстати, я не говорил, что инструмент Slice Tool появился в Фотошопе, в ходе конкуренции с злосчастным Fireworks, с целью отбить у последнего часть рынка и представить веб дизайнерам, хоть какие-то полезные для них инструменты. С тех пор возможности инструмента Slice Tool практически никак не изменялись и не дополнялись. После покупки Adobe компании Macromedia, в пакете которой находилась программа Fireworks, все полезное для веб дизайнера продвигается строго в Fireworks. Последняя версия Фотошоп CS6 не принесла в инструмент Slice Tool никаких нововведений. Поэтому я со спокойным сердцем работаю в CS5.
Выбрав инструмент Slice Tool, кликаем по кнопке Slice from Guides, что означает — нарезать на основе направляющих. Для этого мы их и создавали. И это самый простой способ создать области реза инструментом Slice Tool. Единственный его минус заключается в том, что Фотошоп не знает какие именно области являются активной разметкой, а какие области вспомогательные. Более того в нашем макете получается слишком много областей пересечения. У нас есть направляющие для Логотипа, но направляющие снизу для формы ввода режут логотип на несколько частей.
Тоже самое проделайте и с другими областями разметки Slice.
На самомом деле наш дизайн не совсем подходит для разметки на основе направляющих. Так как в нем слишком много элементов требующий чистки. Слишком много областей, которые затем придется слить. Слишком много пересекающейся графики. Кроме того возникает и другая проблема. Фотошоп по умолчанию делает все области разметки активными, в то время, как вам нужны лишь некоторые. В этом случае имеет смысл воспользоваться ручной резкой.
For Photoshop CC or newer
Choose View > New Guide Layout. and enter the 3 columns and 3 rows, hit OK.
Yes. You can use guideguide . It's a quite simple extension that you can install on photoshop. From then on just make columns(3) and lines(3) (in your case) and you have your 9 spaces in your canvas.
EDIT: Curently PS CC 2017 as a "New Guide Layout" under View > New Guide Layout , that allows to do the same as guideguide, though not so fast.
Right click on the crop tool, choose the slice select tool, right click on the image, divide slice, insert the vertical and horizontal number of slices and it is done.
- Open the image file. Menu > File > open
- Select "Slice Tool" from Tool box
- Right click on "Slice Tool", there are 3 options. Click on "Select slice tool"
- You will see, small rectangle icon on the left corner of image
- Right click on rectangle icon. Click on "Divide slice" option
- A box of "Divide slice" will open. You will see 2 options. Horizontally and vertically
- Select any of them or both.
- Now you will find that, image is of equal size.
- Save the image. You are done
Go to the top menu in Photoshop and select: Edit > Preferences > Guides, Grids & Slices . In the preferences box that appears, go to the third option, "Grid". There's a label for "Gridline Every:" with a text box and a drop down menu. Enter 33.33 in the text box and choose "Percent" from the drop down menu. For "Subdivisions" choose 1 .
Then show your gridlines. You can do this by going to the top menu and choosing View > Show > Grid or clicking CNTRL and the quote key on your keyboard (in Windows). This will show your grid with nine equal sized squares. Technically there will be a tiny amount of extra space (maybe 1-2 pixels) on the bottom row and right column.
You can add guides on those gridlines or you can just add your squares there.
Настройки области Slice
Последним диалоговым окном в этой статье пожалуй будет окно настроек самой области разметки. Я не буду углубляться в это диалоговое окно, потому что оно затрагивает совершенно отдельную тему: моделирование в Фотошопе реального рабочего прототипа на HTML+CSS. Более того, в Фотошопе вы можете даже сохранять XTML фаилы с скриптами анимации. Что это значит? Это значит что вы нарезаете сайт, и по ходу дела сохраняете прототип верстки.
Прототип верстки — это сгенерированная квази верстка. Её цель простая, показать клиенту вид дизайна в браузере. Конечно Фотошоп весьма слаб в создании таких прототипов. С тех пор как Адобе заполучила Fireworks все заточенные под веб разработки велись в нем. И я не уверен что вы когда-либо будете пользоваться настройками прототипа в Фотошопе. Не очень уверен что этим вообще нужно пользоваться именно в Фотошопе. Но тем не менее, если вы сделали дизайн, разметили его инструментом Slice Tool, вам останется всего пара кликов чтобы сгенерировать такой прототип. Подробнее об этом я расскажу в следующих статьях.
Там же мы подробно разберем и диалоговое окно настроек, которое предназначено для автоматизации различных общих HTML настроек и тегов, вроде тега Alt и так далее. Ну и конечно в этом окне вы определяете название вашей графики. Названия вам стоит поменять сразу, иначе все ваши картинки буду названы по умолчанию.
Разметка на основе слоя
Ещё один интересный и быстрый способ создать разметку, без особых усилий — это создать разметку на основе конкретного слоя. Особенно хорошо этот способ подходит для не сложных прямоугольных слоев. Для этого вам нужно выделить нужный слой на панели слоев Layers. А затем открыть Layers > New Layer Based Slice
Фотошоп вмиг очертит ваш слой областью реза.
Размечаем макет направляющими
Включите линейку View > Rulers и вытягивайте направляющие мышкой из линейки. На самой линейке установите Пиксели. Для этого кликните по линейке правой кнопкой мыши и из выпадающего меню выберите Pixels. Далее вытягивайте направляющие одну за другой и размечайте ваш макет. Работайте инструментом Move Tool, кликайте по элементам дизайна нажав CTRL, чтобы подсветить края слоя.
При разметке макета направляющими Guides важно выделить все элементы графики, которые вы хотите получить при резке. Если в макете есть картинки, разметьте их со всех сторон. Логотип, большой слаидбар и даже полоску текстуры, если таковая имеется. Все старые направляющие, которые использовались для создания дизайна макета можно убрать. Дизайн ведь уже создан.
В результате у нас должна получиться следующая картина.
Ручная резка сайта Slice Tool
В других случаях вам может подойти ручная резка Slice Tool. В этом случае вы просто выбираете инструмент Slice Tool, приближаете рабочую область поближе, чтобы видеть пиксели, и инструментом Slice Tool начинаете размечать ваш макет. Такой способ разметки может быть удобен в том случае, если дизайн слишком «творческий». Если меню находится не на одном уровне, а к примеру, на разной высоте. Если графика накладывается друг на друга. В этом случае лучше размечать макет без направляющих.
На панели настроек при ручной разметке вам доступны следующие функции:
- Normal — обычная стандартная разметка. Курсор на рабочую область и рисуете сколько нужно.
- Fixed Aspect Ratio — создает области разметки в соотношении 1:1, 2:1 и так далее.
- Fixed Sized — создает разметку определенного размера. Вписываем пиксели, получаем область нужного размера.
И это все что умеет инструмент Slice Tool. Я только что рассказал о всех его возможностях в паре абзацев. Более интересный инструмент Slice Select Tool, к которому мы сейчас и перейдем.
The Homer Drums - браузерная игра
Сначала небольшая видеодемонстрация того, о чём пойдёт речь:
А теперь, собственно, само описание.
Видеофрагмент серии был сконвертирован в gif и импортирован в Photoshop, где каждый кадр стал отдельным слоем. Рисовать я не умею, зато умею пользоваться инструментами “Перо” и “Заливка”:) В видео ударная установка никогда не умещалась в один кадр целиком. В фотошопе мне удалось собрать все части воедино. Неподвижные элементы ударной установки образовали фон для игрового поля сайта. Каждого из семи “Гомеров” обводил покадрово. Таким образом, было получено семь наборов спрайтов. Кое-что всё-таки пришлось дорисовать самому: одну из ножек для левой барабанной стойки и рот для Гомера с бас-бочки.
С извлечением и нарезкой звуков никаких трудностей не возникло.
На сайте анимацию и звук запрограммировал при помощи jQuery (JavaScript).
Я практически не занимался адаптацией сайта под мобильные устройства - лучше всего он будет смотреться на мониторе мака или ПК. Если игровая область не помещается на экране целиком, то просто немного уменьшите масштаб страницы при помощи Ctrl + “-“. Если соотношение сторон смартфона/планшета приблизительно 16:9, то и на них ударная установка будет выглядеть вполне достойно.
Данная разработка сделана чисто по приколу и никакой смысловой нагрузки не несёт :)
Приятной игры!
Иерархия Slice областей
Области реза находятся по отношению к друг другу в жесткой иерархии. Точно так же как и векторные контуры Фотошопа внутри векторной маски. Конечно у вас нет дополнительной панели «Слоев» чтобы перемещать области реза, но она и не нужна. На панели инструмента Slice Select Tool у вас следующие кнопки.
- Bring to Front — перемещает на самый верх.
- Bring Forward — перемещает на 1 слой вверх.
- Send Backward — перемещает на 1 слой вниз.
- Send to Back — перемещает на дно.
Слово слой в данном случае не очень корректно, речь идет о области реза Slice.
Использовать данные опции стоит в том случае если у вас есть пересекающие друг друга области реза. При этом, область выше будет сохранена целиком, а область ниже, будет поделена на соответствующие части. К сожалению Slice Tool не способен сохранять полупрозрачные области, или выцеплять слои. Но об этом я расскажу позже.
Дизайн контактных форм: поля ввода
Выравнивания областей разметок
Ещё одной функцией Фотошопа является выравнивание областей реза по отношению друг к другу. То есть вы можете выравнивать группу областей по левой стороне, по правой, по центру, выравнивать расстояние между ними.
Для этого вам конечно нужно выделить несколько областей разметки инструментом Slice Select Tool. После этого воспользоваться функциями выравнивания на панели настроек. Описывать каждую функццию в рамках этой статьи я не буду, так как эти опции уже неплохо описаны в статье Все об инструменте Move Tool. В инструменте Slice Tool они работают точно так же.
Читайте также: