Привет! Если тебе кажется, что у меня изменился цвет волос, тебе не кажется. Он действительно изменился. Но сейчас не об этом. Сейчас мы будем проходить последний урок по обложкам. Мне важно, чтобы в конце у тебя было полное понимание о том, как правильно делать обложки, и чтобы в любую секунду, разбуди тебя ночью, ты мог создать любую обложку на любой вкус. Поехали!
Мы входим в Tilda. Кстати, когда в Tilda происходит что-то новенькое, они это выставляют, и тебе на почту присылают уведомление, что же тут интересного произошло. Всегда их читай. В твоем случае я бы нажала «Подробнее» и пошла читать. Всегда читай, потому что здесь рассказывается про функционал новых блоков. Это очень важно, потому что, если ты будешь дальше работать, допустим, не с landing page, а с интернет-магазином, потому что в данном случае — это элемент для интернет-магазина, тебе нужно знать вот такие вещи.
Мы заходим в Rusicecream. У тебя этого всего не будет. У тебя будет сразу здесь такая штучка, и продолжаем урок про наши обложки.
Помним, что навели тут красоту, что у нас есть выключенный блок, который мы можем включить, опубликовать, все посмотреть.
Сегодня мы будем с тобой смотреть, как делать обложку с видео и как подгонять рисунок, если он нам не подходит по ширине.
Начнем мы с видеообложки, посмотрим, как ее создать.
Я нашла в YouTube ролик. Ты точно так же загружаешь этот ролик. Если, например, у компании есть какой-то свой ролик, они загружают его на YouTube, дают тебе ссылку, ты ее копируешь. Ctrl+C. Заходишь вот сюда. Мы помним, что все содержательные вещи у нас находятся в «Контенте». Нам нужно с тобой в «Обложку». У нас тут есть вот такая штука, которая стоит на обложке. И есть ссылка на YouTube-ролик или его ID.
Также можно — ссылку на файл в формате mp4 или ссылку на сюда. Но самое популярное и самое простое — это ролик YouTube.
Мы сюда вставляем — Ctrl+V. Эту штучку удаляем. Делаем «Сохранить и закрыть». Смотрим. Первая обложка. Вторая обложка.
Лучше видео не делать на каких-то сотовых телефонах или на планшетах, потому что оно долго грузится. Я еще раз обновлю страницу, смотри, сколько времени проходит прежде, чем оно загрузится. Да, конечно, какие-то секунды, но они тоже создают впечатление.
Тут может быть, как они создают торт-мороженое. Я рандомный ролик взяла, потому что у нас придуманный кейс. Вот так это может выглядеть. Человек будет залипать на это видео. Так уж создано природой, что человек залипает на все, что движется. Он будет залипать, смотреть, читать. Потом осознает: «О, боже! Я смотрю на торт уже полтора часа. Надо заказать!» На это и рассчитано.
Видео — это самое простое, что может произойти.
Существуют разные фотостоки и видеостоки, которые бесплатные. Насчет видеостоков бесплатных — много их нет, но есть энтузиасты, которые это делают, выкладывают бесплатные видеостоки, потому что видео на YouTube — авторское, оно стоит каких-то денег. Есть Shutterstock, еще какие-то стоки, где можно видео купить, либо человек его производит и закатывает на YouTube, где ты можешь его взять.
Причем, обрати внимание, что градиент сохраняется. Тот же самый градиент, который мы делали, его можно поменять.
Теперь мы будем с тобой разбираться: если фотография маленького формата, если она, например, не на весь экран. Что с этим делать?
Заходишь в материалы к пятому уроку. Пятый урок — у нас тут есть вот такие картинки, которые нам не подходят. Мы думаем, что нам не подходит эта картинка, потому что она не на весь экран, она будет вертикальной, а нам нужна горизонтальная.
Логика, по которой мы можем что-то сделать. Нам нужен Photoshop. Я его сейчас открою.
Вспоминаем, какая должна быть обложка? Обложка у нас должна быть максимум 1920*1080. В Photoshop есть уже заготовленная такая штука – hdtv, но нам она не нужна, так как там какая-то разметка. Поэтому мы переходим в Web. И тебе нужно вот это.
Обрати внимание, как раз то, что нам нужно, — Web Large называется, т. е. веб большой, — 1920*1080 пикселей, 72 dpi — это то, что нам нужно для нашей обложки. Выбираем.
Вот такой формат. Но у нас-то все вертикальное. Что же с этим делать? Сейчас я покажу, что с этим делать.
Логика такая: если ты вот так перемещаешь сюда и понимаешь, у меня не хватает вот этого всего, ты можешь вырезать этот торт и поместить его на другую поверхность. Можем такую нарисовать. Но для этого надо рассчитать нашу обложку. Можно сделать Print Screen, давай его сделаем. Print Screen — это такая клавиша на клавиатуре — PrtSc, если ты работаешь на «маке» — это Shift — Cmd — 4. Я сделала Print Screen, он у меня сохранился. Я захожу в Photoshop — File — Place Linked или Place Embedded, не знаю, как нормально перевести это на русский. Но ты можешь сюда зайти и у тебя тут будет «Искать в Adobe Stock» и т. д. Тебе надо поместить сюда каким-то образом картинку. Я эту картинку нахожу.
Смотри внимательно. Инструмент у нас должен быть включен вот такой, либо никакой. Стрелочка принимает вид двух стрелочек, ты нажимаешь Shift и тянешь с сохранением пропорций, двигаешь, куда тебе нужно. Нам важно, чтобы по ширине уместилось, как есть. Для чего я это делаю? Чтобы понять, где у нас пустое пространство. Я не помню наверняка. Поэтому, как понять, где осталось пустое пространство, чтобы этот торт как раз туда вписался? Смотри внимательно: здесь можно полупрозрачность установить, и вот я теперь вижу, что торт этот – нижний слой – нужно подвинуть, чтобы он был где-то между заголовком, будет хорошо, и можно его даже немного увеличить. Вот так, например. Он будет немного вылазить у меня из вот этой штучки, когда мы загрузим, но в целом будет смотреться окей. Я хочу, чтобы пол было видно. Вот так, отлично. Смотри, я увеличила, т. е. полупрозрачный слой мне примерно дает понять, где у меня будет вот эта форма и как у меня будет расположен объект. Вот так примерно меня устраивает. Видно вот этот бочок сладенький. Пустое пространство, на котором может быть расположен текст. И сразу форма. В принципе, окей. Выключаем эту полупрозрачную форму. Этот объект у нас остается здесь. Мы померили, что нас это устраивает. Что дальше делать с этим объектом?
Ты можешь прибегнуть к такой штуке — вырезать объект. Как вырезать объект? Существует много способов, как можно вырезать объект. Можно, например, так сделать и какие-то области захватить, можно еще вот таким способом его резать, но самый чистый способ, как можно вырезать объект, — это Pen Tool («Ручка»). Смотри, как ею работать. Я объясню принцип. Для новичков это может быть немного тяжеловато, но на самом деле это все вопрос тренировки. Ты делаешь одну точку, другую точку делаешь там, где должен быть сгиб или разворот, и, не отжимая мышки, ведешь вниз. И вот эта дуга, которая образуется, это и есть линия будущей формы. Вот примерно, чтобы совпадало. Если что-то не получается, всегда можно подергать за эти хвостики с помощью вот этой белой стрелочки.
Обрати внимание, тут образуется контур и заливка. Где найти и где поменять? Вот тут они. Fill и Stroke. Нам не нужен Fill, потому что нам нужно видеть картинку, которую мы обводим. А Stroke давай сделаем поярче, потому что иначе мы не будем понимать, что мы обводим. Все это меняется здесь очень просто: на галочку нажимаешь, выбираешь, как у тебя будет выглядеть строка. Она может быть пунктирной, может быть шариками. Здесь выбираешь толщину строки. Но мы не рисовать сюда пришли, нам нужно обвести, поэтому нам чем она виднее, ярче и тоньше, тем лучше, чтобы она не загораживала объект. И вот здесь ты выбираешь цвет. Я выбираю самый яркий, который практически отсутствует здесь. Зеленого тут нет, поэтому я буду зелененьким, и его хорошо видно.
Fill нам не нужен, потому что Fill — это заливка, которая зальет нам весь контур, который мы будем обводить, а нам нужно видеть предмет.
Итак, «Ручка». Я еще раз щелкаю. И вот ты ведешь. Смотри, где у тебя происходят какие-то изменения, там у тебя и должна быть следующая контрольная точка. Смотри, какая логика: здесь спуск, я сюда ставлю точку; здесь пока ничего нет, но следующий спуск, я здесь ставлю точку, чтобы следующую точку тоже спустить. И она как бы обволакивает. Вот здесь ровно должно быть, вот здесь — спуск. Давай я приближу, покажу. Дальше у нас все ровно. Дальше — небольшой подъем и небольшой спуск, поэтому я здесь создаю такие штучки. Тут не очень видно, но где-то здесь заканчивается наш торт. А дальше идет вот эта окружность, т. е. по идее тут должна быть окружность. Так как эта окружность выгибается немножко, я делаю вот такие штучки, и они обрисовывают то, что происходит. Дальше, где решишь точку поставить? Точку поставить посередине, потому что здесь дальше загибается, а дальше идет ровно. Мы так и делаем. Все это придет к тебе с опытом, если ты будешь работать с «Ручкой». Видишь, здесь происходят изменения и здесь полукруг, поэтому я вот так делаю.
Вот у нас закрылся путь. Смотри внимательно! Вот здесь не кругленько получилось — не хорошо. Что делать, если тебе не нравится, как выглядит линия, или не нравится, как выглядит точка? Есть такие инструменты. Если тебе не хватает точки, то, если ты вот здесь подержишь подольше, вылезет такое меню. Ты можешь всегда изменить, т. е. убрать вот эти усики. Вот этой стрелочкой пустой убираются усики. Сейчас покажу где. Мы щелкаем и вот эти точки — наши места, куда мы ставили точку. Если я сейчас нажму на нее, то она станет углом. Видишь? Усики убрались. Это тоже нажму — станет углом. И в то же время, если ты этот угол зажмешь и будешь тянуть, у тебя появятся усики, т. е. начнется сглаживание углов. При этом, смотри, если ты развернёшь, у тебя линия так может загнуться. Следи за тем, чтобы она сгибалась правильно.
Белая стрелочка — полностью переносишь: один раз щелкаешь по точке, точку переносит, если тебе не нравится, как она расположена. Этой же белой стрелочкой можно убирать усики, уменьшать их. Например, вот здесь усика явно не хватает. Но щелкать нужно прямо по кнопочке и тянуть — прямо за усик. Это очень точно нужно делать, иначе у тебя ничего не получится.
Вот здесь, например, мне не нравится.
Т. е. переносишь все белой стрелочкой по точкам. Ты жмешь конкретную точку и с ней работаешь.
Если ты нажмешь на этот инструмент долго, то будет черная стрелочка. Она весь контур переносит. Ты на контур щелкаешь и можешь перенести его вот сюда, например. Ctrl+Z — обратно убирает. У нас почему-то линия разделилась на несколько частей, но ладно. Суть ясна.
Допустим, нам контур нравится, мы все исправили, он хорош.
Что делать, если у тебя получилась такая вещь: где-то у тебя «Ручка» прерывала свою линию, у тебя несколько shape получилось? Ты их просто объединяешь. Ты их выделяешь с помощью Shift + щелчок на первом и последнем слое, который тебе нужен. Нажимаешь Ctrl+E, у тебя объединяется это в один shape, т. е. в одну форму. Да, скорее всего, у тебя будут какие-то странности, например как здесь очень все запуталось, потому что именно здесь у меня стрелка и прервалась. Но ты с этим можешь легко разделаться. Как? Здесь существует такая вещь: если ты долго нажмешь, у тебя выпадет список из «Ручек». Тебе нужна минусовая ручка, которая убирает лишние непонятные точки. Мы их убираем, потому что они нам вообще не нужны. Они очень странно себя ведут. Весь shape выделяешь, смотришь, где у тебя эти точки расположены, ты их просто убираешь. И у тебя рано или поздно образуется нормальный shape, нормальная форма. Важно вот эти кнопки повыключать, которые странными были. Теперь видишь, только одна линия такая осталась. Выделяем вот это белой стрелочкой, чтобы обязательно здесь кнопочка такая была. Берем «Ручку» и прямо из нее, посмотри, у тебя этот значок белую точку приобретает, это значит, что ты присоединяешь к этой линии. Ты щелкаешь, и у тебя линия отсюда сюда потянется из этой же точки. Т. е. ты убрал все лишние штучки и продолжаешь линию. Обрати внимание, shape один остался. Когда shape закрылся, получается вот такая круглая точка, это значит, что мы замкнули линию. Shape 1 — вот он.
Это очень важно делать, хотя это кажется нудным, потому что чище ты не вырежешь. И никаких лишних пикселей не останется, если ты точно обвел контур нужного тебе предмета, то ты полностью контролируешь то, что происходит. И это очень важно. Гораздо красивее вырезать так, чем еще как-то.
Итак, мы обвели. А как вырезать? Мы зажимаем Ctrl, один раз щелкаем по слою с нашим контуром. Ctrl и один щелчок. У нас началось выделение.
Photoshop устроен так, что когда ты работаешь с каким-то слоем, выделен тот рабочий слой, с которым ты работаешь, поэтому ты идешь на тот рабочий слой, в котором есть эта картинка. Вот он у нас выделен по вот этому слою, а переходим мы на этот слой. Просто переключаем мышкой, чтобы слой вот этот выделился. И нажимаем Ctrl+J. Выключаем этот слой зеленый, выключаем этот слой, и ты видишь, что у нас остается вот только один этот предмет.
Дальше мы можем работать с помощью коллажа. Т. е. ты можешь создавать новый слой, видишь, чистый белый появляется. Ты можешь использовать любую заливку, например какую-нибудь сероватую. Посмотрим, ничего. Можешь использовать такую штучку, как «Большая ручка». Делаешь ее побольше. Hardness — поменьше. Выбираешь, например, белый цвет. Заходишь сюда, тыкаешь прямо на торт, вот он у тебя начинает светиться. И можно сделать еще подложку. Например, мы делаем стол. Видишь, выделение я сделала, выделила стол, опять — новый слой и, например, розовый какой-нибудь. Посмотрим.
Вот ты и растянул обложку на весь экран. Можно это поменять на другой цвет. Два раза щелкаешь вот здесь, не на название, а на саму выделенную область, у тебя всплывает еще одно окно, где ты можешь поменять Color Overlay — это перекрытие цвета. Можешь поменять цвет, например на серый.
Т. е., что важно? Если изначально у тебя была вот такая картинка, то сейчас ты вырезал предмет, и теперь ты можешь придумать любой фон. Можешь оставить так, если человека это устраивает. Можно добавить, например, серого. Тебе нужно создать новый слой и выбрать из палитры, вот у тебя ведерко из палитры, тот цвет, который тебе надо. ОК. Любую заливку можно сюда сделать. Допустим, мы на этом остановились. Нам все нравится: File — Save as — «Рабочий стол» — Jpeg — «Торт» — Save — ОК. Tilda — «Контент» — «Обложка» — «Загрузить файл» — «Загрузить файл» — cake. Видеозапись удаляем. «Сохранить и закрыть».
Обрати внимание, градиент сохранился, все сохранилось, осталась только вот эта штучка.
Если у тебя есть такая задача, нужно вырезать и делать.
Если, например, у тебя есть эта картинка, и у тебя не цветастый фон, а был бы ровный стол, то что можно сделать в таком случае?
Ctrl+J — копирует слой.
Если смотришь вот на такой значок — это значит смарт-объект. Тебе нужно из смарт-объекта это перевести. Т. е. ты можешь просто кисточкой на чистом поле щелкнуть. Он ругается, спрашивает: «Что? Перевести тебе из смарт-объекта?» Да, конечно. Кисточкой больше ничего не делаешь. Но тебе нужно выделение прямоугольное. Выделяешь до конца, т. е. до начала предмета, фон. Нажимаешь Ctrl+T, у тебя появляются вот такие границы, которые позволяют тебе редактировать.
Представь себе, что стол был равномерным, потому что полоски растянутся. А на фон будешь обращать внимание — он растянется и будет окей.
Ты тянешь это все. Он тянется, тянется. Ctrl+D — снимаем выделение, и вот ты видишь, как у тебя прекрасно растянулся фон. Если бы стол был монотонный, это тоже сработало бы. Но и так сойдет, красиво выглядит. Можно это подкорректировать.
В общем и целом, правило какое? Если фон равномерный, то ты можешь этой возможностью пользоваться.
Еще раз повторяю. Ты наводишь на тот слой, в котором лежит картинка. Берешь прямоугольное выделение, выделяешь то, что ты собираешься растягивать, до предмета, нажимаешь Ctrl+T, у тебя получаются вот такие границы. Значит, ты сейчас можешь это изменять. И тянешь до того момента, пока тебе нужно. Галочку нажимаешь. Ctrl+D — снимаешь выделение.
Очень даже мило получилось. Давай его зальем. File — Save as. Выбираешь, куда. Выбираешь, что это jpeg. Выбираешь имя — cake 1. Сохраняешь. Ок.
Заходишь сюда. Вот у тебя какая штука. Копируешь ее, заходишь в «Контент» — «Обложка» — «Загрузить файл» — находишь свой cake 1. «Сохранить и закрыть».
Отлично. Смотри, что мы с тобой прошли.
Мы прошли, как просто подогнать картинку из большой картинки в ту, которая нам подходит. Как сделать векторный файл и скомпоновать его из двух. Как сделать видеообложку. Как расширить файл, если он вертикальный, а нам нужен горизонтальный, причем двумя способами: если у нас равномерная подложка и если она неравномерная, нам придется вырезать.
Надо переходить к другим видам обложек, чтобы у тебя была какая-то насмотренность, чтобы примерно, справочно, иметь представление, что еще можно сделать.
Обложку можно скопировать вот здесь и поменять ее тип. При этом обращай внимание, что весь контент теряется. Как только ты меняешь тип, на такой например, контент перестает быть тем контентом, который у тебя был до этого. Это можно отменить, он вернется. Или так создаешь новую обложку, выбирая здесь, либо нажимаешь на черный крестик, тут все всплывает. Тебе нужна только обложка, и выбираешь ее из этого списка.
Давай посмотрим, какие бывают обложки. Это легко, это просто текст. Ты загружаешь картинку, заходишь в «Контент», исправляешь текст. Это то же самое. Здесь то же самое — картинка — это просто твой логотип. У тебя будут две картинки здесь. В «Контенте» у тебя будет фоновое изображение и логотип. Давай посмотрим. «Загрузить файл». Загружаем файл cakes любой. И теперь нужно будет загрузить логотип. Т. е. тут вообще ничего не нужно настраивать.
Что дальше? Еще какую обложку посмотрим?
Здесь все понятно, будет просто текст и картинка. Это тоже все в «Контенте».
Форму мы с тобой настраивали.
Кнопки. Повторяюсь, здесь ты просто картинку подвяжешь, здесь у тебя будет просто текст. Если зайдешь в контент, соответственно, текст кнопки будешь указывать, ссылку для кнопки, либо, как мы говорили, как настраивали форму до этого — с хештегом — это будет номер кнопки — имя блока, который вызывает эта кнопка. Сама по себе кнопка никакая на обложке не работает.
В каждой обложке можно фоновое видео загружать. Это практически в любой обложке есть: либо картинку, либо видео. Это любая обложка поддерживает.
Дальше смотрим, какие бывают обложки.
Кнопки мы уже настраивали с тобой на четвертом уроке. Кнопки все настраиваются одинаково. Кнопка — это либо ссылка на какую-то страницу. Ты просто берешь, например, вот эту кнопку — Ctrl+C — ссылка для кнопки — Ctrl+V. «Сохранить и закрыть». «Опубликовать». Давай посмотрим, что я имею в виду. Будешь переходить туда, куда будешь переходить. Т. е. ссылку не трудно сделать. Труднее форму подвязать. Но ссылку ты просто Ctrl+C — Ctrl+V делаешь в «Контенте» — «Ссылка для кнопки».
По логотипу тоже бывают ссылки.
Тебе, в принципе, чтобы понять, как работает обложка, достаточно зайти в ее контент, и тут все будет просто и понятно написано. Плюс здесь всегда есть справка.
Я хочу, чтобы ко всему тому, что мы с тобой сделали, ты обязательно сделал обложку с отсчетом.
Здесь есть, как настраивать. «Дата окончания таймера», «Время окончания таймера», «Часовой пояс таймера», «Заголовок»… «Ссылка для кнопки», «Ссылка для второй кнопки», «Фоновое видео», «Надзаголовок». Все это есть.
Если какая-то обложка тебе непонятно как работает, есть справочный центр. «Работа с обложкой». В любом блоке есть подсказка, как работать. Ты можешь это прочитать.
В любом случае, в любом месте ты можешь обратиться к справке.
Настроим обложку. Меня интересует только таймер. Давай настроим только таймер, потому что все остальное достаточно легко настроить. Тут только два раза щелкнул — изменил текст. Кнопку мы с тобой научились подвязывать. Это просто логотип, всегда можешь его сам загрузить, фоновую фотографию тоже. Градиент тоже можешь уже настроить. Во всяком случае, я думаю, что это должно было получиться.
Я хочу, чтобы ты просто настроил отсчет времени. Здесь есть дата окончания таймера, есть время окончания таймера, часовой пояс таймера вот здесь. Пример, для Москвы нужно указать +03, для Лондона — +01. Часовые пояса. Скорее всего, ты будешь делать landing page для России, поэтому у тебя уже все указано. Но если очень сильно хочется сделать отсчет для другой страны, зайди в справку про часовые пояса и посмотри, по какому часовому поясу находится та страна, которая тебе нужна.
Здесь — «Дата окончания таймера» — ты указываешь вот в таком формате. Давай мы с тобой напишем дату окончания таймера — 2020-08-09.
«Время окончания таймера» давай с тобой напишем, например акция у нас заканчивается, пусть она заканчивается в 14.00.
«Сохранить и закрыть». Таймер у нас с тобой поменялся. Давай вот здесь напишем 2019 год. «Сохранить», «Закрыть». Осталось 16 дней.
Итак, что я жду от тебя в конце всего этого действа нашего. Сегодня у нас последний урок по обложкам, потому что нам уже давно пора переходить на другие инструменты. Я хочу, чтобы у тебя была вот такая обложка, вот такая обложка, вот такая обложка (сейчас видео загрузится), вот такая обложка, вот такая обложка и даже вот такая обложка. Все обложки, которые ты здесь видишь, я хочу, чтобы у тебя были. Грубо говоря, тебе нужно просто все повторить. И отдельно, пожалуйста, — файл с вырезанной вот этой лошадкой. Я тебе в папочку положу и другие вертикальные фото, можешь выбрать любое из них, вырезать любое из них.
Что делать, если не очень понятно, как работает Pen Tool?
Я понимаю, что я дала краткий экскурс, хотя, на мой взгляд, довольно подробный. Что делать, если непонятно? Нужно задавать вопросы. Можно задавать вопросы мне, можно задавать вопросы другим дизайнерам, потому что наверняка ты состоишь в социальных сетях. Но лучше всего, я бы нашла несколько уроков на Youtube, как пользоваться Pen Tool.
Если ты ищешь уроки по Pen Tool в Youtube, не обязательно, чтобы это были уроки по Pen Tool в Photoshop, потому что Pen Tool в Illustrator работает абсолютно также. Поэтому Youtube тебе в помощь. Google тебе в помощь. Я тебе в помощь на самый крайний случай, если сам не разобрался. Всегда пробуй разобраться во всем самостоятельно, это отличная точка роста и развития. Мы же все профессионалы тут собрались.
Встретимся на следующем уроке.
Пока!
