Как сделать дизайн таплинк в фотошопе
Как же сделать таплинк красивым, ведь с таким примитивным, простым редактором не сильно-то разбежишься. Просто баннер, просто текст, вопрос-ответ открывающимся плюсиком. Как же тогда можно создать такой дизайн, как на фото выше?
То ли дело в конструкторе Тильда: 550+ готовых блоков, в которых столько вариантов расположения текста с изображениями, да плюс zero блок. В любом из блоков есть возможность анимировать элемент.
А здесь блоков всего 18 и анимировать можно только ссылку. Сделать красивым таплинк кажется невозможным.
Это возможно, убедитесь сами!
СОДЕРЖАНИЕ
5 этапов, из которых состоит работа
- Изучить внимательно все блоки сервиса
- Составить структуру будущего таплинка
- Разобрать на мелкие смысловые части
- Создать каждый блок
- Разместить их в редакторе таплинка
И теперь можно приступать к работе, начиная с первого этапа.
Но сначала давайте разберемся с тарифами: какой выбрать тариф, чтобы получить возможность сделать красивый таплинк.
3 тарифных плана: basic, pro и business — почитайте самостоятельно информацию о том, что входит в каждый тариф — ссылка на тарифы. Чем они отличаются и какие дополнительные возможности дает каждый следующий. Выбрать для себя вы вправе любой, как бесплатный, так и самый дорогой.
Самый популярный тариф, который отвечает большинству задач в онлайн работе — это средний PRO
Дизайнерский таплинк, в котором стильно и круто можно разместить текст, фото, иконки, различные кнопки с анимацией — только на двух платных тарифах.
Изучаем внимательно все блоки сервиса таплинк
Я поместила скриншот, на котором изображены все блоки, чтобы мы вместе могли разобраться на какие блоки следует обратить особое внимание.
Текст — добавляет заголовки, подзаголовки или просто текст, который будет размещен на всю ширину сайта. Размер шрифта вы можете выбрать сами.
Ссылка. При помощи этого блока вы можете вставить любую ссылку с переходом на разные веб страницы. Это может быть сайт, социальные сети, документы из облака.
Иконка и текст появились совсем недавно: здесь есть предложенные значки и иконки, которые вы можете взять прямо из библиотеки сервиса. Подходит для маркированного списка или перечня.
С этим, я думаю, понятно. (Более подробно о стандартных блоках читайте в статье по ссылке). А вот ниже мы поговорим о тех самых блоках, благодаря которым реально таплинк сделать шедевром!
Чем же так интересны отдельные три блока?
Баннер позволяет разместить в себе любое изображение. Размер изображения по длине и ширине ничем не ограничен. Ширина, понятно, будет равна ширине сайта, а вот высоту вы выбираете сами.
Может это всего одна строка и вы загрузите картинкой ЗАГОЛОВОК своим фирменным шрифтом. А может это размер целого экрана телефона, в котором вы заранее разместите готовое дизайнерское решение:
- картинка и текст
- две картинки рядом
- иконка и текст
- текст поверх изображения
- любой перечень в красивой рамочке или с тенью
- и т.д.
Чтобы изготовить баннер для загрузки в платформу, обычно пользуются сторонними графическими редакторами. Это может быть Photoshop, Canva, Figma. Более подробно о создании Таплинк сайта с использованием редактора Canva — читайте ниже в статье.
Карусель картинок допускает загрузку нескольких изображений. Сюда удобно поместить портфолио, сертификаты, отзывы. Но можно точно так же сделать картинку с текстом, например, прайс-лист на разные услуги. И загрузить несколько таких изображений в карусель.
HTML код — уникальный блок, в который можно загрузить различные коды, чтобы, например:
- сделать сверху таплинка кликабельное меню
- раскрывающийся баннер, чтобы подробное описание можно было скрыть, а при нажатии на баннер — текст раскрывается
- раскрывающееся меню
- парящая кнопка для мессенджера
- Gif-изображение, например анимированная стрелка
- и пр.
Таким образом, используя доступные простые блоки, можно сделать улетный мини-сайт, при наличии вашей фантазии, разумеется.
Составляем структуру будущего таплинка
Составить план сайта — значит сделать понятный и последовательный рассказ о вас и ваших услугах (продуктах).
Задача структуры — упростить путь посетителя к совершению целевого действия. В таплинке нужно поместить только самое важное, донести до потенциального клиента ценность своего предложения в простой и удобной форме. Заострить его внимание на самом важном и подтолкнуть связаться с вами или оставить заявку.
Если вы хотите сделать таплинк самостоятельно, но не знаете, что именно вам необходимо поместить, то я вам в этом с удовольствием помогу.
Разбираем на мелкие смысловые части
Запишите ответы по пунктам, приведенным ниже. Это примерные вопросы, которые по частям помогут вам составить сайт целиком. Выбирайте подходящее для себя, что из этого взять, а что оставить — решать вам.
- Кто вы, ваше имя
- Что вы делаете, кто по профессии
- Чем вы можете быть полезны, какую проблему решить
- Как проходит работа с вами
- Сколько стоят услуги
- Отзывы о работе с вами, результаты, кейсы
- Подробнее о вас или вашей услуге
- Есть ли вам чем поделиться с подписчиками, чтобы они скачали полезное
- Сертификаты о пройденном обучении
- Вопросы и ответы, которые вам задают клиенты или могут задавать
- Контакты, как связаться, куда писать, куда записаться
Ответив на такие вопросы, вы составите отличную структуру продающего сайта. Это бизнес-схема, которая безупречно работает и подходит абсолютно для любой ниши бизнеса.
Можно переходить к практической части, после того как текст готов. Так сказать, зарисовать, набросать схему будущего таплинка. Спланируйте, как можно визуально отобразить эти записи, чтобы поместить в таплинк.
Другими словами: составьте прототип сайта (ссылка на статью).
Если вы имеете опыт создания сайтов на конструкторе, то это легко будет сделать
Как создаются нестандартные блоки
Этот этап создания красивого таплинка — самая интересная и сложная практическая часть. Более подробно о том, как сделать блок в графическом редакторе (ссылка).
Для некоторых частей сайта вполне подходят стандартные блоки платформы Таплинк. К примеру, для заголовков и подзаголовков применяют блок Текст, выбрав подходящий размер и шрифт.
Один из самых доступных вариантов создания картинки для загрузки на ваш таплинк — это использование фоторедактора Canva. Не требующий специальных знаний, с массой вариантов, которые можно использовать как шаблон.
В двух словах работу в этом редакторе не объяснишь, но основные моменты мы затронем.
В чем заключается работа в Канве: два варианта
- Взять готовое решение одного из шаблонов, созданных дизайнерами. Затем изменить тексты с шаблона на свои, так же изображения. Здесь вы сможете менять даже цвета фонов, подписей на те, которые вам нужны, чтобы сайт бы в едином стиле.
- Создать дизайн: свой баннер с чистой страницы. Выбрать настраиваемый размер, нужный вам, и добавляя шаг за шагом элементы: текст, фото, фигуры, графику и пр.
С чего начать
Пройдите простую регистрацию в сервисе. Можно войти с помощью аккаунтов Google, Facebook или Apple или придумать имя и пароль для входа.
Теперь можно создавать дизайн. В первую очередь необходимо выбрать размер создаваемого изображения. Программа фоторедактора предложит вам использовать шаблон известных ей размеров, например, для обложек к различным соцсетям. (рис)
Для начала — потренируйтесь. Выберите любой размер, к примеру, квадратный. Внимание: пример, который показываю, создан на ПК, так как Таплинк вы будете делать в компьютере, не в телефоне.
Работа в редакторе
Перед вами открылся белый лист, готовый для работы. Слева появились разные варианты оформления обложек для постов: обратите внимание, есть платные шаблоны. Те, которые будут доступны в премиальной версии использования сервиса Canva.
Вы можете использовать бесплатные, их тоже огромное количество. Но если вы хотите, то всегда можно оформить подписку на Canva PRO. Она дает больше шаблонов, прозрачный фон изображений в формате png, премиум фото, больший размер хранилища ваших работ.
Создать свой блок для сайта
Из той структуры, которую вы составили для своего таплинка — выберите одну смысловую часть. В моем примере — это картинка и рядом с ней текст с заголовком.
Размер прямоугольный, расположен горизонтально. Я выбрала настраиваемый размер 1200*800. Фиолетовая кнопка — создать дизайн. (рис)
Когда вы получили чистую страницу, готовую для создания дизайна баннера, можете приступать. Что здесь можно сделать: добавить элемент (их огромное количество — фигуры, стикеры, градиенты). Взять и добавить фото из предложенных канвой, либо загрузить свое. Затем применить вставку текста: заголовок, подзаголовок, основной текст — выбрать размер, шрифт цвет (рис 1).
Залить фон всей страницы.
Теперь можно отредактировать размеры под те, которые вам подойдут для сайта. Фотографию передвинуть, уменьшить и увеличить, тексты передвинуть в нужное место, при необходимости выровнять.
Canva — это интересный инструмент для создания уникальных изображений. Уделите время для его изучения, чтобы у вас получалось делать их быстро и без труда.
Ваш дизайн баннера готов? Тогда пора его скачать себе на компьютер, чтобы потом загрузить в таплинк. В правом верхнем углу найдите кнопку со словом СКАЧАТЬ (рис 2). При нажатии — откроется окно, в котором выберите: тип файла, нужную страницу, если их несколько.
рис 2
Тип файла: PNG, JPG — для баннеров без анимации выбирайте любой. В случае, если у вас есть движущиеся элементы, то такой тип не подойдет.
Для загрузки баннеров с анимацией выбирайте тип файла — GIF, короткое видео без звука.
Как использовать блок HTML код в таплинке
Для того, чтобы добавить интересную фишку в своем мини-сайте, подходит этот блок.
* сделать навигацию в виде кликабельное меню для одностраничника сверху. Нажимая на слово в меню — ссылка сразу перенесет на нужный экран
* раскрывающийся баннер: когда при нажатии на картинку — раскроется текст/картинка с описанием. Таким образом можно сократить длину таплинка, не делая его слишком длинным визуально (рис):
Использование этого блока, само действие вставки HTML-кода совсем не представляет никакой сложности. Вставить в пустое поле скопированный код и сохранить.
Другой вопрос — где взять подходящий код для воплощения всех вышеперечисленных и других идей? Создать их может только программист, специалист, который разбирается в написании кодов.
Ответ — кто ищет, тот находит. Их можно купить в сообществах таплинкеров, в аккаунтах у дизайнеров, занимающихся созданием мини-сайтов в сервисе таплинк. А потом применять, загрузив баннер на хостинг изображений и получив ссылку, которую нужно вставить в HTML-код и загрузить в нужный блок.
Купить код для раскрывающегося баннера вместе с описанием, как это сделать: ссылка (в разработке)
Купить код навигационное меню с описанием ссылка (в разработке)
Заключение
Теперь для вас одной загадкой стало меньше и вы понимаете, как сделать таплинк красивым. Несмотря на то, что редактор сервиса довольно примитивный, но благодаря блокам Баннер и HTML-код вы можете сделать его интересным, уникальным и запоминающимся.
Если вам нужна консультация по созданию таплинков, структуры продающего сайта, а так же услуга по созданию таплинка:
Переходите по ссылке на мой таплинк
Пишите мне в мессенджеры — контакты
И, конечно, не забывайте про Полезные материалы
Для включения анимации для блоков "Ссылка" перейдите на вкладку "Настройки" этого блока, включите переключатель "Анимация" и выберите подходящий эффект.
Выберите понравившуюся тему на странице Дизайн - Animation - CHRISTMAS.
Настройки оформления страницы находятся на странице "Дизайн" личного кабинета Taplink.
На базовом (бесплатном BASIC) тарифе можно выбрать одну из стандартных тем оформления страницы.
Выбор темы оформления осуществляется на странице "Дизайн".
Для перехода режим предварительного просмотра оформления страницы нажимают кнопку "Просмотр", листать варианты оформления выбранной темы можно с помощью кнопок-стрелочек. Для выбора понравившегося варианта дизайна служит кнопка "Выбрать"
Настройки оформления выполняют на странице "Дизайн" личного кабинета.
Стандартные варианты темы оформления сгруппированы на вкладках Simple (простые), Advanced (расширенные), Animation (анимированные). Персонализированные вами варианты тем оформления доступны на странице "Мои дизайны".
Для предварительного просмотра темы оформления (ее примерки на свою страницу) служит кнопка "Просмотр". Если тема оформления имеет несколько вариантов их можно листать с помощью кнопок стрелочек по бокам экрана.
Для выбора понравившегося варианта темы оформления нажимают кнопку "Выбрать".
Для настройки персонализированного оформления страницы Taplink необходимо наличие платного тарифа (PRO или BUSINESS). Настройки оформления выполняют на странице "Дизайн" личного кабинета.
В качестве исходной темы оформления можно выбрать любую стандартную тему оформления, размещенную на вкладках Simple (простые), Advanced (расширенные), Animation (анимированные). Чтобы внести в нее правки нажимают кнопку "Редактировать". Персонализированные вами варианты тем оформления доступны на странице "Мои дизайны". Вы можете создать несколько вариантов своего дизайна и вносить изменения в них в любое время.
Перейдите на страницу "Дизайн" - "Мои дизайны", нажмите кнопку "+" на изображении пустой темы оформления, подтвердите создание нового дизайна и внесите нужные вам коррективы.
Для удаления собственной темы оформления переходят в "Дизайн" - "Мои дизайны", кликают по нужной теме и нажимают кнопку с изображением корзины.
Для настройки оформления кнопок переходят в режим редактирования темы оформления (страница "Дизайн", где нажимают кнопку "Редактировать" для нужной темы оформления) и указывают нужные параметры в секции "Ссылка". Можно задать шрифты и цвета надписей на кнопках, степень прозрачности кнопки (0 - непрозрачная, 100% - полностью прозрачная, только контур отображается), закругление (0px - прямоугольная, 50px - максимальное закругление) и стиль ссылки (текст по центру или выравнивать влево с отображением стрелки). После внесения всех правок нажимают "Сохранить".
Для добавления кнопкам прозрачности переходят в режим редактирования темы оформления и задают нужные параметры в разделе "Ссылка".
Прозрачность кнопки задаётся в % (0 - непрозрачная, 100% полностью прозрачная).
Также можно настроить толщину границы кнопки (0px - граница кнопки не отображается, видны только кликабельный заголовок/подзаголовок.)
Для применения изменений нажимают кнопку "Сохранить".
Для создания кнопки в цветах отличающихся от заданных в теме оформления необходимо на вкладке "Настройки" этого блока включить "Свои настройки дизайна" и задать цвета фона /надписи.
Для создания прозрачных кнопок необходимо:
1. Включить прозрачность для кнопок в настройках темы оформления (прозрачные кнопки создаются только так).
2. Для кнопок, которые должны получить фоновую заливку, активировать "Свои настройки дизайна" в настройках этих кнопок.
Необходимо выбрать стиль оформления отличный от "Иконки приложений".
Для настройки закругления блоков переходят в режим редактирования темы оформления и задают нужные параметры в разделе "Блоки". Закругление задается в px, 0 - блоки прямоугольные, 50px - максимальное закругление. Для применения изменений нажимают кнопку "Сохранить".
Для настройки цветов элементом блока "Карусель картинок" переходят в режим редактирования темы оформления и задают нужные параметры в разделе "Блоки". Для применения изменений нажимают кнопку "Сохранить".
Для настройки цвета фона и фоновой картинки переходят в режим редактирования темы оформления и задают нужные параметры в разделе "Фон".
Для фоновой заливки можно выбрать заливку одним цветом или двухцветный градиент.
Для фонового изображения задается само изображение, его размещение на странице (адаптивно по ширине, растянуть на всю ширину, растянуть на весь экран или замостить плиткой), выравнивание, режим повтора и степень прозрачности (0% - непрозрачное).
Формат фоновой картинки должен соответствовать длине вашего Taplink. Чем больше информации на странице, тем она должна быть длиннее. Мы не рекомендуем использовать большие фоновые картинки, это ухудшает время загрузки вашей страницы при медленном интернет-подключении и на слабых устройствах. Лучше ориентироваться на возможность бесшовного "сращивания" изображений по высоте. По ширине - рекомендуем ориентироваться на 540 или 1080 точек. Цвет фоновой заливки рекомендуется выбрать соответствующим цвету фона выбранного изображения.
Для применения изменений нажимают кнопку "Сохранить".
Формат фоновой картинки должен соответствовать длине вашего Taplink.
Чем больше информации на странице, тем она должна быть длиннее. Но мы не рекомендуем использовать большие фоновые изображения, это ухудшает время загрузки вашей страницы при медленном интернет-подключении и на слабых устройствах.
Лучше ориентироваться на возможность бесшовного "сращивания" изображений по высоте. По ширине - рекомендуем ориентироваться на 540 или 1080 точек.
Цвет фоновой заливки рекомендуется выбрать соответствующим цвету фона выбранного изображения. Это очень важно, так как ваши посетители могут также не увидеть текст в том случае если картинка будет не загружена (например по причине плохого качества интернета или низкой скорости). Если же цвет фона указать близкий к картинке, то люди сначала увидят читаемый текст, цвет фона, а уже когда картинка будет загружена - увидят картинку в фоне.
С помощью "Секций" можно объединить несколько блоков в единую тему оформления, выделив их фоном произвольного цвета или фоновой картинкой.
Секции могут быть локальными (созданными прямо на странице для одного или нескольких блоков) или глобальными (создаются в теме оформления, их удобно применять в один клик к нужным блокам).
Для создания глобальной секции переходят в Дизайн - Мои дизайны, нажимают "Редактировать" для выбранной темы оформления и нажимают кнопку "Добавить Секцию". Наименования секций идут по номерам, в порядке их добавления.
Для каждой секции можно задать отступы (сверху, снизу и сбоку - если отступ с боку отключен - то секция растягивается на весь экран), параметры фона (цвет, картинку), шрифты (для текстовых блоков) и параметры оформления кнопок. После настройки секции нажимают кнопку "Сохранить" настроек темы оформления.
Чтобы применить созданную секцию к блоку переходят на вкладку "Секция" этого блока, выбирают нужную секцию из списка и нажимают кнопку "Сохранить". При необходимости параметры секции можно отредактировать прямо в настройках блока.
Для замены главной страницы таплинк необходимо войти в список страниц:
пролистать его вниз до меню "Действие", где выбираете "Сменить главную страницу". Далее выбираете страницу, которую надо установить главной, и нажимаете "Сохранить":
Далее переходите в Настройки - Общие и ничего не меняя нажимаете "Сохранить", это сбросит кэш страницы и новая главная страница будет применена.
Функция "Внутренние страницы" позволяет добавить к вашему Taplink дополнительные страницы (до 99 страниц в рамках одного аккаунта). К примеру, на них можно разместить форму для сбора данных или иные элементы. Использование внутренних страниц позволит не загромождать главную лишней информацией. У всех внутренних страниц общая тема оформления, аватар, пиксель и т.д, а их URL-формируется автоматически и не корректируется.
На текущий странице будет создан блок "Ссылка" с переходом на дополнительную страницу.
Для создания новой страницы в поле "Открыть" должно быть написано "Создать новую страницу" (если страница уже создана - можно выбрать ее название из этого списка). Имя создаваемой страницы вводится в поле "Название страницы". Для страниц рекомендуется использовать уникальные названия, чтобы исключить путаницу. Далее сможете добавить на эту страницу нужные вам блоки.
В личном кабинете при работе с внутренними страницами переход делается через кнопку со стрелкой:
Для возврата на главную используется клик по ссылке "На главную" (1).
Для перехода на любую другую страницу - выберите ее из списка, открываемого по нажатию серой кнопки с белой стрелкой вниз (2).
Для создания страницы без добавления кнопки перехода на нее - нажмите серую кнопку с белой стрелкой вниз (1), а затем, в выведенном экран списке - "+ Создать новую страницу" (2).
Для всех внутренних страниц используется единая тема оформления заданная в Настройки - Дизайн. Настроить индивидуальное оформление отдельной страницы нельзя.
Вам необходимо добавить новый блок "Ссылка", в нем выбрать действие "Открыть страницу" и нужную страницу из списка.
При наличии на странице кнопки перехода на нужную внутреннюю страницу переход на нее выполняется кликом по кнопке справа:
Для возврата на главную используется клик по ссылке "На главную" (1).
Для перехода на любую произвольную страницу (независимо от наличия на странице ссылки на нее) выберите нужную страницу из списка, открываемого по нажатию серой кнопки с белой стрелкой вниз (2).
Адрес внутренней страницы отображается в строке "Моя ссылка", а также доступен (в том числе, для копирования в буфер обмена) при нажатии на кнопку "Настройки страницы".
Таплинк | Taplink | Гайд запись закреплена
Очередной набор-подарок для Вас
Условия те же самые, Вы должны быть подписаны на группу
Напишите в комментариях Хочу или в личку и я Вам дам ссылку для скачивания набора.
Хочу, буду благодарна
Таша )
Наталья, лови
Александра Ромашкина
Очень хочу
Таша )
Александра, лови
Хочу
Таша )
Анна, отправила
Таплинк | Taplink | Гайд запись закреплена
Увидела на просторах интернета, кто придумал молодец
Кто не работает в фотошоп или не знает качественные онлайн сайты для удаления фона. Один из них прикрепила к посту.
Показать полностью.
Вырезали объект и он у Вас плохого качества, что делаем:
1. Слой с вырезанным объектом ставим ниже картинки
2. Выделяем эти два слои и нажимаем на верхней панели Маска
И все.
Если было полезно, ставьте или дайте обратную связь
Таплинк | Taplink | Гайд запись закреплена
Очередной набор-подарок для Вас
Условия те же самые, Вы должны быть подписаны на группу
Напишите в комментариях Хочу или в личку и я Вам дам ссылку для скачивания набора.
Хочу, буду благодарна
Таша )
Наталья, лови
Мне пожалуйста
Таша )
Елена, отправила
Таша )
Женя, сейчас вышлю
Таплинк | Taplink | Гайд запись закреплена
Увидела на просторах интернета, кто придумал молодец
Кто не работает в фотошоп или не знает качественные онлайн сайты для удаления фона. Один из них прикрепила к посту.
Показать полностью.
Вырезали объект и он у Вас плохого качества, что делаем:
1. Слой с вырезанным объектом ставим ниже картинки
2. Выделяем эти два слои и нажимаем на верхней панели Маска
И все.
Если было полезно, ставьте или дайте обратную связь
Читайте также: