неКОЛХОЗИМ биошку на чатур
Эту статью написал канал Just a model.
Увидел в комментариях просьбу рассказать о том, как сделать био на чатур, да так, чтобы не колхозно было.
Конечно, я мог бы рассказать вам про Designbate, генератор биошек, но... Но меня попросили рассказать о не колхозном варианте... поэтому я сделал свой генератор биошек
На самом деле я пишу эту статью уже второй раз - в первый раз я хотел рассказать тебе за HTML и CSS, но понял, что статья будет... Ну как-минимум сложной...
Проблема заключается в том, что кто-то поставил "не колхозно" и "Chaturbate" в одно предложение что для создания биошки надо знать хотя бы основы HTML и CSS - без этого никак... или?
Ладно, если ты читаешь это, значит я все-таки что-то придумал.
В общем, я решил рассказать о том, как сделать биошку самым простым, но при этом самым лучший (по оценке финального результата) методом - с помощью картиночек, подготовленных в фотошопе.
А для того, чтобы тебе не пришлось писать код вообще я написал свой генератор био. Потому что я могу.
О генераторе
Генератор, который я сделал представляет из себя максимально простенький сайт с максимально колхозным дизайном - я сделал это минут за 40, лол, не судите строго.
В этом блоке мы указываем ссылку на картинку. Также ты можешь сделать эту картинку ссылкой на любой ресурс или ссылкой на вступление в фанклуб - для этого выбери в выпадающем списке "Указать ссылку" и вставь ссылку на любой сайт или выбери "Фанклуб" и укажи свой ник на чатуре.
Этот блок позволяет вставить любой текст. Ко всему тексту, отдельному слову или фразе можно применить определенный стиль/сделать ссылкой - выдели то что ты хочешь стилизовать и нажми на кнопочку.
Блок отступа - просто добавит пустое пространство в био. Введи сколько пустого пространства должно быть и все.
А это поможет тебе сделать блок со строллабл-списком. Ты можешь использовать это для тип-меню, списка фан-клуба или чего-то еще.
Скролл-список будет расположен в левой части блока, а выглядеть это будет примерно так:
Ты можешь настроить цвет ободки списка, цвет фона списка и цвет текста
Высота фоновой картинки должна составлять 600 пикселей. А ширина... Ну я тестировал весь генератор с шириной картинок в 900 пикселей - тебе рекомендую тоже самое
Также ты можешь перетягивать блоки, для того, чтобы поменять их местами.
Когда ты натыкаешь все что тебе нужно нажми на кнопку "Сгенерировать" и пролистай чуть ниже - ты увидишь предпросмотр твоего био
А если ты откроешь вкладку "HTML-код", то ты обнаружишь там готовый код твоей биошки - скопируй его и вставь в чатур. Ты великолепна/великолепен!
Как подготовить картинки?
Для того, чтобы сделать свое стильное меню тебе понадобится подготовить все картинки. Ширина картинок может быть любой, но я рекомендую тебе использовать значение 900 пикселей.
Кроме того, блок генерации списка настроен под картинку 900 пикселей шириной и 600 высотой... Может быть, когда-нибудь, я дам возможность выбирать кастомные размеры, но пока-что... Пока что мне лень)))
А как сделать картинки? В этом тебе поможет, например, Photoshop или Canva.
Где спиратить фотошоп и как им пользоваться тебе придется искать в интернете - например, на YouTube есть куча отличных туториалов
Хочешь сделать картинку не прямоугольной? Не проблема - сделай ее не прямоугольной, на прозрачном фоне и сохрани это в виде .png файла
Ты можешь даже нарисовать все блоки от руки, отсканить/сфоткать их и подогнать в фотошопе - так ты можешь сделать биошку нарисованную от руки.
Генератор поддерживает следующие форматы картинок: .png .jpg .jpeg
Куда загружать картинки?
В первую очередь, после того как ты сохранишь картинку тебе надо открыть сайт ImgBB
Кликни на "Начать загрузку" и выбери свою подготовленную картинку.
После чего убедись, что в настройках выбрано "Никогда не удалять" и зажми на кнопку "Загрузить".
После чего ты увидишь ссылку на просмотр.
Скопируй эту ссылку и открой в новой вкладке браузера.
Откроется страничка с твой картинкой. Тебе нужно нажать на нее правой кнопкой мыши и выбрать пункт, который называется "Копировать URL картинки" или "Копировать ссылку на изображение" - именно эту ссылку тебе и надо вставлять
Чтобы проверить, что это действительно та ссылка посмотри на самый ее конец.
Как настроить курсор?
Найти нужную тебе картинку курсора (например, лапку).
Загрузи ее на IMGBB, посчитай и укажи координаты "горячей точки"
Горячая точка - это место фокуса курсора. То есть координаты той точки, которая будет кликать x)
X - количество пикселей до горячей точки от левого края
Y - количество пикселей до горячей точки от верхнего края картинки
Видео
А вот тут вот я оставлю видео, где я показал на примере как все это использовать