Помогите, пожалуйста, найти шрифты
Очень нужны эти шрифты, но битый час прорывшись в нете, так ничего и не нашёл. Буду очень признателен, если кто знает их названия🙏 можно хотя бы один, тот что «этапы…» Заранее благодарю!
Очень нужны эти шрифты, но битый час прорывшись в нете, так ничего и не нашёл. Буду очень признателен, если кто знает их названия🙏 можно хотя бы один, тот что «этапы…» Заранее благодарю!
Веб-дизайном можно заниматься из любой точки мира и зарабатывать столько, сколько хочется — это одно из преимуществ профессии. Количество денег вы определяете сами исходя из своих умений и свободного времени.
Самое важное в работе — навыки. На курсе «Веб-дизайнер» от Pikabu Study вы научитесь делать красивые и удобные сайты, работать с растровой и векторной графикой, создавать анимацию. Опыт работы не нужен, погружаем в профессию постепенно и с нуля.
После обучения у вас будет база, чтобы работать в новой сфере. Вы сможете брать заказы на фрилансе или устроиться в классную компанию (интересный факт: все веб-дизайнеры Пикабу работают на удаленке — от Москвы и Урала до ближнего зарубежья).
До 5 июня на курс действует скидка 30%. Старт ближайшего потока — 23 июня. И уже осенью вы освоите новые навыки и профессию!
Веб-дизайном можно заниматься из любой точки мира и зарабатывать столько, сколько хочется — это одно из преимуществ профессии. Количество денег вы определяете сами исходя из своих умений и свободного времени.
Самое важное в работе — навыки. На курсе «Веб-дизайнер» от Pikabu Study вы научитесь делать красивые и удобные сайты, работать с растровой и векторной графикой, создавать анимацию. Опыт работы не нужен, погружаем в профессию постепенно и с нуля.
После обучения у вас будет база, чтобы начать работать в новой сфере. Вы сможете брать заказы на фрилансе или устроиться в классную компанию (интересный факт: все веб-дизайнеры Пикабу работают на удаленке — от Москвы и Урала до ближнего зарубежья).
До 5 июня на курс действует скидка 30%. Старт ближайшего потока — 23 июня. И уже осенью вы освоите новые навыки или профессию! Записывайтесь в форме ниже, мы всем ответим!
Во многих сайтах и программах уже давным — давно используются такие элементы взаимодейтсвия пользователем, как «Слайдер», по сути это одна большая фотография которую можно переключать с помощью стрелочек или по нажатию на клавиши. Удобно когда на экране мало места, а показать множество фотографий нужно.
Как же создать вот такой слайдер?
Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.
План
1. Пишем структуру
2. Пишем стили
3. Пишем код
4. Заполняем объект
Пишем структуру
Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».
<div class="slider">
<button id="left">
<img src="https://cdn-icons-png.flaticon.com/512/318/318476.png">
</button>
<img id="slider_image" src="">
<button id="right">
<img src="https://cdn-icons-png.flaticon.com/512/318/318476.png">
</button>
</div>
Пишем стили
Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.
body{
outline: none;
user-select: none;
font-size: 16px;
}
h1,p{
margin: 0;
padding: 0;
}
p{
margin-bottom: 10px;
}
a{
text-decoration: none;
background-color: rgb(50,50,50);
color: white;
padding: 5px 20px;
}
a:hover{
background-color: rgb(70,70,70);
}
.slider{
background-color: rgb(230,230,230);
height: 350px;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.slider #slider_image{
background-color: rgb(50,50,50);
height: 400px;
min-width: 400px;
}
.slider button{
width: 70px;
height: 70px;
margin: 30px;
border: none;
border-radius: 100%;
padding: 0;
background: none;
}
.slider button img{
width: 50px;
height: 50px;
}
.slider #left img{
transform: rotate(180deg);
}
.slider button:hover{
opacity: 80%;
cursor: pointer;
}
Пишем скрипт
Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.
let slider_cfg = {
1: "https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_96...",
2: "https://cdn.pixabay.com/photo/2015/03/27/13/16/maine-coon-69...",
3: "https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__...",
4: "https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__...",
5: "https://cdn.pixabay.com/photo/2019/11/08/11/56/cat-4611189__...",
6: "https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__...",
}
// varibles
let slider_image = document.getElementById('slider_image');
let left = document.getElementById('left');
let right = document.getElementById('right');
let sin = 1; //slider_image_number - sin
let size = Object.keys(slider_cfg).length;
let path = slider_cfg[sin];
// update slide
function update(){
path = slider_cfg[sin];
slider_image.setAttribute("src", path);
}
// toggle slides
left.onclick = function(){
if (sin > 1){
sin = sin - 1;
} else{
sin = 1;
}
update();
}
right.onclick = function(){
if (sin < size){
sin = sin + 1;
} else{
sin = size;
}
update();
}
// start
update();
Заполняем объект
Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ' ' », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.
Итог
У нас есть рабочий и очень простенький слайдер для переключения фотографий, которые мы заполняем в объект. Все это работает без сбоев и хорошо.
Ссылка на код: https://codepen.io/Anton-Malezhik/pen/ZEJvbNQ
Недавно Российская Газета изменила дизайн. Теперь всё в кучу. Да и дизайн овно какое-то.
Веб-дизайнер создает красивые сайты и лендинги, делает так, чтобы они хорошо выглядели на любом устройстве, и анимирует все что захочет. Освоить профессию веб-дизайнера можно на курсе Pikabu Study.
Даже если пока еще вы не знаете, чем сайт отличается от лендинга, это не страшно. Сотрудники Пикабу, которые преподают на курсе, все объяснят и помогут освоить новые навыки.
Начнем с базы: как пользоваться всеми нужными для работы программами (фотошоп, иллюстратор, фигма), как составлять композицию и играть шрифтами. Закончим собственноручно сделанными лендингами, которые будут решать задачи клиентов. Их можно добавить в свое портфолио! Если вы далеки от дизайна, но очень хотите научиться, — это хороший старт.
До 5 июня на курс действует скидка 30%: получится от 4083 рублей в месяц. Старт ближайшего потока — 23 июня. Интересно или есть вопросы? Оставьте свои данные в форме ниже, и мы с вами свяжемся!
Привет всём. Решила я тут начать изучение Веб-дизайна, CSS, html, Java и тд. В общем для меня это ново и сложновато, но я учусь...)
Недавно решила пока потестить, что такое Тильда и сделала свой первый сайт, с фотками района.
Дело в том, что когда 2 года назад нас посадили на карантин, я стала фотать тупо из окна. В итоге набралось очень много красивого контента.
Сайти визитка, вроде всё работает. Прошу посмотреть, поклацать, мож че убрать, может цвета не очень... Думаю может форма обратной связи не нужна наверно. Хз. В общем буду признательна, кто посмотрит свежим взглядом.
Конечно там не всё фотки, ибо их дофига, поэтому отдельно сделала группу района в телеге.
Справились? Тогда попробуйте пройти нашу новую игру на внимательность. Приз — награда в профиль на Пикабу: https://pikabu.ru/link/-oD8sjtmAi
У меня уже как у дизайнера начавшего обучение в универе, по специальности графический дизайн, а потом после окончания в 2013 году, ушедшего работать в веб-дизайн, сейчас очень бомбит со всех этих курсов. Потому, что самая большая проблема в том, что даже если вы пройдете этот курс, то вы все равно не станете нормальным специалистом по многим причинам.
Не обязательно учиться в институтах, чтобы стать дизайнером. Но важно понимать как им стать, и главное иметь желание и способность обучаться. Ну и немного таланта и удачи.
Обычно, когда я начинаю смотреть бесплатные завлекаловки всяких таких курсов там все начинают с того, что — хотите стать крутым дизайнером, то давайте выучим Фигму, и вы сможете зарабатывать многоденег! Говорят, если хотите накормить человека, не давайте человеку рыбу, а дайте ему удочку. Но, под обещаниями всяких ведущих этих курсов, часто скрывается то, что вам дают не удочку, которой вы будете ловить рыбу, а вам дают удочку, отправляют на платный водоем, где рыбу вам насаживают на крючок, и вы очень довольны и думаете, что всему научились и офигеть какой крутой дизайнер или рыбак. Но выходя на дикое озеро, вы понимаете, что червей насаживать не умеете, забрасываете плохо, а рыба не клюет. Потому, что чтобы хорошо ловить рыбу, нужно знать поведение этой конкретной рыбы, учитывать скорость ветра, погоду, вероятность появления рыбнадзора, а еще много всего, что придет к вам только с опытом и способностью самостоятельно обучаться, находить нужную информацию, знать где достать снасти и общаться с более скиловыми рыбаками.
Это конечно может дать небольшой толчок в сторону профессии, но поверьте, что в открытых источниках есть практически вся информация, которую вы можете получить. В мое время, все было намного сложнее. Не было нормального интернета, на ютубе не было информации, не было нормального специализированного софта, а область очень менялась с каждым годом. Но вот именно эти ребята, которые учились в таких условиях потом приглашают в качестве преподавателей таких курсов. Даже знаю некоторых из них которые вели курсы в скилбоксе. Они учат вас как рисовать иконки, но прекрасно понимают, что максимум чему вы научитесь это повторять за ними. А на большее, требуется больше времени и теоретических знаний.
Институт мне не дал ничего касаемо самой области веб-дизайна. Но зато дал базовые знания которые очень помогли. Так же опыт в работы в IT компаниях, где я учился в процессе. Тогда порог входа был не высок, специалистов было не много, и все познавалось на собственных ошибках и успехах.
Сейчас я могу уже сам выделить, то что было бы полезно знать на начальном уровне, что позволит вам стать настоящим профессионалом ну или хотя-бы сделать первые шаги к этому.
1. Композиция — способность выделять центр внимания, определять "равновесие" различных объектов в рабочем пространстве. Понимание того, что такое золотое сечение. Понимание того на скольких объектах человек может одновременно концентрировать свое внимание, и к выстраивать иерархию данных объектов и тем самым доносить до зрителя/пользователя то, что вы хотели донести.
2. Рисунок — это даст понимание того как должны выглядеть объекты на плоскости, понимать, что такое перспектива, упрощение форм, технические приемы изображения, тень/полутень и так далее.
3. Цветоведение, психология цвета и живопись — вы должны знать, как образовывается цвет, что такое спектр цвета, как длинна цветовой волны влияет на восприятие цвета человеческим глазом, цветовой круг Иттена, а так же какое значение имеет каждый цвет в разных культурах. Умение смешивать цвета и работа с красками на бумаге, позволит вам понимать цветовые сочетания и использовать правильные цвета, для передачи определенного настроения.
4. Шрифтоведение и каллиграфия — очень пригодится знать историю шрифта и уметь его сочетать. Данная штука сложная, но если вы будете чаще в нее углубляться, то это вам реально поможет.
5. Психология — это область весьма размытая, но вы должны знать что такое ассоциации первого, второго и третьего уровня. Когда вы что-то делаете, вы должны понимать, что это не просто рисунок цветочка на бумажечке. Любой объект который вы создаете в дизайн-макете, вы должны объяснить хотя бы для себя. Почему иконочка шестеренки значит настройки, а вместо нее вы нарисовали молоточек...
Дальше идут технические моменты которые вы должны изучить уже ознакомившись с базой.
6. Верстка. Если вы хотите стать веб-дизайнером, вы должны понимать, что можно делать, а что нельзя. Конечно сейчас технологии развиваются и то, что раньше было нельзя теперь становится можно, но базовые и даже поверхностные знания HTML и CSS уже позволят вам сильно не косячить, понимать как строится веб страница и не вызывать негатива у разрабочиков, которым вы будете передавать свой дизайн макет.
7. Понимание, что такое растровая и векторная графика, чем отличаются разные типы файлов JPG, PNG, GIF, SVG, EPS и так далее. Цветовые модели RGB, CMYK, HSB, HEX и.т.д. Понимать, что такое DPI и как дисплей отображает информацию. Что такое целый пиксель, что такое дробный пиксель и почему он образуется. Это важно, потому, что вы будете с этим работать.
8. Графические редакторы. Тут уже выбор зависит от того, что вам удобно и доступно. Вы должны понимать, что с векторной графикой лучше работать в Adobe Illustrator, с растровой в Adobe Photoshop, интерфейс сайта рисовать в Figma, Adobe XD или Скетч. Лучше использовать, то что сейчас в тренде, так как вам придется работать с разработчиками и клиентами. Можно нарисовать интерфейс сайта в фотошопе или иллюстраторе, или вообще в чем то непонятным, но потом полноценно презентовать свою работу клиенту будет крайне сложно, а разработчик вас будет проклинать. Когда еще не было специализированных программ, все рисовали интерфейсы в Фотошопе, но сейчас это время прошло и есть Figma.
У вас возникнет вопрос. Где брать все эти знания? Ну по первым пунктам, которые я написал существует много книг. Книги по рисунку, книги по основам композиции. Какие точно, я сейчас уже точно не скажу. Просто гуглить и читать. Чем больше тем лучше. Можно смотреть видео и отрабатывать на практике. Можно так же найти себе репетитора по рисунку и живописи и некоторое время походить к нему на занятия, чтобы вам хотя бы немного поставили руку, и вы понимали что вы вообще делаете. Это будет дешевле чем курсы от Скилбокс и прочих обучателей дизайну.
По техническим моментам, так же полно информации на ютубе. Практически по любому запросу будет куча инфы. А о том как пользоваться какой либо из программ, так вообще полно бесплатных видеомануалов.
Плюс чем больше вы знаете, тем лучше. По любой теме! Даже знания о том как размножаются кенгуру или дрессируют блох вам могут когда нибудь пригодится. Развивайте свое воображение, ходите по выставкам. Интересуйтесь историей дизайна. Постарайтесь понять, чем отличается дизайн, от художественного творчества. Ведь если вы рисуете дизайн автомобиля, вам нужно обязательно знать как он устроен. Вам маловероятно придется рисовать дизайн автомобиля, но зато придется рисовать много чего другого. Интересуйтесь трендами. Старайтесь повторить работы которые вам нравятся. Вы будете сталкиваться с моментами по которым у вас будут возникать вопросы и искать пути решения этих проблем. Это и есть обучение.
Когда вы будете уверенны в себе, то начинайте брать простенькие заказы. Где угодно. Тут я уже помочь вам не смогу. Нарабатывайте портфолио. Можно даже на синтетических проектах. Если повезет, устройтесь в студию которая занимается разработкой сайтов. Не стоит думать о том, что вы сразу должны зарабатывать миллионы. Вы там для получения опыта и общения с разработчиками и другими дизайнерами если они есть. Для понимания того, что такое технические задания, прототипы и так далее. Но через определенное время ищите фирму, где проекты серьезней и платят больше. Иначе вы остановитесь в развитии. Никто не будет вам сразу платить огромные деньги. Да и огромных денег платить вам не будут даже потом, потому, что всякие курсы плодят "дизайнеров" которые демпингуют цены выдавая около-стандартный результат и он даже некоторых устраивает. А если он кого-то устраивает, то заказчиков которые захотят платить за качество станет все меньше и меньше.Заказчики вообще редко понимают цену дизайна. Говорят я бы сам нарисовал если бы умел... Потому, что если вы цените свой труд, относитесь к нему обдуманно, прилагаете усилия, то вы должны понимать, что дизайн сайта или приложения не может стоить 5 тысяч рублей. И 10 тысяч тоже. Но понимание этого придет с первыми рабочими проектами.
Все эти знания приходят с опытом. Даже по истечению стольких лет в данной профессии, я понимаю, что многого я еще не умею. Еще многому нужно учиться. Что-то забывается. Появляются что-то новое. Это не простая умственная работа. Она в большинстве случаев изматывает. Вам кажется, что вы нарисуете что-то за день, но на самом деле вы будете думать об этом всю ночь и весь следующий день, вам не понравится результат. Вы будете искать подходящее решение. Дальше вас попросят что-то поменять, а вы будете знать, что это плохое решение. Вам придется попробовать защитить, то что вы сделали и объяснить почему нужно делать именно так.
Если у вас есть талант и способности, вы конечно всему сможете научиться. А проходя всего лишь курсы, вы называете себя шеф-поваром выучив всего несколько рецептов.