Меня попросили рассказать, как я рисую обведённые фигурки, как в «Гетвеаре».

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

Ищу фигуру-донора. Например, леонардовского Давида:

Обвожу фигуру: а) если мне нужна векторная фигура для последующего ресайза, то пером; б) если мне нужна полноценная растровая обтравленная картинка, то тоже пером, хотя можно и лассо или стёркой. Аккуратность обводки зависит от целей: а) если картинка будет маленькая, обвести можно полигонально по точкам; б) если картинка нужна большая, то обводить надо аккуратно, двигая усы опорных точек, максимально повторяя оригинал:

Получившейся векторной фигуре задаю стиль слоя «обводка»:

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

В результате получается примерно такое:

Добавляю Давиду трусы. Тоже в маске основной фигуры рисую пером форму трусов. Только фигура теперь не белая, а светло-серая и всё таже серая обводка стилем:

Готово.

Исходник для ковыряния.

Меня попросили рассказать, как я рисую тени.

Расскажу про два типа теней от объекта: который лежит на поверхности и который стоит на ней.

Если объект лежит на поверхности и слегка отстаёт от неё, то тень рисуется очень просто:

Исходник

Для этого я создаю слой под объектом и заливаю его слегка тонированным тёмным цветом (показал на картинке немного криво — сместил объект вверх и влево и сделал его полупрозрачным. Короче, тень точно под объектом нужна).

Далее, беру инструмент размытия и начинаю размазывать границу тени: чем дальше от места соприкосновения объекта и фоновой поверхности — тем сильнее мою.

Готово.

Если объект стоит на поверхности, придётся немного повозиться:

Исходник

1. Беру объект, который должен стать на поверхность.
2. Делаю «острую» ставящую тень. Она делается так же, как и в случае с лежащим объектом. Если у объекта есть массивное «дно», которым он должен стоять, то ставящая тень будет слегка размытой копией этого дна. У меня же объект стоит на носике, поэтому в качестве ставящей тени я использовал пиксельную полоску размытую по краям.
3. Нужно чуть доработать ставящую тень. Размываю в горизонтальном движении то, что получилось в предыдущем шаге и уплотняю тень в месте стыка с носиком объекта.
4. Для того, чтобы нарисовать падающую тень, копирую объект, искажаю его, так чтобы он лёг на фоновую поверхность. Беру инструмент размытия и размываю по всё тому же правилу (чем дальше от места стыка с объектом — тем сильнее). Затем стёркой приглушаю тень по краям (чем дальше тень от стыка с объектом — тем она прозрачнее).
5. Чуть дотюниваю то, что получилось. На этом этапе становится понятно, что ставящая тень слишком далеко убежала от объекта — поднимаю её на пиксель. Также слегка уплотняю падающаю тень в районе носика.
6. Если объект был цветной, неплохо бы бросить от него рефлекс на фоновую поверхность. Для этого рисую какаую-то ромбовидную фигуру цвета объекта, чуть темнее. Блюрю её Гаусом слегка и пару раз размываю в горизонтальном движении (пару, а не один, — чтобы замаскировать страшный результат фотошопного размытия в движении). Затем настраиваю прозрачность и цвет.

Готово.

Кому интересно узнать больше про рисование интерфейсных элементов, приглашаю на московский курс «Интерфейсы для айфона».