В этой статье я расскажу, а вернее будет сказать покажу, как нарисовать вот такую штучку:
.
— Ну и что такого? — спросите вы. Ключевое слово здесь «растягивающееся».
.
Любой дизайнер интерфейсов должен в своем арсенале иметь набор готовых GUI-элементов, с помощью которых он легко может накидывать экраны. А для дизайнеров айфоновых и айпадовых приложений сам бог велел.
Немного лирики:
Фотошоп уже давно сдает свои позиции на рынке программ для рисования интерфейсов. Первая проблема это слои-слои-слои. Вторая это скругленные углы. На самом деле проблем гораздо больше и когда-то я уже описывал их.
Возвращаемся к нашему уроку.
.
Первое, что мы должны сделать это нарисовать подходящий прямоугольник.
Видите панельку Appearence? Она не спроста тут показана. В этой панельке мы будем делать практически все действия.
И так закругляем углы, применяя соответствующий фильтр.
Теперь мы должны применить к белой заливке (именно к заливке) фильтр трансформацию — сдвиг на пискель вниз. И сделать ей прозрачность в 60-70%. Это будет белый блик нижней грани нашего поля.
Теперь начинается магия. Добавляем поверх нашей белой заливки новую, с заранее выбранным цветом. Цвет должен быть добавлен в Swatches и обязательно с галочкой Global — это избавит нас потом от рутинных процессов и позволит менять цветовые гаммы во всем макете прямо на лету. (Фотошоп соси!) Это будет цвет нашей кромки поля.
Нам нужна еще одна заливка, которая будет выкаршена 50% -ый цвет нашей кромки. К этой заливки нужно применить фильтр Offset path в -1 пиксель.
Это уменьшит внутрь нашу заливку ровно на пиксель внутрь.
.
А теперь еще одна заливка (да сколько можно?!?) Её цвет 30% от кромочной. У нее уже два фильтра Offset path в -2 пикселя и Transform со сдвигом по вертикали на 1.
А теперь самый крутняк. Нам надо подготовить маленький паттерн для заливки следующей заливки (простите за тавтологию) . А выглядит он вот так:
Это сильное увеличение как видно объект состоит из четырех прямоугольников шириной почему-то в 6 пикселей. На самом деле можно сделать и в один и в 100, разницы нет — ведь это паттерн. Для меня это почему-то 6 — видимо мне так удобней. Самый нижний прямоугольник высотой в 1 пиксель и белым цветом. Второй тоже в 1 пиксель и сереньким цветом. (не забывайте про Swatches и Global!) Третий на половину светлей второго. И последний, четвертый, самый важный, высотой в 44 пикселя — по сути это высота вашей строки ввода в нашем поле. Цвет для нее следуют выбрать немного серенький? Почти белый, но не белый :-)
.
Теперь эту нашу конструкцию надо засунуть в Swatches, тем самым превратить её в паттерн. Как это сделать можно глянуть здесь.
.
Возвращаемся к нашему супер объекту. Остался один маленький шаг. Это добавление еще одной заливки! (о ужас). К этой последней заливочке мы применяем наш паттерн:
Паттерн встает не так как нам нужно. Исправить это занимает 5 секунд. Выделяем наш объект, идем в панельку Transform, а там в дополнительное меню. (см. рисунок ниже). Выставляем галку Transform pattern only и сдвигаем по вертикале наш паттерн внутри объекта.
Не забудьте потом галочку в панеле поставить на Transform object only. Вот и всё! Наше резиновое поле готово! Его можно трансформировать как угодно, тянуть за любой край, делать любой высоты и ширины. Вот вам три сразу:
Вы спросите зачем такие долгие мучения, ради такой простой штучки? Ответ прост: эта штуковина делается не на раз, а на много последующих проектов. Этим же способом можно делать разные ниспадающие меню и еще кучу всего. А еще делается это очень быстро, я трачу на создание такого поля минуту.
.
