Дизайн для недизайнеров. Мокапы.
Привет! Меня зовут Антон и я веб-дизайнер(хлоп, хлоп, хлоп. ).
Как пользоваться мокапами. (снизу на картинке мокапы)
Что же нам понадобится?
2) Сам мокап. Они легко гуглятся запросом «мокап+нужное слово», например «мокап чашки».
3) Логотип, картинка, текст, который надо разместить на мокапе.
Решил я сделать пикабучашку.
Нашел вот такой вот мокапчик в интернетах:
Скачал архив, вытащил из архива «Mockup.psd», открыл его в фотошопе.
Вижу я вот такую картину:
В нижнем правом углу мы видим раздел со слоями.
В этом разделе показаны все слои, которые есть в данном файле.
Нам нужен смарт слой, который и требуется отредактировать для нужного результата.
Обычно слой для редактирования выделяют цветом, как в данном случае.
Так как на чашке есть две картинки, то тут есть два слоя для редактирования, делаем по иконке первого слоя двойной елик мышкой.
После двойного клика по иконке слоя открывается дополнительная вкладка с содержимым данного слоя.
Я нашел в этом посте хорошие пикабукартиночки и сохранил одну себе как раз для этого мокапа.
Перетащил с папки в фотошоп эту картинку и поместил ее так, что бы она сильно не вылазила за текущий логотип, который на заднем фоне.
На слое со старым логотипом мы нажимаем на «глазик»(после нажатия он исчезает), что бы скрыть данный слой, и что бы остался виден только слой с пикабушной картинкой.
Нажимаем Ctrl+S, изменение смарт слоя сохраняется и мы переходим на главную вкладку и видим результат.
С удовольствием отвечу на ваши вопросы в коментариях.
Дубликаты не найдены
шикарная станция метро =)
переход на лососни-тунцовую линию =)
Не совсем, это макет или прототип.
Спасибо! Редкий случай, когда на Пикабу не только приятно, но и полезно)
а у меня как то вот так получилось. нормально?
7 сайтов с иллюстрациями
Дорогие друзья, как вы думаете, манера речи должна соответствовать теме? Чтобы стиль играл на стороне текста – увлекал, интриговал, дразнил. Так ведь лучше, правда?
Мы будем выражаться довольно фривольно, абы подогреть вас, ой, точнее ваш интерес к предмету статьи. А тема сегодня вкусная: манипуляции, хитрости, уловки в интернет маркетинге вообще и в кликбейте, в частности.
Вы попадали на Темные Паттерны поведения в пользовательском дизайне сайта или иного сервиса? Отвечу вместо вас и ваших комментариев – конечно, да! Вас вынуждали пройти регистрацию в один клик, оставить e-mail или посмотреть баннер; вас кидали на левые страницы и сайты; ваше внимание вязло в тизерах сомнительного содержания.
Все это происходило сотни, а то и тысячи раз, если вы после 40-ка и ветеран интернет баталий. А молодежь сегодня – как мальки в пруду подобных технологий, не завидую им.
У нас сегодня короткий обзор грязных рекламных делишек мира корпораций монстров.
Чтобы не плодить известных личностей и не участвовать в вакханалии репост-модерна, имя одного британского UX-дизайнера, автора термина Dark Patterns, оставим позади фрейма этого поста. Заинтересовавшись, вы и так способны найти его просто погуглив это.
Итак, Темные Паттерны – блуждания пользователя по интерфейсу, где он вероятно увидит замаскированную рекламу, с десяток раз на нее кликнет, потеряет из виду выход из аккаунта, добавит в корзину покупки экспресс-доставку, скачает антивирус, антишпион и какой-то “уж очень нужный” ему браузер.
Короче, сразу выгружаю перечень таких техник, в порядке нумерации для вас, но в порядке случайности при написании для меня:
1. Невозможность удалить аккаунт легко и быстро. Сложно найти ту заветную кнопочку удаления среди лабиринта настроек, а может быть, она вовсе не там и спрятана в километровом манускрипте текста пользовательского соглашения.
2. Bait & Switch (Заманить и Подменить) – обещать одно, а подсунуть другое. Пример: захотели прочитать статью на сайте – вам предложат пройти бесплатную регистрацию. Окей, вы сделали это! А платную подписку оформить еще не желаете? Такая себе воронка продаж!
3. Native advertising (Нативная реклама). Реклама маскированная под целевую для вас часть контента или повторяющая стиль навигации сайта, чтобы вы ее по ошибке кликнули.
4. Teaser Ads – реклама, дразнящая своей непристойностью, как артистка бурлеска. Броское объявление это уже классика жанра и мастерство написания цепляющих заголовков.
Пример: вы отписываетесь от новостной рассылки на вашу почту на сайте агентства. Вам предстоит подтвердить целевое действие, где будет маячить примерно такой текст: “Вы отписались от нашей рассылки. Мы огорчены и подавлены этим, вы не увидите больше наших лучших статей”.
Если гость не примет решение купить товар сейчас же, он упустит выгоду.
7. Roach Motel, дословный перевод – мотель для тараканов, но более подходящая идиома в русском языке – ловушка для мышей. Суть в том, чтобы дать посетителю удобный способ быстро попасть в нужную ситуацию.
Пример: покупка “в один клик” или “оставьте телефон – мы вам перезвоним в течении пяти минут”, все это освобождает человека от якобы лишней работы. Лень, в данном случае, не стимул прогресса.
На этом все. Будьте внимательны и удачи!
Все мокапы
Мокап ноутбука
PSD шаблон со смарт-слоями. Размеры 6800х4800px, разрешение 300 dpi. Вес архива 80 MB.
Мокап постера
PSD шаблон со смарт-слоями. Размеры 4000х2667px, разрешение 300 dpi. Вес архива 50 MB.
Мокап бейджа
PSD шаблон со смарт-слоями. Размеры 6000х5000px, разрешение 300 dpi. Вес архива 151 MB.
Мокап 12 Iphone
PSD шаблон со смарт-слоями. Размеры 4000х2667px, разрешение 300 dpi. Вес архива 38 MB.
Мокап 12 Iphone
PSD шаблон со смарт-слоями. Размеры 5000х4000px, разрешение 300 dpi. Вес архива 36 MB.
Мокап листовок
PSD шаблон со смарт-слоями. Размеры 6000х5000px, разрешение 300 dpi. Вес архива 133 MB.
Мокап логотипа
PSD шаблон со смарт-слоями. Размеры 4500х3000px, разрешение 300 dpi. Вес архива 280 MB.
Мокап коробок
PSD шаблон со смарт-слоями. Размеры 6500х5000px, разрешение 300 dpi. Вес архива 144 MB.
Мокап кремов
PSD шаблон со смарт-слоями. Размеры 6250х5000px, разрешение 300 dpi. Вес архива 114 MB.
Мокап флаера
PSD шаблон со смарт-слоями. Размеры 6000х5000px, разрешение 300 dpi. Вес архива 134 MB.
Мокап коробки
PSD шаблон со смарт-слоями. Размеры 4000х2667px, разрешение 300 dpi. Вес архива 60 MB.
Мокап доски для записей
PSD шаблон со смарт-слоями. Размеры 6000х5000px, разрешение 300 dpi. Вес архива 167 MB.
