Мокап ликбез — все что нужно знать про мокапы. Как это работает? Зачем он нужен
The importance of good presentation plays a significant role in every business kind and this is where the need of high quality PSD templates arises. These templates are of much help in designing the project perfectly and only the designers know how important these mock up templates PSD are in their designing. These are the entity that makes designing hassle free and too speedy thus saves enough time and effort. So, the designers always keep on searching for the right kind of PSD templates to get their job done with ease. The templates are utilized by the designers in their required project where they put it in their creative task and complete the assigned job in a more amazing way.
It is definite that needs and choices differ with designers and projects as well. So while one template can be used in one project the same can’t be used by other project or else the same template can’t be liked by all. This is the reason developers are coming out with so many PSD templates everyday and all of them has something unique to offer to the designers. Lots of free PSD templates are now available in various sources that can be utilized in all project purpose be it business card mockup or magazine card or something else.
So, in this article we have handpicked some of the best Mockup templates PSD that you can download and use in your project without spending a single penny. All these templates are designed in Photoshop using smart objects which provides you enough room for modification. Use these templates as the starting point of your design and enjoy the end result. What you need to do is just download the required templates and place in the right place in the design.
A beautiful pack of 8 photorealistic stationery mockups equipped with Smart layer object that allow you quick and elegant replacement of the design if you require. This PSD mockup is ideal for branding or identity presentation and another great thing is, this PSD mockup is completely free to download. So, enjoy the set at free of cost.
Download
Another high resolution branding and stationery PSD Mockup powered with Smart object to use in any kind of project successfully. You can easily change the background color to suit your project needs. It contains realistic shadow that made the design more eye-catching. The stationary package set inside it is letterhead, envelope and business cards.
Download
This letterhead mockup is ideal to represent any of your design or resume. Adding design to this is much easier that require you to just drag and drop the design over it through Smart object. The background color and text can be altered easily to use it in any kind of identity and branding project.
Download
This is one of the best and high qualities Mockup PSD that is ideal for commercial use. You can get it in your project at free that contains stationery, key, glass, iPhone, nameplate, letter and watch. It can be used in all kind of projects. So, download it at free and utilize in the project to get the hit result.
Download
Branding/Identity Mockup Vol.4
If you have used branding mockup series successfully in your project earlier, then get to know about this one too that is the vol.4 version of the same template. This one too consists of stationery items such as pen, exercise book, envelope, table, iPhone, disc and all of them can be rearranged and edited if you require. So, create a distinctive presentation with the help of this template in no time.
Download
Freebie – Branding, Stationery PSD Mockup
This is another free Photoshop Mockup Template PSD which is a set of complete stationery and branding items such as disc, pen, paper clip, pencil rubber etc. The PSD file consists of smart layers employing which you can easily showcase your design successfully. So, get this template soon in your project and give the design a stunning look.
Download
Perspective Stationery Mockup
If you are eager to make your designing to look something different and unique, consider downloading this template that consists of stationery items such as pen, paper, paper clip and more. This is the free version, so users do not have to spend single penny from their pocket in order to get it.
Download
Frontview Mockups for Branding
This stunning template is developed by Ruslan Latypov Store which is a complete free version. It lets you edit the items text if you require so that you can use them in your design properly. So, just get the free Photoshop Mockup template PSD and take your designing to a great level.
Download
This is a unique set of stationary scene builder containing 16 movable objects that can be easily edited, rotated or scaled as per your requirement to create unlimited scene variations in no time. If you are desperate to showcase your branding presentation in unique way, this is the ideal fit for that.
Download
If you are looking for something unique to design the front cover of your brochure, this tri fold Brochure PSD Mockup is a perfect fit for that purpose where the background and color of the design can be modified to get the ideal look. The PSD file is built with smart object to make the editing much easier.
Download
Built with smart layers this is another high resolution mockup suitable for app screen. So, you can utilize this mockup in your project design to showcase the app design in a stunning way. The color and background of it are easily edited to bring a huge difference in the look.
Download
This PSD Mockup is aimed for iPhone app design that represents a neat look in a very smart way. Layered with smart objects this PSD Mockup let you add the design with ease where you can change the background and color if it is required to fit in your app design.
Download
This is another tri fold PSD Mockup design employing which users can showcase their brochure in a very modern and artistic way. This design illustrates the print brochure design in an amazing way that reflects the business brand and thus can attract huge customer base in less possible time.
Download
Built with smart layers this PSD mockup for Macbook includes scalable vector shape that let the users showcase their design with style. It contains three colors and these are gold, space grey and silver so that you can use the one that represents your business in a more promising way.
Download
Created by Oxygenna, this freebie contains three sets of Macbook Air and all of them are of high resolution. Each of the photo includes retro photo filter to let you customize the look of the photo while the inclusion of smart object layers help you adding more screen in need.
Download
This is a high resolution PSD mockup containing 6 photo realistic iPhone that can be used in all kind of purposes. Each screen is layered with smart object thus provide you enough opportunity to replace the screen in case you need it. So, get this mockup and utilize in the theme or design to make it more interesting.
Download
If you are in search of some unique and interesting free iPhone 6 Mockups, consider downloading this one that helps you illustrate the design or theme in a more realistic way. In this mockup you will get three iPhone models and these are golden, black and white iPhone mockup. The mockup is scalable as well.
DownloadThis beautiful iPhone app screen mockup has lot to offer to the users that are loaded with a clean and attractive design and boost tons of customization option such as editing the design, changing the background and moving the app screen and iPhone. Also included Smart object in the PSD file let you add more screen and design as per your need.
Download
This is a complete set of 15 Apple watch PSD Mockups using which you can display the Apple Watch UI design perfectly. The mock is absolutely free, so you can get it at free of cost to utilize in your task. It includes Smart object so editing and adding your own design is not a big deal to bring some required changes.
Download
Containing 5 different mockups of iPhone 6 Plus this mockup can be used in any commercial purpose such as to showcase the responsive website, any app or any other things in a more professional way. This high resolution mockups is too easy to handle with Smart objects.
Download
This is another most useful PSD mockup that is beautifully crafted for Macbook Pro. The mockup is absolutely free so easily you can get it in your design or theme to make it more appealing and look stunning. Just download the mockup and enjoy.
Download
This PSD Mockup template is crafted with special care and attention that combine multiple variations of devices such as iPhone 6s Plus, iMac 27″, iPad Pro 9.7″ etc. The PSD file smart object layers let you create your own design where changing the color and background can be done with ease in no time.
Download
It comes with high resolution that also include layered Smart object in order to minimize your designing job. You can use this template in any kind of project work to attract huge customer base. So get this PSD Mockup template and start designing the project in a new way.
Download
This bifold brochure Mockup looks awesome with amazing design. Using this template in the design is much easier that require your single click via Smart object and you can easily place it in the Photoshop and it will intelligently convert the designing into a brochure. So, download it and start enjoying your design.
Download
Showcase your project in a very sophisticated way through this Business card Mockup PSD that include Smart object for easily adding your own design. Customization is much easier and you can do it in no time to bring a major change in the design. So, download this mockup PSD and display your branding project in a very modern way.
Download
This is a set of business card with coffee cup to provide a warm feeling in the morning’s coffee table. The logo in the cup and the business can be modified through the help of Smart object. The design is very sleek and no doubt it can impress your clients in a more realistic way.
Download
This business card hand Mockup PSD is ideal for personal and commercial use and you can utilize it in any purpose. This is perfectly free for personal use in presentation. In order to use it in your project, download the PSD file and you are good to go.
Download
This stunning mockup is aimed for magazine use whereas you can use it for both personal and commercial use. The design is very neat, sleek and unique that represents your designing in more perfect way. The good news is that you do not have to pay a single penny in order to get this.
Download
Another helpful bifold mockup from Justin Horne that is of high resolution and include Smart object thus letting users add their own design easily. It also includes organized layer structure and you can alter the background color to suit your business needs. Utilize this amazing Mockup in the design and see the end result.
Download
This is a set of 9 business card PSD mockups which are crafted beautifully utilizing which you can provide your designing a stunning look. This card can be used in personal and commercial purposes where customization is not a big deal and you can do it with ease.
Download
This free and unique PSD mockup can be used to bring a more realistic look in the catalog design, brochure and magazine. It is featured with customizable inner page design and users can edit the background color, glow effect and shadow with ease to bring the required changes. So, get this PSD Mockup and make your design more appealing.
Download
Developed by DesignDistrict this Vintage logo Mockup includes 1 PSD file. The inclusion of Smart object is really helpful to add your own design in order to create a more realistic look in just seconds. Also if you are fond of the traditional design, this is the ideal choice to go for.
Download
Weathered logo Mockup has a very charming and vintage look that represents the old age through the peeling logo template and wall paint. You can replace the logo with your own while the change of the logo color is also possible. So, download the PSD file and use in the right project to make it more interesting.
Another most useful PSD Mockup for Android that has a gentleman holding the Android device showing the top view. This one too contains Smart object making the placing of design much easier. The design with this template looks very realistic to win the hearts of many. This is completely free to download.
Download
The template includes a sophisticated black color shopping bag along with a bottle next to it. This is one of the best mockup to represent your artwork. The color of the bag can be changed while addition of Smart layer let you add your own design effortlessly.
Download
Samsung Galaxy S7 Silver Mockup
This PSD Mockup is just perfect for using in Samsung Galaxy S7 device. The PSD file is easily editable and it is completely free but ensure to go through the full license before downloading and using it in your project. Smart object is included to get the best out of it.
Download
Another great PSD mockup for Samsung Galaxy S7 Edge. The design is unique and you can use it in all purposes personal and commercial. Smart Object let you bring a different look by adding your own design while the PSD file is fully editable to fit the required needs.
Download
Nature book Mock up PSD is ideal to use in any kind of project such as for advertising, website, or to promote any kind of products. The design looks really awesome and it is editable also while Smart object let you add your own image to bring some changes in the design look.
Download
This simple aqua T-Shirt Mockup with a wooden background looks amazing. Though it looks much simple but is decorated nicely to steal the mind of your clients. Smart objects, layered PSD file etc. are some of the features of this mockup that allow you to make the design more fruitful.
Download
Want to showcase your design in a giant Billboard sign? Then go for choosing this PSD Mockup that perfectly suits your needs. This template is just ideal for all kind of business needs be it commercial or non-commercial. So, click on the download button and explore the set at your best.
Download
This freebie is a Smart object included desk Calendar Mockup which is suitable for using in all kind of projects needs starting from personal to commercial. This PSD layered file is easily editable and you are allowed to add your own design to make it more eye-catching. This April Desk calendar Mockup will definitely enlighten the day each time you look at it.
Download
This is another interesting free PSD template Mockup which consist a very clean design and simple look. This is a A4 paper mockup ready to use in personal and commercial project needs. Smart object provides great opportunity for editing and adding your own design.
Download
Best for advertisement and posters on the street. It looks very realistic and let you add your own design inside the PSD file to bring required changes. With a very helpful and realistic looking background this layered PSD file is just suitable for any kind of personal and commercial uses.
Download
This easy to edit PSD Mockup is ideal for presenting any kind of drawing, sketch, watercolor, pictures etc on paper. This set comes with a help file so that you can refer to that in case of any difficulty. The high resolution design makes sure it will definitely attract the eyes of all.
Download
Free PSD Mockup – 4K Magazine
This Smart object based Magazine PSD mockup is optimized for A4 letter format where customizing the template is much easier and users can edit the background color to suit their project needs. This is an ultra realistic PSD mockup ideal for all kind of project design.
Download
If you like this PSD mockup can easily download it in your project presentation. This is completely free to download so you do not have to spend single money from your pocket in order to get it. Just download and enjoy all the features of it while making your presentation design much more realistic.
Download
Free PSD Download Billboards & Outdoor ” Mockup “
This PSD mockup can be used for Billboard and Outdoor advertisement both. The best part about this PSD template is modification does not require you to go through a complex job rather it can be done with ease in no time. Just download it and start using in your project to see the hit result.
Download
This innovative PSD mockup offers you opportunity to showcase your artwork in the best possible way. In order to employ it in the project, just download the PSD file, open it in photoshop, right click on the replace button and insert your artwork. That’s it and you will be good to go.
Download
Now make your design job easier and more faster by employing the innovative PSD Mockup and Trifold Brochure Mockup is one of that very creative that is built with PSD Smart objects and well organized layers where you can represent the company profile, advertise and more in the best way.
This is a complete set of 14 PSD iPhone such as iPhone 5S, iPhone 7 etc. mockup. Crafted with smart object this template is too easy to use. You can make use of it in all kind of project needs whether personal or commercial. So, click on the download link and get ready to explore in greater way.
Download
This is an ideal PSD mockup for Smart watch that is mainly crafted for Motorola moto 360 degree. Inclusion of Smart object makes the uses of this template much easier. This is completely free, so what you are required to do is just download the Mockup and make your designing more realistic.
Download
Another stunning free PSD mockup template for Valentine’s day. This iPad mini mockup is having a far realistic look than any other similar mockup and you can use it with ease due to the addition of Smart objects and well organized layers. Click on the link and go ahead to use it in the required project.
Download
Do you want to make your invoice slip more eye catching and want to reflect your brand identity on that as well? Then go ahead to download this Invoice PSD Mockup template that makes the invoices look much more clean and eye pleasing to attract a great customer base. Easy to use this template is available at free.
Download
Want to get the desired job by pleasing the interviewer with a smartly designed resume? Then you must download this mockup that consist of 4 paper mockup, 2 resume template and all are available in PSD format so that users can easily edit them in Photoshop to make the required changes.
Download
This book cover mockup looks great with its stylish design. Smart object layer included in the PSD file allow you enough opportunity to edit it while you can change the background and color or either replace it completely to have more fun.
Download
Frame Mockups
This one is best to display your custom design in the wooden frame while re-arranging is also possible to bring the required look. You can edit the background and shadows also while just changing the background without affecting the shadows is also possible. This freebie can be downloaded at free.
Download
Built with smart object this mockup let you edit the design smartly and you can easily move the envelope and shadows with ease that are built on separate layers. Changing the logo or design is also not a big deal while changing the color or background is done to give it a different look.
Download
Crafted with smart object layer this invitation mock up can be used to make your designing more realistic. The hat at the top and the golden foil looks really eye catching while you can edit it perfectly to showcase your own design. The end result will be really eye pleasing if it is executed properly.
Download
"Мокап" - это узкоспециальный термин, которым пользуются в основном дизайнеры. В прямом значении слово мокап означает макет . С его помощью профессионал создает трехмерную визуализацию чего угодно, например упаковки или полиграфии. Часто он используется в рекламе. Простой пример: сеть быстрого питания «Макдональдс». Аппетитный гамбургер на изображении - не фотография, а визуальная идеализация того, что хочется купить и съесть. Если предлагаемый товар находится внутри среды, то смотрится лучше и выгоднее, чем обычный скриншот (снимок).
Что это?
Мокап - это макет, который используется дизайнерами для того, чтобы продемонстрировать заказчику изделие или продукт. Например, будущую обложку компакт-диска, фотоальбом, открытку, содержание или внешний вид книги. Благодаря этому способу заказчик визуально оценивает предлагаемый специалистом дизайн в рабочей среде. Получается не просто плоская фотография, а уже наложенный макет на продукт. позволяет увидеть конечный результат в реальности. Он упрощает взаимодействие заказчика и дизайнера. Визуальные макеты позволяют тестировать продукцию на стадии разработки, вносить изменения, поправки до печати.
Mock up хорош тем, что это несложная, малозатратная по времени работа, которой могут научиться все без исключения. Для того чтобы в совершенстве овладеть этой техникой, важно иметь представления о дизайне, чувство вкуса, стиля, меры, знания о совместимости цвета, уметь работать в графических редакторах. Во время освоения мокапа просмотрите работы известных дизайнеров, учитесь на чужих примерах и ошибках.
Зачем он нужен?
Мокапы нужны профессиональным дизайнерам, фрилансерам, художникам, которые трудятся на заказ и создают удивительно красивые работы. Позже они презентуются клиенту в лучшем виде. Мокап создается с целью продемонстрировать историю картинки или надписи, которая улучшает продукт и помогает покупателям сделать выбор в его пользу. Технически мокапы - PSD-файлы с редактируемыми смарт-объектами (слои в программе "Фотошоп", которые позволяют вставить дизайн в нужное место). Мокапами могут быть и фотографии. Например: блокнот, лежащий на столе, или визитка. Мокап можно сделать самостоятельно, купить или бесплатно скачать готовый.
Как его создать?
Мокап - это макет с нуля. Сделать идеальную работу легко с помощью известной программы "Фотошоп". К примеру, если нужно или надпись на визитку, лучше всего воспользоваться готовыми файлами. На специальных ресурсах есть огромное множество фотографий с пустыми визитками, лежащими на столе.
Следует открыть фотографию в Photoshop и файл с готовой надписью. Ее нужно грамотно поместить на визитку так, чтобы создавалось ощущение реальности. Для этого используются все доступные инструменты программы. Для такой работы требуется начальное знание графического редактора. Если не знаете, как сделать мокап самостоятельно, изучите теорию, а также постоянно тренируйтесь.
Существует особый алгоритм самостоятельного создания мокапа. Хотите продемонстрировать заказчику надпись или цитату? Приготовьте фотоаппарат и предметы для сцены: блокнот, красивый нейтральный фон. Выставите правильное освещение, расположите объекты и сделайте несколько снимков.
Сферы применения
Теперь читатели знают, что мокап - это макет визитки, журнала, книги, открытки, на который дизайнер накладывает конкретную картинку, фотографию или надпись. Этот процесс помогает визуализировать работу (например, сделать надпись на карточке) и позволяет заказчику понять, как будет выглядеть результат. Мокап применяется в создании сайтов, веб-приложений, полиграфии, рекламных баннеров, вывесок, меню и многого другого. Часто к нему обращаются дизайнеры интерьеров, когда готовят проект помещения.
Мокап сайта
Создать мокап сайта со знанием дела могут лишь профессиональные веб-дизайнеры. Причина проста - специалисты не впадают в панику, если заказчик потребует доработки каких-либо деталей. Мокап помогает дизайнеру увидеть идею, развивать и совершенствовать ее в дальнейшем. Веб-каркас - это схематичный план интернет-страницы. Сначала дизайнер рисует его от руки на листе бумаги. Это нужно, чтобы эффективнее использовать инструменты графических редакторов.
Каркас сайта создается в черно-белом цвете, что позволяет разработчику наметить расположение главных элементов: логотипа, меню, контента, После каркаса дизайнер разрабатывает прототип сайта: цвет и стиль. На помощь приходят одиннадцать полезных инструментов. Они выручат при создании всех деталей сайта. Обратите внимание на программы InVision, UXPin, Marvel App, Gliffy, OmniGraffle, Moqups, Axure, JustinMind, Mockingbird, HotGloo, Mockplus.
Например, Mockplus - простой инструмент дизайнера. Он помогает создать каркас, перейти от черно-белого варианта к цветному. Данный инструмент позволяет использовать более двухсот компонентов, которые намного упрощают создание сайта. На помощь дизайнеру приходят и другие программы. С их помощью легко создавать элементы сайта, прорабатывать детали, учиться. Самый распространенный и простой способ получить навыки - сделать мокап визитки.
Графический редактор
Photoshop - одна из программ, которая приходит на помощь дизайнеру при создании различных проектов и макетов. Мокапы для "Фотошопа" - это готовые PSD-файлы. Скачать их можно на платных, бесплатных ресурсах или же сделать самостоятельно. Проще всего найти готовый мокап и применить для демонстрации основной работы.
Попробуйте сделать надпись для буклета или открытки. Придумайте идею, определитесь с цветом. Сделайте набросок от руки на листе бумаги. Затем воплотите задумку в графической программе.
Легкий и популярный вариант среди новичков - это мокап визитки. Откройте скачанный файл, надпись и текст. Перейдите к готовому мокапу, нажмите на значок "Смарт-объект" (это должно быть изображение выберите в меню "Редактировать содержимое". В откроется объект, готовый для изменения. Далее активируйте созданную надпись или текст и перенесите на поверхность визитки. Надпись можете трансформировать, поменять размер, выбрать наиболее подходящее место ее расположения. Сохраните проект.
Источники
Нет ничего сложного в создании мокапов. Они упрощают основную работу дизайнера, экономят силы и время. Если есть желание, создайте собственную базу таких файлов и займитесь их продажей. Но для этого понадобится хороший фотоаппарат, навыки съемки, предметы, знание освещения, чувство хорошо развитого вкуса и стиля. Источниками изображений могут стать ресурсы, которые за определенную плату продают готовые картинки для демонстрации дизайна чего-либо. Если нет свободных денежных средств для покупки мокапов, дизайнеру предлагается большое количество бесплатных источников. Там c легкостью можно найти для скачивания тысячи красивых картинок на любую тематику.
Минусы готовых мокапов: однотипность, отсутствие индивидуальности, шаблонность. Плюсы - доступность, красота, минималистичность, максимальный реализм, удобство. Если занимаетесь дизайном профессионально, обязательно имейте наработанную базу мокапов. Она должна подчеркивать стиль автора, выгодно демонстрировать предмет продажи, привлекать заказчика.
Довольно часто на мой сайт заходят по запросу: «Как работать с мокапами в фотошопе?» А статьи, посвященной этому вопросу на моем сайте нет. Вернее до сегодняшнего дня не было, т.к. я решил восполнить этот ужасный пробел и написать небольшой мануал по работе с мокапами. В своей статье я решил использовать бесплатный мокап керамических бутылок, на которых можно изменять этикетку и цвет заднего фона всей композиции. Хочу, однако, предупредить, что все мокапы разные — в том плане, что изменяться могут другие детали изображения — не обязательно этикетки или фон… Но общий принцип работы с мокапами вам будет понятен после ознакомления со статьей и в дальнейшем вы без труда сможете пользоваться любым мокапом.
Итак, приступим. Как я уже сказал, в качестве «подопытного кролика» у нас будет Скачать совершенно бесплатно его можно там же на странице с описанием.
Первое, что мы должны сделать — распаковать архив. Нам нужен непосредственно файл Ceramic Bottle PSD MockUp.psd
Открываем его в Фотошопе и смотрим:
Открыли файл и смотрим на панель со слоями
На панели слоев расположены заботливо сложенные автором мокапа папочки с интуитивно понятными названиями. Каждая папочка соответствует своей бутылке. Раскроем любую не откладывая в долгий ящик, нажав на стрелочку рядом с пиктограммой папки. Нашему взору открылись несколько слоев:
Смарт-объект имеет свою пиктограмму- Смарт-объект с надписью или изображением, которую можно поменять (он обведен на рисунке красной рамкой)
- Керамическая или сургучная нашлепка на бутылке
- Собственно, сама бутылка
- Тень от бутылки для придания пущей реалистичности.
Нас интересует слой со смарт-объектом. Для наглядности откроем папку слоев Regular Color, а не Ceramic label — там такой же смарт-объект, только цветом темнее и будет лучше нам виден.
Для его редактирования ДВАЖДЫ щелкаем на его значке. Именно на значке — эта область выделена рамкой на рисунке выше.
Открывается окно смарт-объекта. Его можно редактировать всеми доступными средствами. С этой точки зрения он ничем не отличается от обычного слоя.
Смарт-объект в режиме редактированияВырежем надпись «Ceramic». Неважно как. Кто как привык. Ластиком или рамкой + Del. Главное убрать надпись в середине. И нажимаем Ctrl+S — сохраняем этот слой.
После сохранения надпись исчезла и на бутылкеКак видите удаленная нами надпись в смарт-объекте пропала и с бутылки.
А теперь напишем что-нибудь свое. Например ИНФОРМ-ДЕПО. Красивым таким поносным цветом. И снова сохраним слой (Ctrl+S). Смарт-объект можно при этом не закрывать. Смотрим:
Наша надпись оказалась на бутылкеКак видите, надпись оказалась там, где надо. Несложно, правда? Слой смарт-объекта может содержать свои слои как текстовые, так и графические. Вы можете загрузить в этот слой сторонний AI, EPS, PNG и т.д. Главное — нажимать Ctrl+S всякий раз, когда вы в нем что-то поправили.
Теперь поменяем цвет фона. Раз мы закончили с надписью, закроем смарт-объект с надписью и ДВАЖДЫ щелкнем на пиктограмме корректирующего слоя. Да-да. В данном примере это не что иное, как корректирующий слой с фильтром Photo Filter.
Корректирующий слой для фонаТычем в квадратик с цветом и выбираем требуемый. Все.
Меняем цвет фона на поносныйСпасибо за внимание.
Mockup или mock —up (макет) - модель того или иного продукта, выполненная в естественных пропорциях, созданная для быстрого предоставления дизайна продукта в готовом виде, с целью более чёткого представления дизайна конечного продукта.
Многие из нас знают, что это, а тем, кто не знает будет полезно.
Разыграем ситуацию, которая бывала, наверняка, у всех.
Вы посылаете заказчику макет на утверждение, а он Вам в ответ:
— Мне нравиться, но я не уверен будет ли это смотреться хорошо на поём продукте…
Тут-то Вам и пригодится Mockup . Суть его заключается в следующем, у Вас есть изображение продукта в нужном ракурсе, в нужной ситуации, и Вы как бы применяете к нему Ваш дизайн. В процессе его «как бы » применения происходят все нужные преобразования, это ракурс, всевозможные искажения, наложения эффектов и т.д.
Опять же, для тех, кто не знает, расскажу…
Как это работает?
1.
Вы загружаете Ваш mockup (psd
) в фотошоп и в области управления слоями ищите слой с таким значком: . Чаще всего этот слой подписан «Put your design here
», «Your design
», «Double click me
», «Edit me
» и т.п.
3. У Вас откроется новое окно, в которое следует поместить Ваш дизайн, после чего нажимаете Ctrl+S (сохранить)
Возвращаетесь в предыдущее окно, ВУА-ЛЯ! Ваш дизайн на продукте!
На просторах интернета можно найти великое множество мокапов разного качества, вида, стиля, платных и бесплатных .
Но, не редко бывает так, что нужный нам продукт мы не можем найти. Для этого и пригодится этот материал. В нём я расскажу о принципах создания и работы мокапов.
Как сделать свой mock-up?
Для начала найдём картинку хорошего качества какого-нибудь необычного предмета без рисунков, а лучше белого цвета.
Здесь, как говорится, Google
в помощь, или Яндекс
– кому что нравится.
Для своего мокапа я решил взять чайник.
Итак, начнём…
Для начала отделяем картинку от фона. Его можно удалить вовсе, фон у меня будет свой.
Затем создаём новый пустой слой, и преобразуем его в смарт-объект. Как я уже говорил, в основе работы мокапа лежит именно смарт-объект.
Опять же. Для тех. Кто не знает, на пустом слое нажимаете правый клик и выбираете «Преобразовать в смарт-объект», после чего иконка вашего слоя будет с таким значком: .
Далее, применяем маску предыдущего слоя к пустому слою. На иконке предыдущего слоя кликаем правой кнопкой мыши (ПКМ) и нажимаем: «Выделить пикселы ». Затем не снимая выделения нажимаем пустой слой и кликаем под областью слоёв вот этот значок: . Если Вы всё сделали правильно, то к Вашему пустому слою добавится слой с белым силуэтом предыдущего слоя, в моём случае с силуэтом чайника.
Теперь, открываем наш смарт-объект двойным кликом на этот значок: , и для удобства работы помещаем в него сетку (Свою я нарисовал в иллюстраторе), нажимаем CTRL+S и возвращаемся в предыдущую вкладку, где видим вот такую картину:
Для удобства работы примените к слою с сеткой (Пустой слой ) эффект «Умножение ».
Теперь начинается самая трудоёмкая часть создания мокапа, это искажение. Тут без пространственного мышления не обойтись.
Для этого на Вашем слое с сеткой (Пустой слой ) нажмите на значок в виде звеньев цепи между самим слоем и слоем-маской. Если звенья пропали, то Вы всё сделали правильно.
Теперь нажимаем на слой с сеткой, чтобы он выделился белыми уголками и идём по пути: Редактирование → Марионеточная деформация.
Мы видим. Что наш слой покрылся непонятной сеткой. Теперь. Нам нужно прокликать его по контуру расставляя узлы для фиксации нашего фона. Не бойтесь ошибиться, программа не даст Вам поставить узел не там, где нужно, о чём сообщит вам содержимое этого окна:
Это трудоёмкий процесс, запаситесь терпением.
Когда с контуром вы закончите, Ваш слой будет выглядеть примерно так:
Дальше всё тем же инструментом расставляем маркеры и деформируем наш слой с сеткой (пустой слой) так, чтобы сетка естественно облегала сам предмет. По окончании деформации нажмите Enter . Если Вы допустили ошибки при деформации, то скорее всего то, что заметно на сетке, не будет видно на продукте с другим дизайном, если, конечно, в основе Вашего дизайна нет сетки.
На этом этапе Вы можете поставить в Ваш смарт-объект любой дизайн, чтобы посмотреть хорошо ли Вы деформировали слой.
Закрывая глаза на кучу недочётов, мой вариант меня устраивает. Далее, Вам нужно проделать кучу операций со слоями таких, как дублирование, эффекты наложения, тени и прочее, чтобы Ваш мокап смотрелся органично. Кроме того, Вы можете создавать смарт-объекты для каждой части Вашего мокапа отдельно например: крышка, ручка и т.д. На этом, пожалуй, всё.
Главное помните, что качество Вашего мокапа зависит только от Ваших способностей.
Часто нам хочется показать свои работы красиво и интересно, но не всегда это получается сделать, просто выложив саму работу. Гораздо интереснее выглядит подача, где картинки как будто нарисованы в альбоме или используются на этикетках продуктов, для этого как раз и нужны мокапы.
Мокап (или mock-up на английском) - это специальным образом подготовленный файл, в котором можно свой дизайн размещать на реальных предметах. Они нужны, чтобы показать как картинка будет выглядеть в реальной жизни. Обычно это PSD файл со смарт-объектом, на который и вставляется картинка с дизайном. Бывают и просто JPEG картинки, называемые мокапами, но работать с ними сложно, нужно долго искажать картинку и вписывать ее в окружение.
Смарт-объекты - очень крутая штука. Если вы хоть раз уменьшали картинку в фотошопе, а потом растягивали ее на большой размер, наверняка получалась примерно такая история, потому что Фотошоп искажает файлы.
То же самое и с шрифтами и с эффектами. Для того, чтобы этого избежать, стоит превращать все элементы в смарт-объекты. Для того чтобы создать смарт-объект, откройте любое изображение в фотошопе. Далее преобразуйте фоновый слой в обычный (редактируемый), для этого двойным щелчком мыши кликните по нему и нажмите ОК либо создайте его дубликат, для этого нажмите комбинацию клавиш Ctrl+J. Затем, щелкнув правой кнопкой мыши по преобразованному/дублированному слою из контекстного меню выберите «Преобразовать в смарт-объект». После того, как Вы это сделали, на миниатюре Вашего слоя появится небольшая иконка, которая означает, что слой является смарт-объектом.
По сути смарт-объект - это контейнер, изменения которого не затрагивают объект внутри. Можно растягивать, уменьшать, применять эффекты не теряя качества картинки или шрифта. По умолчанию кстати все картинки, которые перетаскиваются в ФШ, становятся смарт-объектами.
Редактирование смарт-объектов происходит как редактирование отдельного файла в отдельном окне (создается временный файл в формате.psb, привязанный к основному файлу). Изменение и сохранение этого файла приводит к изменению основной картинки.
Пользоваться мокапами очень просто.
- Скачиваем нужный PSD, открываем его и ищем слой с примерным названием «Your design here» или что-то подобное.
- Дважды щелкаем на иконке смарт-слоя - открывается новое окно, куда и нужно перетащить свой паттерн или картинку.
- После этого закрываем это окно, выбрав «Да» при вопросе нужно ли сохранить.
Сейчас огромное количество ресурсов, где можно найти мокапы для собственных нужд, чтобы показать свои работы в лучшем свете. Вот несколько ресурсов, где можно найти неплохие мокапы бесплатно.
На самом деле мокапы не очень сложно сделать самому, владея элементарными навыками работы в фотошопе. Вот прекрасное видео, где на примере футболки показано как сделать мокап, последовательность работы можно перенести вместо футболки на любой другой предмет.
Показывайте свои работы красиво - пользуйтесь мокапами
