Проблема с веб дизайном
Хоть это и устарело, хотел бы научиться рисовать такие кривые для моих веб сайтов (веб дизайн это моё хобби), как в header и footer https://www.webdesigner-profi.de/beispiele/webdesign/hundepsycho https://www.webdesigner-profi.de/beispiele/webdesign/golf https://www.webdesigner-profi.de/beispiele/webdesign/happydayreiseburo. У меня есть Corel Draw 12, Corel Paint Shop Pro X3, PhotoImpact X3, Microsoft Expression Studio 4, Microsoft Picture IT, Microsoft PhotoDraw 2000, Microsoft Publisher 2000, SwishMax 3, из Opensource есть GIMP, InkScape, Blender, а так-же есть графический таблет. На новые платные софты денег у меня нет. Как нарисовать такие красивые кривые? Допустим в Corel Draw 12 рисую спомощью Freihand или Bezier они выглядят некрасиво, видел линейки в Müller, думал их подкупить а потом положить на графический таблет и перенести. Пытался сделать генератор на Visual Basic, там тоже не очень кривые. Очень прошу кто может подскажите пожайлуста, заранее огромное спасибо!
Моя ФЛ Он и Она
Корела нет, но это как и иллюстратор, или Inkscape - векторный редактор, а значить идём на гугл, и смотрим " ***НАЗВАНИЕ ПРОГИ*** работа с кривыми ". Для примера для корела - https://www.google.com/search?client=firefox-b-d&ei=DxhKX7...
В блендер конечно тоже можно полигонами или кривыми сделать и отрендерить на прозрачном фоне, но смысла в этом мало, когда есть векторный редактор. Блендер хорош для создания красивых шапок, если нет подходящих готовых фоток или графики...
С кривыми так же можно и в фотошоп с Gimp работать, но не так удобно как в векторных редакторах.
Перечисленный майкрософт софт это всё ерунда на мой взгляд, не нужный хлам для веб дизайна.
SwishMax можно забыть, флэш анимация уже отжила своё, и больше не поддерживается даже разработчиком. Для веб анимации теперь только HTML5.
Хоть это и устарело
С чего бы это устарело? Если пользуется спросом, то не устарело. Подобное и сегодня интересно заказчикам.
хотел бы научиться рисовать такие кривые для моих веб сайтов
Кому как, но я бы попробовал сделать "что-то подоброе" по образцу,
а потом уже когда начнёт получаться и поймёте как именно и что именно на что влияет,
я бы начал экспериментировать со своими хотелками.
Для разных мотивов можно применить различные техники.
Я лично работаю охотно с Иллюстратором.
В зависимости от мотива, создаю несколько элементов (овалы, прямоугольники)
и накладываю их как мне надо, растягиваю, смещаю, меняю кривые...
При необходимости работаю с прозрачностью.
Второй вариант, это инструмент "Angleichen".
С ним можно очень просто делать различные узоры с линиями или другими элементами.
А вообще, как написал Sergo, в Гугле есть множество различных уроков, непосредственно на ту программу с которой Вам лично удебней работать.
Спасибо за ответ!
Корела нет, но это как и иллюстратор, или Inkscape - векторный редактор, а значить идём на гугл, и смотрим " ***НАЗВАНИЕ ПРОГИ*** работа с кривыми ". Для примера для корела - https://www.google.com/search?client=firefox-b-d&ei=DxhKX7...
Да я так часто и делаю, т.е. ищу в гугле... просто у меня программы очень старые.
SwishMax можно забыть
Его можно использовать для создания прототипа веб сайта (хотя для создания прототипов я пользуюсь этой бесплатной программой https://pencil.evolus.vn/ это что-то типа Microsoft Viso), а так-же там есть экспорт в PNG и AVI, а это значит можно делать анимации для сайта. Иногда сайты попадаются, там видео используется как фон к примеру вот https://www.w3schools.com/howto/howto_css_fullscreen_video...
С чего бы это устарело?
Просто сейчас делают вебсайты с адаптивным дизайном, т.е. для каждого разрешения нужно будет новый дизайн/лейаут придумывать, нужно придумывать куда какие элементы разместить, поэтому наверное то что показал (ссылки дал) там устаревшее, т.к. в тех примерах что я показал (ссылки дал), там скорей всего всё абсолютно спозиционировано, и пошла сейчас мода - на прямоугольники (хотя в css3 есть border-radius) и на малое количества изображения, , иконки плоские и ввиде ttf допустим какие-нибудь шрифты типа Glyphicons или Font Awesome используют. Когда сайт тяжёлый то гугл даёт низкий бал https://developers.google.com/speed/pagespeed/insights/?hl.... Зайдите скажим на этот сайт https://www.duesseldorf.de/, https://www.berlin.de/ или https://www.nuernberg.de/ там дизайн минималистичный. Я делал минималистичный дизайн, мне он не понравился. Мода на прямоугольное и минималистичность пошла наверное из-за Windows 8/10, а раньше чутку закруглённые мода была наверное из-за того что многие веб дизайнеры использовал Mac, и у многих был iphone. Ну и многие пользуются typo3/contao/joomla и используют фреймворк Bootstrap.
И ещё предпологаю устарело потому, потому-что многие заходят на сайты через смартфоны и таблеты, а раньше было два отдельных стандарта у многих был Internet Explorer, а кто использовал сотку для того чтобы полазить в интернете, тогда был WML, а сейчас HTML5 для всего. Раньше таблицами пользовались, абсолютное позиционирование, а сейчас.Grid Layout - https://www.w3schools.com/css/css_grid.asp, flex box - https://www.w3schools.com/css/css3_flexbox.asp, я лично блоками пользуюсь т.е.к примеру так: display:block; width:100px; float:left; пишу ещё это .clearfix:after { content: ""; clear: both; display: table; } оно автоматически приспосабливается, т.е. то что на экран не помещается на следующую строку переносит.
Моя ФЛ Он и ОнаСпасибо за ответ.
Кому как, но я бы попробовал сделать "что-то подоброе" по образцу, а потом уже когда начнёт получаться и поймёте как именно и что именно на что влияет, я бы начал экспериментировать со своими хотелками.
Да я уже делал по образцу... Результатом недоволен остался.
Для разных мотивов можно применить различные техники.
В Corel Draw есть много картинок, я видел как один веб дизайнкер брал прям с Corel Draw готовые мотивы, изменял, а потом вставлял в свой сайт. Так-же я слышал про узоры мандала, а так-же пытался их рисовать.
В зависимости от мотива, создаю несколько элементов (овалы, прямоугольники)
Я тоже так-же делаю, потом эти элементы либо группирую, или соеденяю.
Моя ФЛ Он и Она
Да я так часто и делаю, т.е. ищу в гугле... просто у меня программы очень старые.
Ну..., у меня основной софт тоже старый, я адобе дизайнер комплект в 2010 купил, и до сих пор на нём работаю, это роли не играет, старый или новый. Даже если видео сняты под новым софтом, вполне можно это же применить и к старому софту, если это не какая то там левая софтина, которая каждый год интерфейс меняет.
Прототип сайта можно делать в любом граф редакторе, разве что в спец прогах может чуть проще будет... Я лично не когда этими спец прогами не пользовался, фотошоп и гимп, иногда илюстратор... В общем это на любителя.
Просто сейчас делают вебсайты с адаптивным дизайном, т.е. для каждого разрешения нужно будет новый дизайн/лейаут придумывать, нужно придумывать куда какие элементы разместить,
Адаптивный дизайн делают уже очень давно, даже уже и забыл когда я первый раз его делал..., так что это не только сейчас. Ну и данный дизайн сайтов можно так же делать адаптивным, можно к примеру использовать для шапки(этих линий) svg файл, а остальное через ксс подгонять.... Если svg не выход, ну сделать 3 шапки под основные стандартные размеры десктопов, а под остальное уже упрощённый вариант без этих линий. Не чего особо сложного нет в адаптивном дизе и таком стиле, немного больше стилей и графики.
гугл даёт низкий бал
Гугл в первую очередь сегодня ориентируется на мобильные устройства, поэтому и балы даёт низкие. Это не повод пренебрегать дизайном, и ориентироваться на прямоугольники. Как выше написал, тяжелую графику в виде линий итк. можно использовать только в десктопной версии.
При желании можно и с таким дизайном получить хороший бал...
ПС. Имхо конечно, но не нужно зацикливаться на современных тенденциях. Да, табличную вёрстку всей страницы сегодня не стоит делать, но применять её где нужно, не кто не запрещает. Конечному заказчику в конечном случае часто пофиг, как сайт свёрстан, ему важно что бы он одинаково хорошо отображался на всех устройствах и браузерах, ну и не жрал сильно мобильный трафик.
Так что, мой совет, современные подходы нужно использовать, но и не нужно зацикливаться на современных подходах к дизайну. Получше изучить html5 и css3, плюс яваскрипт тоже желательно, а дальше, при желании можно любой дизайн сделать, было бы желание.
Ок понятно.
Конечному заказчику в конечном случае часто пофиг, как сайт свёрстан, ему важно что бы он одинаково хорошо отображался на всех устройствах и браузерах, ну и не жрал сильно мобильный трафик.
Кстати я вспомнил про Service Worker https://developer.mozilla.org/ru/docs/Web/API/Service_Work... можно закэшировать, но мне так и не удалось закэшировать на localhost. Можно кстати использовать localstorage.
Прототип сайта можно делать в любом граф редакторе
Ну в принципе можно, я смотрел видеоурок, там учили делать лейаут в фотошопе, кстати я ещё тут просматриваю https://colorscheme.ru/, там внизу справа есть "пример светлой страницы", "пример тёмной страницы".
Кстати ещё 2 вопроса:
1)Короче недавно появилась такая фьюча как clip-path, вот хочу выравнить так, чтобы текст обтекал по некой форме изображению, спомощью какой программы делают clip-path? Искал что-то я ничего не нашёл, нашёл как онлайн сервис, я вот нашёл этот сайт https://bennettfeely.com/clippy/. А мысленно мне трудно подберать clip-path.
2)Каким ПО превращаити картинки в webp? Скачал я для Corel Paint Shop Pro X3 правда как psd плагин, он отказывается работать с этим плагином, потом скачал Romeolight WebPConv, просто картинки в webp вроде как намного меньше весят, многие перешли на webp.
Моя ФЛ Он и Она
Кстати я вспомнил про Service Worker https://developer.mozilla.org/ru/docs/Web/API/Service_Work... можно закэшировать, но мне так и не удалось закэшировать на localhost.
Кэшировать надо со стороны сервера делать, а браузер и так кэширует, если не отключить в настройках. Популярные CMS уже имеют встроенные средства кэширования, как и полноценные пхп фреймворки(symfony, laravel, yii и др), так что нужно лишь включить кэширование.
Ну в принципе можно, я смотрел видеоурок, там учили делать лейаут в фотошопе
Прототип, можно делать в чём угодно, я просто привёл фотошоп как пример, всё зависит от предпочтений. В общем, какой прогой лучше владеем, в той и делаем прототип, так как большого смысла нет в изучении отдельных прог, если можно тоже самое сделать и в "фотошопе".
Кстати ещё 2 вопроса:
1. clip-path пока ещё экспериментальная фича, и поддерживается боле менее в полной мере только лисой. Использовать её для готовых проектов, это 100% будет конфликт с заказчиком, в стиле - "Почему на другом браузере картинка не в виде сердечка...".
2. WebP не является стандартом, и до сих пор поддерживается не всеми браузерами, а значить придётся использовать тег picture с подключением через sourse WebP изображений. По сути это пока двойная работа, придётся делать не только 2 и больше изображений(с учётом поддержки огрызочной ретины ещё больше), но и изображения выводить в стиле:
<picture>
<source srcset=”img/WebPImage.webp” type=”image/webp”>
<img src=”img/OldJPEG.jpg”>
</picture>Для постоянных изображений, это конечно можно один раз прописать и всё, но для динамически добавляемого контента, придётся писать скрипт, который будет делать обёртку вокруг
<img src=”img/OldJPEG.jpg”>
добавляя недостающее...
В общем, это пока не столь необходимо, можно как и раньше использовать джипег картинки и не парится. Вот когда старые браузеры уйдут в прошлое у большинства, тогда можно будет и на WebP переключиться.
Спасибо за ответ
Моя ФЛ Он и Она
Я бы вам посоветовал именно если хотите рисовать сайты пользоваться нормальным инструментарием. Весь мир уже сто лет назад перешёл на Sketch и Figma. По сути это векторные редакторы. Оптимированные для рисования сайтов, приложений и прочего связанного с этим. Ещё есть Adobe XD, InVision Studio, Framer, Macaw и т.п. Через эти софты можно делать жизнеспособные интерактивные прототипы.
Встречал отморозков которые там даже верстали презентации, делали логотипы и графический дизайн.
Все очень просто. Нарисовал шейп, накинул точку на контур, потянул вверх и закривил через Безье. Так оно по идее во всех векторных редакторах работает.