в которых мы будем с вами творить.
*фотошоп на мак устанавливаем
по инструкции, на виндовс нужно установить любой торрент, чтобы открыть файл.
Полезное
Горячие клавиши
Ctrl (command) + C - копировать
Ctrl (command) + V - вставить
Ctrl (command) + Z - отменить действие
Ctrl (command) + G - создать группу
Через shift выделяем элементы, а также увеличиваем / уменьшаем соразмерно
Через alt (option) меряем расстояние от элемента до элемента + можно дублировать элемент
Полезное
Подбора книг:
"Дизайн для НЕдизайнеров" Р. Уильямс
"Пиши ,сокращай" М. Ильяхов, Л. Сарычева
"Сожги свое портфолио" Д. Майкл
"Кради как художник" О. Клеон
"Искусство цвета" И. Иоханнес
"Искусство формы" И. Йоханнес
Полезное
Сервисы:
https://fontjoy.com - подбирает шрифтовые пары
https://www.mixfont.com - подбирает шрифтовые пары
https://coolors.co - генерирует цветовую палитру
https://color.adobe.com/ru/create/color-wheel - генерирует цветовую палитру
http://www.stickpng.com - cток с иллюстрациями
https://www.pexels.com/ru-ru/ - фотосток (работает с впн)
Инструкции:
Установка плагинов
Установка шрифтов на винду и мак
Пакет моих шрифтов
Мои любимчики:
- NEUTRAL FACE
- Manrope
- Roboto
- Inter
- CoventryC
- Kazimir
- Lovelace
- PlayFair Display
- Suisse Intl
- Libre Baskerville
- New York
Список сервисов для поиска и скачивания шрифтов:
Font storage. Коллекция насчитывает около 650 шрифтов. Много хороших шрифтов есть и на кириллице.
Paratype. Крупнейший в России магазин шрифтов. Представлено более 1000 шрифтов.
Type.today. Магазин шрифтов, а также журнал и типографике и шрифтовая студия.
Tomorrow.type.today. Экспериментальные шрифты, которые создаются студией с нуля. Некоторые из них можно скачать в пробной версии.
Future Fonts. Акцидентные и экспериментальные шрифты. Некоторые можно скачать и попробовать.
PangramPangram.Шрифтовая студия. Некоторые шрифты бесплатны для персонального (некоммерческого) использования, но не все шрифты поддерживают кириллицу, необходимо проверять.
Typotheque.Можно потренироваться в подборе шрифтовых пар, которые создаются в одноимённой студии.
Надёжные источники:
Библиотека шрифтов Google Fonts Более 800 шрифтов, которые можно применять совершенно свободно. Доступ предоставлен компанией Google.
Список бесплатных шрифтов, которые вы можете использовать для своих проектов:
Alegreya Old Standard TT
Vollkorn Open Sans
Montserrat Fira Sans
Oswald Yeseva One
Playfair Display Fira Mono
Old Standard TT
Open Sans
Fira Sans
Yeseva One
Fira Mono
Примеры платных шрифтов:
https://www.paratype.ru/fonts/pt/pragmatica
https://www.paratype.ru/fonts/pt/petersburg
https://www.paratype.ru/fonts/pt/xenia
Виды лицензий:
Веб-лицензия — нужна для отображения шрифта на сайте. Шрифт встраивается в код. Веб-лицензия обычно учитывает статистику посещений страницы. Чем больше посетителей, тем выше стоимость. Если показатели сайта растут, значит, нужно запрашивать новую лицензию.
Digital Ads — лицензия разрешает встраивание шрифта в интернет-рекламу, например баннеры. Стоимость может зависеть от количества показов.
App-лицензия — учитывает количество скачиваний приложения.
Лицензия для ePub — нужна, чтобы встраивать шрифт в электронные книги.
Server-лицензия — используется в том случае, когда пользоваться шрифтом могут не только обладатели лицензии. Это почти как облачное хранилище шрифта. Такой вариант лицензии можно внедрять в работе агентства.
Десктоп-лицензия — в основном требуется дизайнерам, которые работают с материальным брендингом — печатью упаковки, рекламных материалов, сувениров, баннеров и так далее. Шрифт встраивается в растре или в векторе.
У разных сервисов правила использования шрифтов и стоимость разные. Подробнее о них можно прочесть на сайтах шрифтовых магазинов. Внимательно ознакомься с типом лицензии и правилами использования, так как без ее покупки будет нарушаться авторское право создателя шрифта.
Полезное
Подборка композиций для насмотренности
Другие полезности для общего развития
Задание
- Создайте иерархическую композицию текста, выделив смыслы: заголовок, подзаголовок, описание. Поработайте с форматированием (жирностью, размером). Материалы для работы здесь. Формат дз: ссылка фигму (просто верно расположить текст по смыслам на белом фоне, дизайнить не нужно).
- Отфильтруйте текст, убрав воду и не несущие смысла слова. Такие тексты присылают реальные клиенты. Обратите внимание, что некоторое повторяется, исключите повторы, проработайте текст согласно структуре сайта, разделив его на блоки. Все относится к одному эксперту. Тексты находятся здесь по ссылке. Формат дз: файл ворд.
- Отрабатываем цвет и композицию в рамках мобильной версии. Не забывайте про обязательные элементы на сайте в первых экранах, о которых мы уже говорили. Материалы для дз по этой ссылке. Формат сдачи дз: ссылка на фигму.
Задание
- Отберите с любой площадки вдохновения подборки картинок/сайтов по 3ем стилям: швейцарский, минимализм, винтажный. Отразите их в Фигме.
- Проанализируйте мои референсы по этой ссылке. Подберите 3 своих по такому же стилю и настроению, отразите их в Фигме.
- Найдите на площадках вдохновения по 5 достойных примеров-референсов для ниш (помните, что на референсах не обязательно должен быть фотограф/стилист/цветы и тд, нам важно настроение проекта, каким вы его видите)
- Дизайн-интерьера
- Эксперт-фотограф
- Эксперт-стилист
- Флористика
- Свечи, керамика, лепка
Как вы думаете, какие ассоциации каждая из ниш может вызывать?
Какое настроение может быть у этих проектов?
**Поделитесь 5ю своими любимыми аккаунтами в общем чате (либо кого нашли после просмотра урока) в инсте, давайте вдохновим друг друга и поделимся красотой!
Полезное
Еще сайты для вдохновения помимо тех, что были в уроке:
Чаты в tg:
https://t.me/+2BgCKREek4Y4YzI6
Аккаунты в inst:
Дорогой контент с Pinterest
https://ru.pinterest.com/pin/710442909991364885/
https://ru.pinterest.com/pin/784822672584706622/
https://ru.pinterest.com/pin/484770347402109807/
https://ru.pinterest.com/pin/1266706137562159/
Полезное
+ на канале выйдет доп. урок по новым кодам с анимацией
Обновления таплинк:
Не так давно платформа выкатила обновление - теперь меню можно создавать уже внутри таплинк без кода.
На главной странице платформы возле кнопки "установить" нужно нажать на серую стрелку - далее на верхнюю графу "меню навигации". В этой графе можно выбрать тип меню, задать настройки дизайна, пункты.
Есть небольшой минус: меню таплинк применяется на все страницы сайта.
Если на странице нужно скрыть меню, вставьте в блок HTML этот кусочек кода ↓
<style>
.menu-block-container {
display:none;
}
</style>
Я в последнее время создаю меню именно через встроенные функции таплинк, но иногда пользуюсь и кодом. Вы можете работать и так, и так.
В вашем портфолио придется использовать и код меню, и встроенное меню, поскольку вам нужно разное меню на каждом проекте.
Для кода прикрепляю дополнительную инструкцию:
Для меню (пляшка через код) нужно прописать якорную систему.
Как мы называли блоки именами (присваивали им имя), в коде они не работают, мы должны прописать якорь сами.
Вид якоря:
<div id="якорь"></div>
(В кавычках вы можете писать что угодно, хоть 1,2,3,4).
Далее остаётся прописать путь к якорю.
Выглядит он так - адрес страницы, где находится якорь, #якорь
То есть.
Допустим, перед блоком контакты у нас стоит якорь <div id="contact"></div>
Значит в коде меню мы пишем
адрес станицы нашего сайта (https://…#contact)
Пример:
https://an-eryshevaa.ru#contact