Готовим файлы для Фотошопа на Creative Market



Всем здравствуйте!

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

Но исследуя наборы других авторов я уловила тенденцию к тому, что формат psd пользуется популярностью. К тому же, мне стали писать покупатели и просили помочь с редактированием файлов в фотошопе ввиду отсутствия иллюстратора.

И я все-таки решилась покопаться более серьезно в этом вопросе. Хочется, что бы покупатель был доволен продуктом и у него не было нужды обращаться ко мне за советом о том, как же пользоваться моими файлами?

Было немного страшно и лениво: я очень давно не открывала фотошоп, а значит придется опять учиться. А еще я понимала объем работы по подготовке файлов.

Далее я имею ввиду только векторную графику без эффектов (градиент тоже можно настроить, но это на ваше усмотрение), то есть простые фигуры.

Представьте, что вы вы покупатель и у вас нет иллюстратора. Вы берете набор из паттернов и открыток, но… максимум что вы получаете — элементы с прозрачным фоном. И если вы обычный пользователь, то настроить маску и перекрасить объекты вам скорее всего будет не по плечу. И вы практически ничего не можете с этим сделать. Наша задача сделать все максимально удобно:

  • Разделить элементы
  • Дать возможность перекрасить элементы в другие цвета
  • Сделать понятную систему слоев

Объем работы при этом достаточно большой и занимает порой больше времени, чем само оформление. Ведь вам по сути нужно «порезать» каждый векторный элемент, перенести с иллюстратора все по отдельности, да еще и так, что бы все совпадало. Так же под каждый отдельный элемент вы должны сделать маску-перекраску :)

Если вы все-таки решитесь сделать этот шаг к усовершенствованию качества ваших продуктов, то первый мой совет — выносите дисплей со слоями так, что бы он стал длинным-длинным))

Итак, я сделала набор открыток в иллюстраторе



Открываю фотошоп и создаю две папки в слоях (по видам открыток)



Захожу в иллюстратор и два раза кликаю на открытку (все ее элементы сгруппированы и открывается общий Isolation Mode)



Я переношу на отдельные слои темный фон, белую рамку и «шум», которые являются общими для ряда открыток. Так же создаю папку для элементов открытки



Возвращаюсь в иллюстратор. Когда вы будете переносить элементы из иллюстратора в фотошоп (cmd/cntrl+c — cmd/cntrl+v), то они не будут нужного масштаба и положения на артборде. Все центрируется и растягивается. Это создает проблему для точной сборки всех элементов. И я придумала лайфхак!
Нужно создать в иллюстраторе фигуру (у меня квадрат) по размеру открытки с прозрачными заливкой и краями.

Эта фигура послужит гарантом того, что наши элементы будут в правильном масштабе и в правильном положении относительно других.





Далее вам нужно просто скопировать элемент с рамкой и сделать копи-паст в фотошоп. В моем случае есть сложный элемент, который находится под маской и его края заходят далеко за рамку. Есть два пути: обрезать маску или покрасить обводку рамки в цвет. Я решила пойти сложным путем))

Выделяю рамку, делаю черную обводку. Выделяю рамку и объект вместе



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



Масштабирую по размеру артборда



Когда у вас маленький объект, так же просто выделяете рамку и этот объект вместе, вставляете в фотошоп, масштабируете.



Таким образом у нас все на своих местах!



Нам осталось только сделать так, что бы человек мог их перекрасить. Для этого мы создаем новый слой, который должен стоять ВЫШЕ нужного объекта. На этом слое по размеру артборда или больше создаем фигуру (например квадрат) с нужной нам заливкой. Далее кликаем правой кнопкой по слою и выбираем Create Clipping Mask (Layer — Create Clipping Mask). И все! Можно дважды нажать на слой с заливкой и выпадет окошко с выбором цвета.





Тоже самое следует делать, если вы продаете векторный шрифт и подобные наборы. А еще таким способом создаются Криэйторы :)

Желаю вам удачи и делитесь своими лайфхаками.

27 комментариев

❄ Летта
Даш, чтобы показывались гифки их можно через загрузчик изображений вставить как ссылку, а не загрузить как обычно. Только учти, что если уберешь из дропбокса, то здесь тоже не будет показываться.
Daria Miazhevich
Я пробовала, они не анимируются (
Сейчас попробую еще раз
❄ Летта
Если не получится, я тогда попробую отредактировать.
Daria Miazhevich
Получилось! Спасибо :)
Я просто сначала загрузила в папку ЖЖ и наверное проблема в этом была.
❄ Летта
У меня чо-то не показывается( Топот котов посмотрит, как можно исправить.
Daria Miazhevich
Спасибо большое kissing_heart
Файлы нужны?
❄ Летта
Нет, у тебя же в посте есть ссылки на дропбокс, главное их не убирай)
Топот Котов
Привет, ссылка не та. Нужно нажать «поделиться» -> «создать ссылку» и использовать ее.
А чего кстати не в сообщество?
Daria Miazhevich
Исправлю)
Я сначала написала в сообщество, потом подумала, что здесь больше про функции фотошопа и перенесла в свой дневник :)
Daria Miazhevich
Ну вот, знаки вопроса)
Топот Котов
Там нужно dl=0 на dl=1 поменять. Исправил. Вообще дропбокс не очень удобен как хостинг картинок.
Daria Miazhevich
Спасибо большое!!!
Честно говоря, первый раз со всем этим сталкиваюсь, поэтому теряюсь немного. Дропбокс — первое что в голову пришло) А что лучше в следующий раз использовать?
Топот Котов
Да их очень много, честно говоря не знаю какой лучше. Тот же радикал можно, например, только не использовать их коды с рекламой, а копировать ссылку по правому клику на картинке — «скопировать ссылку на изображение» и ее вставлять. Насколько я знаю картинка будет удалена только если за год не будет ни одного просмотра.
Daria Miazhevich
Спасибо за наводку)
IonovaMargarita
ох, ну вообще вообще!!! СПАСИБО!!!
Daria Miazhevich
blush
zmeizza
  • zmeizza
Спасибо! Хочу предложить альтернативный способ раскрашивания слоев. Вместо дополнительного слоя с маской можно просто применить к нему эффект Color overlay. Для этого нужно 2 раза кликнуть на строчке слоя, не там где название, а на сером участке. И в выпавшем окошке с эффектами выбрать нужный. Будет все то же самое, но слоев в 2 раза меньше.
Daria Miazhevich
Но ведь в таком случае мы получаем цвет в режиме Overlay, он не будет идти чистой заливкой. Я знаю что такую функцию применяют, когда нужно перекрасить сложный объект с тенями и полутенями. Или я не права?
zmeizza
  • zmeizza
Нет-нет, это только эффект так называется, color overlay, наложение цвета. Там можно выбрать любой режим смешивания и прозрачность. При режиме смешивания normal и непрозрачности 100% будет как раз ровная заливка нужным цветом. Попробуйте, это очень удобно, я постоянно этим пользуюсь.
zmeizza
  • zmeizza
  • Отредактирован:
Кстати, эти эффекты можно перетаскивать со слоя на слой, если просто так перетащить, то он переместится, а если с нажатым Alt — продублируется. Для одинаковых объектов можно не повторять настройку каждый раз. А можно его не к слою, а к целой группе применить.
Daria Miazhevich
Спасибо, буду пробовать))
Daria Miazhevich
Я попробовала) Да, действительно хороший результат дает. Но для покупателей, которые «не шарят» это очень сложно. Нагляднее сделать новый слой и тыкнуть туда носом воочию показать где менять цвет
Ksania Designer
Потрясающий урок! У вас очень интересные и симпатичные работы! christmas_tree
Daria Miazhevich
Спасибо)
Jana M
  • Jana M
Очень интересно! Пригодиться в работе…
Mari Demidova
есть еще вариант :)
разнести в иллюстраторе все элементы по разным слоям и сделать экспорт в psd
и все ;)
а дальше уже в фотошопе (если надо) наворачивать слои для перекрашивания и пр. Я этого не делаю.
Daria Miazhevich
neutral_face neutral_face neutral_face

По идее знала. Но забыла. Фейспалм)))
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.