Разбор дизайна сайта Сергея в стиле тех.дизайн

Техдизайн штука сложная и без опытного наставника будет освоить этот стиль сложновато, да и долго. Если хотите быстро и легко — то вам сюда😉

А: Привет, Сергей!

С: Привет, привет!

А: Так, давай начнем.

С: Давай.

А: Сейчас я тебе покажу свой экран. Так, ну вообще, перед началом, хочу сказать, что ты большой молодец, прогресс у тебя отличный.

С: Спасибо.

А: Ну, по своему опыту могу сказать я такие работы начал на второй, третий год делать. А у тебя уже там получается настолько короткие сроки, это круто на самом деле!

С: Спасибо я старался, но у меня ушло где-то часов наверно 50.

А: Ну все равно я думаю, как бы за этот срок ты много опыта получил, судя по тому какие у тебя первые работы были, я помню, и то, что сейчас гораздо лучше.

С: Тогда я только-только открыл фотошоп.

А: Как экран будет виден – скажи.

С: Да, вижу.

А: Так, у тебя здесь в макете некоторые папки объединил, потому что у меня фотошоп тормозить начал, файлов слишком много.

С: Да, у меня кстати тоже, после 300 Мб начинает все тормозить и фотошоп, и браузер.

А: Ну смотри, тут выход очень простой. Допустим, я не знаю, ты деревья, допустим, обрабатывал? Ну, что-то с ними делал? После того, как понимаешь, что работа, в принципе, закончена, просто все слои объединяй вот так, в обычный слой. Ну, если ты понимаешь, что как бы, больше работать не будешь, в обычный слой его объединяешь. Допустим, вот папку берем объединить группу, и обычно слой становится, вот это его родной размер, соответственно, уменьшается, фотошоп не нагружается и, соответственно, тормозить не будет, если хочешь, как бы, чтобы не тормозило, но как бы сомневаешься, что будешь еще работать, то можешь просто, допустим, как резервную копию сохранить, либо отдельную ту папку, либо вообще полностью сам макет.

С: Ага.

А: То есть, ну если что там из этого резервного файла достать и какой-нибудь элемент доработать. То есть, ну как бы, скажем тормоза, они по нервам сильно бьют, и, как бы время сильно убивают, поэтому лучше вот так сделать.

С: Хорошо.

А: Так, ну давай приступим. Я буду показывать разные моменты, какие стоить изменить. Начнем мы, пожалуй, с моря.

С: Ну.

А: Я буду, скажем, идти от самых больших моментов, которые сразу бросаются в глаза, к более мелким. Вот здесь вот линия вот эта, вот на неё не смотри. У тебя её не было, в принципе, в макете -это объединение слоев. На неё я смотреть не буду и разбирать разные моменты интерфейса тоже не будем. Сейчас, сейчас разберем саму обработку графики.

С: Хорошо.

А: Так, по воде, по текстуре она у тебя несколько отличается от исходных, и скажем, сильно бьет по глазам по контрасту, потому что слишком большой масштаб по сравнению с островами. То есть, острова у нас такие получились в небольшом масштабе, а вода в гораздо большем. Что лучше сделать? Сейчас я воду найду. Так. Что я имею в виду? Допустим, что я продублирую слой, свою маску удалю, она нам не нужна нам, и уменьшаем размер вот этой вот текстуры. Ты сейчас просто сам увидишь, как будет лучше смотреться. Вот тоже самое вот здесь вот — сравни просто.

С: Ага.

А: Так смотрится и так, при большом масштабе получается, сильно по глазам бьет и несоответствие масштабов у нас идет воды, островов и гор, каких-то элементов. То есть, все элементы, что у тебя есть изначально перед тем, как обрабатывать их там, приводить к единой цветовой гамме. Нужно сначала по масштабу подобрать, чтобы не было, скажем, человека такого подсознательного аффекта, что тут, как сказать, обманывают короче говоря, потому что человек всё равно привык, что в природе всё гармонично, и как бы все какие-то моменты, как перспектива. То есть тот объект, который дальше меньше кажется, который ближе больше, хотя один и тот же объект. То есть, такие моменты стоить учитывать, тогда будет реалистичнее, но как бы, если потом захочешь через какое-то время изучить дизайн (у меня в курсе всё это рассказывается), потом сможешь посмотреть.

С: Хорошо.

А: Ну пока, в принципе, особо не стоит  заморачиваться. Вот, просто скопируй вот эту воду. Её можно даже поменьше сделать, продублировать и распространить прям по всему,  просто сделав плавный переход с помощью ластика. Так, следующий момент. Вот эти вот небольшие подсветки — либо их уменьши на воде, либо их убрать. Без них, даже как-то лучше смотрится. Так, ну и по воде. Кстати говоря, ну если мы берем ту же самую текстурку, если мы её наверх наложим, продублируя слой…давай пройдем по вертикали, что бы лучше смотрелось, так в одном направлении, и здесь тоже необходимо уменьшить, потому что, как я уже говорил, чем меньше объект, тем меньше, скажем, он становится по размеру, соответственно, еще меньше уменьшаем. То есть, здесь, чем ближе — побольше текстурка, чем дальше — тем меньше. Если бы у нас еще картинка продолжалась, то там вообще, как бы вода слилась в единую текстуру и была похожа на нижнюю вот эту часть, ну где в разрезе показана вода. То есть, вдали она стала совсем уж плавной. Так, следующий момент сильно бросается в глаза — вот это вот неровные обводки.

С: Да, вот, кстати, я у тебя хотел спросить. Просто я вот когда делаю вот эти обводки, ну кистью, у меня мышью получаются неровные. Я хотел бы  какой-то инструмент другой выбрать.

А: Ты смотри, на сколько я понял, ты создаешь, берешь новый слой, берешь кисточку, допустим…

С: Да.

А: …..и проводишь.

С: Да, и провожу.

А: Этот вариант единственно подходит, если у тебя есть планшет и у тебя рука набита, то есть, ты художник, когда у тебя плавно такие четкие линии. Ну, если ты делаешь, скажем, с помощью мышки, то гораздо лучший вариант — это сделать с помощью пера. Давай я тебе покажу, как это сделать, уберу эту линию. Так, скроем её, вот эту тоже уберем. Берешь инструмент перо и выделяешь контур. Сейчас мы прям выделим это. Получится, скажем, и гладко и более четко, ровно и не будет таких вот ненужных углов, шероховатостей и т.д. В принципе, если качество увеличить и до мелочей выделять… ну сейчас я не буду так заморачиваться.

С: Ага.

А: Просто покажу сам принцип, просто по опыту могу сказать: чем больше масштаб, чем меньше вот эти вот выделения уходит. Конечно, кучу времени на самом деле может уходить. Я не знаю, на вырезание объектов разных с помощью пера процентов 20-30 времени, но тем не менее, картинка будет гораздо более качественной. Никаких краев не будет видно, что ты вырезал от куда-то. Картинка, ну как бы целостной будет смотреться. Это сильно будет прибавлять стоимость, когда ты будешь продавать свои работы. Чем выше качество, тем выше заработок. Так, сейчас мы это отключим. Ну и вообще порекомендую побольше с пером поработать, просто недельку посидеть повырезать кучу объектов, чтобы привыкнуть к нему, потому что инструмент сам по себе для освоения немного сложновато в первое время для понимания, но когда ты его освоишь, ты прям почувствуешь, на сколько возрастет и качество твоей работы, и как бы, на сколько он удобен вообще в работе. Вот смотри. После того, как мы контур выделили, на инструменте перо щелкаем правой кнопкой мыши и выбираем выполнить обводку контура. Здесь мы выбираем кисть, имитировать нажим не ставим. Ну, сейчас я покажу, в чем разница. Так, нам нужно слой новый создать. Для того, чтобы линия появилась, её лучше делать на новом слое, что бы она не прикрепилась к предыдущим. Поэтому, перед тем, как вторую линию создавать, новый слой создаешь. Можно назвать светлая линия и теперь делаем те же самые операции: выполнить обводку контура, кисточка и смотри какой здесь момент есть: если мы нажимаем «ок», линия обводится по ширине в настройках, как указывается кисточки. То есть, сейчас у меня пиксели. То есть, если мы хотим сделать поменьше, идеально ну лучше всего делать в один пиксель. Затем можно продублировать, то есть, если я сейчас возьму кисточку меньше, мы повторим ту же самую операцию, после этого удаляю контур. Тут видишь, что линия получилась гораздо меньше. Если мы, допустим, наложим на нее слой, какое-нибудь свечение, то будет смотреться гораздо лучше. Ну вот, приблизительно так. То есть, можно включать — выключать, гораздо будет лучше, если, соответственно, мало данной линии тут можешь еще продублировать, а уже, как будет лучше вниз спустить — это уже по сути будет 2 пикселя линия. Можно заново начертить, ну, как бы, смотри сам, как тебе удобно будет делать. Соответственно, для того, чтобы здесь было, как на исходном варианте, можно масштаб увеличить и посмотреть, как здесь сделано. Здесь мы можем заметить, что по факту здесь как будто 2 линии. Верхняя — она светлая идет прям под ней, как будто тень, я не знаю, синяя – то есть, что мы можем сделать просто данную линию сделать более темной. Так, сейчас я не вижу ее. Вот она. Смещаем вниз просто и делаем такой вот темной. Её можно чуть подразмыть, чтобы она не была прям такой бьющей по глазам, так сказать, через фильтр, размытие по гауссу, порядка 1%. Я думаю, 1 пикселя хватит. То есть, если мы посмотрим, становится более, скажем, такая выраженная линия. Ну и еще, чтобы я сделал вот здесь вот по краям на текстуре море, создал дополнительный слой, выбрал белый цвет с помощью кисточки сделал бы вот такую небольшую обводку…сейчас покажу какой эффект будет. Также, размыл по гауссу, чтобы был плавный переход и в режим наложения мягкий свет. Уменьшаем прозрачность и получается, что вот эта вот часть у нас немного выделяется, если сравнишь…

С: Ну, да.

А: …несколько лучше, то есть, вообще те границы.. допустим, вот эти вот стыки, где разные такие углы, где есть в основном всегда присутствует темная линия и необходимо с помощью оттенков темного цвета, то есть, здесь по факту, цвет один – синий, а оттенки разные. Здесь темно-синий и здесь светло-голубой — цвет при этом один. Мы выделяем вот эту границу по факту с помощью вот этого цвета, то есть соответственно, чем больше контраста, чем больше будет этот цвет заметен. В тех. дизайне это лучше использовать такой вообще стиль, где все нужно, скажем так, гиперболизировать, увеличить все свойства объектов, сделать их более красочными, чем в жизни. Следующий момент. Тоже самое мы делаем с нижней частью. Так, здесь у нас по-моему снизу обводка идет, что-то не особо видно… ну да, немножко есть обводка, можно эту линию скопировать… так где она была то? Можно вот эту прям тень скопировать и вниз перенести, а хотя у тебя здесь не сводится, получается. Ну, если бы были одинаковые по высоте границы хорошо наложились, то в принципе, то же самое нужно сделать с темным линиями.

С: Я понял.

А: Следующий момент. Вот это вот, где вода, в разрезе у тебя она слишком темная получилась – посветлее сделать. Вообще, я бы рекомендовал  гораздо светлее, чем на исходном варианте. В разрезе, я бы наложил немного другую текстуру. Сейчас покажу фотку. Так было бы намного реалистичнее. Вот вода в разрезе, то есть, здесь лучи света, то есть, если мы возьмем какой-нибудь фрагмент и сюда перетащим, накладываем, нужно уменьшить яркость у данной картинки, текстуры ближе к цветовой гамме, сделать, и сам размер немножко уменьшить (потому что слишком большая получилась по размеру, не совсем правдоподобно смотрится), так будет лучше. При этом, если ты будешь дублировать данную текстуру и сделаешь полностью, то, в принципе, будет смотреться классно, но при этом, что необходимо сделать чтобы смотрелось лучше: там, где у нас свечения, лучи света, то, соответственно, на поверхности воды тоже такие будут светлые участки. Соответственно, данную воду мы находим, создаем дополнительный слой, берем кисточку и вот такие светлые пятна делаем там, где у нас такие лучики света. Ну вот этот, грубо говоря, там у нас падает максимум света и, как бы, если у нас в разрезе здесь очень много света, то на поверхности там должно быть максимум света. Можно подразмыть с помощью гаусса, если нажимаешь клавиши ctrl+r и фотошоп сам повторяет последнюю команду, так как у нас то размытие было и накладываем режим мягкий свет, немножко уменьшим непрозрачность. То есть, так будет смотреться гораздо лучше, если по всей поверхности в разрезе так сделаем, то будет лучше. В принципе, здесь, что можно было бы сделать, как аналогичный вариант — убрать текстуру эту. Просто, допустим взять текстуру воды вот эту продублировать её точнее скопировать вот сюда вот, уменьшить размер и чуть-чуть подразмыть. Так слишком много, ну порядка 1% хватит. Уменьшаем немного размер и делаем чуть-чуть более темный, т.к. на исходном варианте, чтобы от поверхности отличалась        всё- таки. Ну, как вариант, то есть, способов, в принципе,  можно придумать .

С: Ну да, здорово! Не плохо смотрится.

А: Не важно, главное результат. Скажем так, перед процессией лучше экспериментировать, ну и новый способ сам для себя узнаешь и варианты придумаешь, которые ты сможешь использовать в каких-то аналогичных работах, потому что, чем больше будешь работать на фрилансе, тем будет больше повторяться заказов в одной смежной тематике. Допустим, ты работу разрабатывал, 3 варианта каких-то придумал, 1 использовал а 2 остались. Соответственно, когда 2-ю работу с той же тематикой разрабатываешь, тем меньше времени тратится на разработку, гораздо меньше, потому что тебе ничего придумывать не надо — ты просто взял готовое решение — сделал и заработал быстрее деньги, то есть, ну как бы классно! Не стоит по началу, скажем так, прям идеально делать с одного раза, попробуй, поэкспериментируй. Потом это очень сильно окупается. Так, то, что касается воды. В принципе, закончили. Так, что я еще тут хотел. Так, ну еще теперь тут бросается, скажем, в глаза вот эта вот зелень. Она слишком темная получилась по сравнению со всей остальной зеленью. Соответственно, после того, как ты накидал все элементы, её необходимо, скажем, привести к общему оттенку, то есть, к более светлому. Ну, это можно сделать с помощью уровней чуть по ярче, её сделать, допустим, вот такую. Уже она не будет так бросаться в глаза и картинка будет целостной.

С: Да.

А: И можно с помощью цветового тона и насыщенности, то есть, так же немножко убавить, привести, скажем, к одному общему тону. И тоже самое касается вот этих вот корабликов. Они сейчас слишком сильно выбиваются из общей картинки, и тоже самое нужно сделать и с ними, то есть, менее такими яркими их сделать, чтобы не привлекали к себе слишком много внимания — так вот будет лучше. Так, дальше. Еще бросается в глаза не совсем качественные исходники, которые использовал горы и самолет, ну вот эти вот еще судно, то есть лучше, скажем, вообще не использовать некачественную графику, вообще от нее избавиться , что бы какой-то общий элемент не испортил всю картину, потому что  человеческий мозг так устроен: если сто элементов будет хорошо и будет какой-нибудь один плохо, то человек всегда будет концентрироваться на этом говне, скажем так, или затворять картинку, скажем, некачественной, поэтому лучше от этого избавиться. Лучше, если будет картинка среднего качества, в целом на 4, чем если будут все на 5, а один на 2. В целом, что тогда получится на 3. То есть, поэтому лучше если какая-то часть картинки, графика хреновая, и если она не вписывается, то от нее лучше избавиться. То есть, принцип такой: лучше, если есть такая возможность — заменить самолет. В принципе, самолет можно найти, их дофига, в принципе, можно вставить. Тоже самое касается гор. Они, так сказать, усиленная у них резкость не совпадает у резкости со всеми остальными картинками. Соответственно, лучше найти другую, либо это некачественная графика. Вот эти вот задние горы тоже стоит заменить.

С: Понял.

А: Так, следующее. Я бы порекомендовал немного доработать тени, скажем, у всех элементов у островов, у суденышек (то есть, здесь они довольно-таки плавные, размытые). Если мы посмотрим, у тебя они, как бы  сильно бросаются в глаза, и они должны быть чуть поменьше по размеру раза в полтора. То есть, можно прямо сместить, вот так вот. Лучше всего, как я рекомендую, сделать 2 тени, то есть, 1 такая явная. Давай возьмем, допустим, острова. Сейчас я покажу, как сделать. Твою тень пока удалим. Берем, допустим, острова и просто, ой, не то сделал. Вот контур островов. Дублируем данный слой, переносим его вниз, после этого его необходимо обесцветить и я это сделаю через уровни. Теперь острова у нас стали черные. То есть, смещаем немножко вниз допустим, да вниз хватит, после этого размыванием по гауссу, ну примерно на 1 пиксель будет достаточно. Теперь можно просто уменьшить прозрачность, попробовать вот так вот сделать, либо наложить режим мягкий свет. В режиме мягкий свет это будет гораздо лучше: оттенок точнее, данный цвет черный станет средний между черным и цветом фона. То есть, если данный цвет тут синий, то станет темно-синий, если был красным, то стал бы темно-красным, поэтому лучше накладывать в данном режиме. Чуть-чуть двигаем наверх, делаем, скажем, так еле заметную тень и уменьшаем немного прозрачности, вот так вот. После этого дублируем данный слой и уже побольше размываем по гауссу, пикселя на 3 где-то 3.5, ну примерно так. То есть, не факт, не важно, главное, чтобы был плавный переход. То есть, если ты посмотришь так вот, увидишь четкие границы. Если мы добавляем 2-ю тень, немного убираем непрозрачность, то получается более плавный переход. То есть, если ты сравнишь, вот такая тень… сейчас сделаем и сравним с твоей тенью, ты посмотришь, на сколько сильная разница — вот твоя тень, не совсем видная.

С: Ну да, я просто кисточкой делал обводку.

А: А, ну это скажем, такой хороший способ себя помучить, но тем не менее, это нужно было любому человеку, иначе бы ты не ценил тот способ, который я тебе только что показал, гораздо более простой.

С: Да.

А: То есть, не переживай, что ты вначале тратил много времени, тратил деньги. Я мог тратить на это несколько месяцев и только потом найти такой способ. Ну вообще, в процессе старайся. Если ты понимаешь, что есть как бы такая…то есть, ну с точки зрения зарабатывания денег скажу: если есть какая-то работа, которая, в принципе,  делается очень долго, тоже самое вырезание, допустим, вот такие вот обводки, которые там на конечный результат не так сильно влияют. Старайся просто погуглить, найти какой-то более быстрый способ, потому что это сильно сэкономит тебе время и, соответственно, напрямую зависит, отражается на твоем заработке.

С: Хорошо.

А: То есть, ну тени вот так вот дорабатывай. Так, что еще? Сейчас посмотрим, что еще у нас. Ну, по поводу освещения. Ты на вебинаре был, который у нас вчера был, по-моему.

С: А, на тех. дизайне я был, но я так не очень тебя слушал, потому что я дорабатывал работу и посмотрю записи.

А: Смотри, по поводу теней и света. Здесь, в принципе, здесь не так сильно заметно. Для того, чтобы больше на тех. дизайн было похоже и ближе к реальности, чтобы все картинки были едины я рекомендую сделать следующее: то есть, определить, где будет источник освещения. То есть, мы определяем, что солнце будет светить слева сверху, допустим, что лучи вот так вот будут падать, соответственно, все части, которые у нас есть: город, травы, зелень и т.д. будут слева сверху освещены больше все мелкие детали, то же самое самолеты, все строения, все корабли и так далее. Справа снизу будет больше затемнено, соответственно, если вот это всё вот так вот показать, привести к светотеням, то картинка станет яркой. Давай, я сейчас покажу, будет коряво конечно, но, я думаю, ты смысл поймешь. Сейчас мы найдем горы. Допустим, создаешь дополнительный слой над тем объектом, в котором ты хочешь поработать, берешь белую кисточку и закрашиваешь те части, на которые будет падать свет. Если, соответственно, освещение было справа сверху, то было бы справа освещена, а левая нижняя, она была бы в тени. То есть, вот здесь вот отлично видно, тень падает на правую часть, потому что источник освещения слева находится, прям по вот этим складкам город хорошо заметно, и такой чит-код, где накладываются эти тени и свет белый, вот эти вот мазки, их накладывать необходимо на темные участки, то есть, там, где светлая часть, но с опытом это придет. Пока что, в первые разы, в принципе, ты можешь этого не видеть, ну и за счет этого можно придать небольшой объем, скажем более так, предмет станет объемный. После того, как мы это наложили, размываем по гауссу, для того, чтобы был более менее плавный переход, вот так вот будет достаточно и выставляем режим наложения мягкий свет. То есть, сейчас у нас слишком сильно наложено, уменьшаем непрозрачность порядка 50% выставляем — уже освещение изменилось, можно увеличить масштаб и проработать гораздо более лучше. Уменьшаем кисточку, создаем дополнительный слой и прорабатываем более мелкие детали. Здесь у нас будет все слева освещено, а здесь будет затемняться наоборот, то есть, такие вот корявые мазки можно спокойно накладывать, потому что при размытии они плавно сольются. Опять размываем всё это и выставляем мягкий свет, и уже освещение становится гораздо более похожим на то, откуда ты у нас видел. Здесь мы уже видим, что правая часть затемнена на горах, слева более освещена, соответственно, когда ты у каждого элемента проработаешь это, можно заморочиться и каждую елочку так сделать.

С: Да, да. Я, кстати, думал про елочки. Это же мне нужно каждое дерево, с левой стороны?

А: Ну в принципе, скажем, это зависит от того, сколько тебе за это платят, скажем так. Если у тебя есть желание, время, то можешь заморочиться. Допустим, вот я тебе покажу сейчас. Делаешь вот так вот. Вообще идеально, если б у тебя был этот, там 3-4 исходника елки, то изначально обработать,  потом просто распланировать и из них сделать лес, с точки зрения эффективности гораздо лучше.

С: Мне кажется, так будет быстрее.

А: Да, быстрее будет, потому что смысла особого нету, потому что, когда ты сделаешь лес, никто не заметит, что это одни и те же деревья, особенно, если там подкорректировать цвета и сделать там 3-4 варианта, то, соответственно, очень реалистично лес получится. Ну, вот если ты сравнишь елочки, то они сильно приобретают объем и, скажем, освещение меняется, если парочку еще так обработать, то это будет так прям сильно заметно.

С: Да, да, так получше.

А: Можно заморачиваться просто, вот так взять и обработать несколько елок. В таких это квадратных пикселях я что-то плохо вижу, различаю границы. Ну, приблизительно сделаю. Ну, вот так было до, так стало после, то есть, они становятся более объемные. Сразу видно и освещение и объемы гораздо лучше.  Если заморачиваться, то это, по идее, нужно делать к каждому элементу, тогда будет это максимально качественная картинка. Я, в принципе, рекомендую вообще заморачиваться делать идеально, то есть, даже когда платят немного, ну в принципе, потому что лучше делать всегда качественно, хорошие заказчики всё равно придут, а такие нищеброды, которые считают, что им обязаны, они постепенно уйдут. Если постоянно стремится превзойти свой уровень, если же будешь делать, так скажем, а мне за это не заплатили, я не буду делать, то в принципе, будешь долго на одном уровне стоять, поэтому не рекомендую.

С: Хорошо.

А: Так. В принципе, что еще осталось. Последнее, что я рекомендую тебе сделать – это тонировку, когда ты над всем поработал для того, чтобы картинка была максимально реалистичная, просто поверх всех слоев создаешь дополнительный, выбираешь, в основном, цвет неба изначально допустим у нас здесь голубой оттенок и делаешь просто заливку, выставляешь мягкий свет и уменьшаешь немного непрозрачность. Ты можешь заметить, как довольно сильно картинка изменилась, стала гораздо более приятной. Почему? Потому что все оттенки на всех объектах стали приблизительно одни. В коллаже это и есть проблема, когда вырезаешь с разных элементов, а точнее, допустим, соединяешь 10 картинок  в одну, все картинки, допустим, сфотографированы при разных освещениях, у них разные тени. Допустим, у гор может быть тень на правой части, а у корабликов тень на левой части, когда у них освещение разное, контрастность, наложил поверх всех какой-то один тон, они как бы в одну картинку реалистично превращаются, как будто она была изначально такой, а не составлена из нескольких. То есть, после того, как наложил, я рекомендую вызвать команду «цветовой фон насыщенности», просто посмотреть другие оттенки, потому что может получиться так, что можно подобрать какой-нибудь там желтый цвет, заменить небо на какой-нибудь закат, рассвет и получится гораздо круче. В данном случае голубой отлично подходит.

С: Ок.

А: В принципе, такой, наверное, момент. Посмотри вебинар, записи я скидывал на почту. Там на примере машинок я показывал еще несколько моментов, как делать тени, отражения и еще вписывать фон в объекты, и те моменты, которые я сегодня не рассказывал и не применил их. Так, ну вот, в принципе, и все. Теперь давай на вопросы твои отвечу, какие есть.

С: Хорошо, у меня есть несколько, но я хотел спросить про сам ландшафт. Вот, я так понимаю, он, сам Алексей Попов, он в своей работе накладывал текстуры. Он сначала взял эти текстуры зелени. Вот у него видно, например, Китай, там есть еще каменный ландшафт, вот.

А:  Как у Китая?

С: Да, там рядом есть каменная текстура.

А: Что-то не вижу, в какой части? Здесь что ли?

С: Да, да, вот видишь светлые пятна, это же камень ?

А: Ага, но суди по всему, он просто взял какую-то картинку и накладывал ее, точнее некоторые объекты взял, несколько картинок с уже где есть трава, зелень, камень и просто потом с помощью цветового фона насыщенности привел к единой картинке. То есть, это по факту, одна картинка, допустим эта вторая картинка, горы это уже третья картинка ну и так далее. То есть, он не делал как ты ,у тебя всё это разделено на части, у тебя трава отдельно, деревья отдельно.

С: Да, да.

А: У него здесь, я вижу по картинке, что это всё единое, а просто соедини картинки и подумай по цветовому фону, так делать проще.

С: Ну да, ну да, так. Я  просто тяжело искал такие исходники, чтобы был вид сверху, но их тяжело найти, потому что платных много, а бесплатных не так и легко найти хорошего качества.

А: Ну да, а ты где ищешь?

С: Interest , Google и еще там стоку меня есть.

А: Еще знаешь какой способ есть? Часто бывает, что те картинки, которые на стоках есть, качество они есть в открытом доступе. Попробуй искать на стоке, если не хочешь покупать, сохрани на рабочий стол и перетащи потом в Google. То есть, если ты в Google картинки перетащишь, сейчас я тебе покажу, то он, в принципе, может найти какую-то картинку. Сейчас прям на примере покажу тебе, допустим, какой-то фотобанк, какую-нибудь картинку найдем. Сейчас, поиск нужен. Ну вот, к примеру, вот эта вот ракетка. Ты просто в большом размере сохраняешь её на рабочий стол, потом переходишь в Google. Так, уже открылось. Переходишь обязательно в картинки, и следующий момент, просто в поисковую строчку вот эту вот картинку сюда перетаскиваешь, и Google по данной картинке ищет аналогично.

С: Ага.

А: То есть, такой хороший способ найти. Очень часто сюда заходишь и можно найти данную картинку в свободном доступе без водяных знаков, как вариант, то есть, качество картинок можно найти. Тоже такой способ, попробуй к поиску.

С: Да, да.

А: Ну и бывает, какие-то отдельные сайты по текстурам.

С: Да, я когда сел за эту работу, я не знал, что есть текстуры, то есть, я искал фотографии, а потом как-то случайно нашел текстуру земли. Можно было другие текстуры использовать.

А: Ну еще есть, скажем, прям специальные программы, которые генерируют деревья разные, то есть, тебе нужно лист на дерево сделать хвойное, то есть, есть которые генерируют камни, ну короче, прям есть программы, которые занимаются генерацией различных элементов текстур, деревьев. Зачастую они на английском, но в принципе, я думаю, если прям припрет, то можно разобраться.

С: Ну да.

А:  То есть, попробуй, поищи.

С: Ок, что еще? Транспорт, ну в принципе, транспорт, я по нашему видео обзору я понял, что просто надо было рисовать большой размер, в большом размере, то есть, например, корабль или машины, а потом просто уменьшить. Я просто взял, как бы у меня не было времени, я бросил его исходник, уменьшил, а потом, как бы на глаз.

А: Ну, в принципе, да.

С: Но всё же, ладно исходники такие, я понял, что тоже можно найти, потому что я думал, что может машину очень тяжело найти под таким углом.

А: Ну да.

С: Я думал, может быть он отрисовывал как-то от руки, ну наверно он нашел исходник.

А: Ну, я думаю, он просто взял какие-то исходники и уже  там на планшете поверх наложил, то есть, ну, я у него там книгу покупал с курсом, он в основном работает…

С: Как рисовать малиновых пауков?

А: Да, как бы я не советую покупать.

С: Кстати, я её не находил. Может я искал бесплатные, не находил может.

А: Ну, там короче говоря, ни фига ничего не обучается, он вообще там комментарии не дает. Там просто показано видео, как он ее рисует. Ну, я если для себя парочку моментов взял, но она не стоит своих денег, скажем так. То есть, я не знаю, любой видео урок, который будет гораздо полезнее, ну опять-таки до определенного уровня, если ты не фанат тех.дизайнов, если там просто глядя на работу без объяснения, здесь можно всякие фишки взять, то она вообще бесполезна. На начальном уровне я вообще не рекомендую покупать.

С: Я понял! Хорошо. Дальше вот вулкан, например, то есть, ну в принципе, я не знаю, как он рисовал, но я взял и подбирал цвета и делал мазки и потом подбирал через фильтры наложения, подбирал, как это смотрится еще хуже, а вот, как надо было делать. Может как-то можно сделать может? Ну, в принципе, насколько я вижу, он тоже сделал мазки кистью.

А: Ну, у него, как сказать, на планшете нажимаешь, у него получается они не ровные, а ты больше нажимаешь, получается больше по размеру вот этот нажим, меньше нажимаешь — значит меньше. То есть, сейчас я тебе покажу какой принцип, когда ты работаешь на планшете. То есть, мышкой тут если ты рисуешь, линия получается вот такая вот. Вот ты провел – хоп, а когда ты рисуешь на планшете, у тебя есть возможность степенью нажатия на перо сделать следующее: так, сейчас. То есть, в каких-то моментах ты можешь сделать просто при легком нажатии, не отрывая такую небольшую линию, и потом просто жирную. За счет этого получится красиво и естественно. То есть, на мышке — это не реально сделать. То есть, если ты захочешь тех.дизайном заниматься, то лучше планшет приобрести, потому что сильно повысится качество, но прям сделать так, в принципе, с помощью мышки не получится. Лучше найти отдельно горы, вулкан, у вулкана взять отдельно вот эту вот часть и с помощью ластика вот это все нижнее стереть. То есть, совместить 2 картинки. Это будет самый простой вариант. Ну что можно сделать еще?  Можно поискать вулкан в формате .pmg что бы вот эта часть верхняя была прозрачная. Ты, в принципе, качественно вырезать не сможешь и получится некрасиво для того, что бы было, я думаю, в принципе. Сейчас в интернете посмотрим.

С: Должны быть.

А: Потому что, я думаю, опять-таки, кто-то уже генерировал в каких-то программах, в принципе, я думаю, если поискать, можно попробовать найти, либо как вариант ищи вот эту вот лаву извергающую, чтобы небо было примерно такого же оттенка, как у тебя. То есть, ты потом можешь чуть-чуть подкорректировать с помощью цветового тона насыщенности, что бы небо вписалось немножко потереть ластиком и будет прям реалистично. То есть, тоже, как вариант такой, в принципе, можно попробовать найти какой-нибудь генератор частиц огня, такой тоже есть.

С: Да, вон там я уже неплохой вижу.

А: Ну да, разными способами попробовать. Старайся, скажем, просто ставить задачи, чтобы было качество максимально, при этом было затрат по времени минимально, и уже от этого искать каким способом этого достичь. Способов, на самом деле, можно придумать кучу. Это, как бы больше от фантазии зависит, от того, сколько ты инструментов знаешь. Если знаешь, как добиться с помощью твоих способов, ну ничего пока не изобретай, делай, так, как есть, если потом будешь деньги зарабатывать.

С: Все, понял, хорошо. Так, далее. Вот там на табличке, там такие разноцветные полоски, но они, у них как бы не ровный цвет, а как-то внизу, как будто потертый. Это использовалась какая-то кисть?

А: Это можно и с помощью кисти сделать, но скорее всего, текстура бумаги такая пошарпаная, которая наложена поверх либо цвета, либо где у тебя сейчас ключи. Тут у тебя есть сплошная заливка?

С: Да, да.

А: Если ты наложишь вот сюда текстуру бумаги, сейчас, я у себя найду где-нибудь, давай вытащим сейчас отдельную сюда. В принципе, можно сделать вот так вот и режим наложения какой-нибудь попробовать, либо наоборот, на текстуру накладываем цвет. Сейчас я удалю всё лишнее…и тот цвет уже выставляем в режиме наложения, и немного уменьшаем непрозрачность. Всё же будет приблизительно, либо выбираем кисточку, щелкаем правой кнопкой мыши вот здесь вот, есть ну как бы, можно найти разные кисточки, обычно мокрые края, мокрые кисточки называются.  Берешь какую-нибудь кисть и просто вот так вот. Так, в принципе, можно ластиком сделать тоже самое, только не прозрачность убирай, чтобы более естественно было.  Ну вот, в принципе, вот такой эффект получается.

С: Да, да, так здорово!

А: То есть, разными способами, можно и ластиком. Ты просто убираешь ненужное, можно выбрать кисточку, выбрать цвет фона и кисточкой уже поверх накладывать. Как вариант, можешь попробовать, проще, удобнее сделать такой эффект можно.

С: Хорошо, понял. А, может потому что я не рисовал по этой работе?

А: Да, давай.

С: Вот там меня интересует девушка. Я очень много вижу там иконки, вот обрабатывается именно в таком стиле. Вот как она обрабатывалась?

А: Я понял вопрос. Я тебе сейчас скину ссылку.

С: Да, вот даже рубашка, она вот как будто какая-то, не знаю даже как ее обработать.

А: Так, сейчас. Вот один из способов, как это сделать. Сейчас я тебе скину, ну и способ, который я использую, делается довольно просто, но опять-таки без планшета обработать человека тебе будет очень тяжело, потому что здесь очень много таких плавных линий с помощью инструмента и пера. Ты просто забудешь это делать. Делается это следующим способом: ты просто берешь белый цвет кисточки и обводишь все светлые вот эти вот линии и участки, потом берешь белую кисточку темного цвета и обводишь вот эти все темные участки. Тоже самое на лице. Там, где у нас темная часть лица — черным цветов размываешь, где светлая — наоборот светлым.

С: А волосы?

А: А волосы, точно также. Здесь нужно, опять-таки на планшете делать, такие вот плавные линии. Всё же, можно делать в хаотичном порядке, но опять-таки, придерживаясь, где левая часть волос, она светлее и ближе к уху, к лицу она темнее. Здесь у нас будет больше светлых линий, здесь больше темных. В принципе, тот же самый способ, который я тебе показывал, вот как горы обрабатывать — тоже самое, но при этом, без планшета, в принципе, человек так обработать не сможет. То есть, точнее это можно, но если в планшете ты это будешь делать 15 минут, то с помощью мышки и инструмента пера займет 3 дня, наверно, но при этом, результат будет в разы хуже. То есть, я не рекомендую там вообще париться. Вот есть способ, который я тебе скинул, который не такой качественный, но тем не менее, гораздо проще и результат будет быстрее, скажем так.

С: Спасибо, хорошо. И еще, там  в самом низу, клавиши подрисованные.  Мне кажется, у меня, не знаю, в фотошопе делалось или это какая-то другая программка?

А: Не тут, в фотошопе. Просто это, что сделано здесь. Просто немножко нарисованы блики, добавлены тени, То есть, вот такие свечения. Сейчас я открою картинку, покажу, как сделать за счет чего. Здесь если увеличить, мы видим, что так небольшие свечения у нас идут и плюс обилие различных теней, жесткие темные тени более размытые тени, градиенты, переходящие от светлого к темному. Это всё дает такой эффект, скажем, немного рисованности, но и реалистичности, плюс вот этот вот небольшой блик, который сильно выделяет границу, при этом, оттенки ты можешь посмотреть. Они по факту практически одинаковые по цвету — что левая вот эта вот часть, и что правая. Вот этот блик, как бы разъединяет их. Делается это специально, то есть, в реальности такого в принципе обычно не встречаешь. Как это сделать? То есть, допустим, ты линию рисуешь, где хочешь, наложить данный блик с помощью инструмента пера, потом создаешь дополнительный слой, выбираешь, сейчас, обычные кисти выставлю. Кисточку выбираешь в 1 пиксель, переходишь на инструмент перо и делаешь обводку контура, и при этом здесь вставляешь имитировать нажим, нажимаешь «ок», а цвет, забыл цвет, — выбираем белый. У нас получается такое свечение небольшое. Для того, чтобы оно было более реалистичным, можно сделать несколько таких вариантов. То есть, тоже самое, но только не с кисточкой в 1 пиксель, а допустим, следующую в 3 пикселя сделать. Создаем дополнительный слой, допустим, этот назовем 3 пикселя, а этот 1, и тоже самое делаем. Ну, еще, допустим, можно там 7 пикселей сделать, чтобы было совсем максимально реалистично. Так, забыл выставить, слишком большой, 5 отлично будет. Так, здесь у нас нажим не имитируется , ну в настройках кисти там они сбились. В принципе, должен быть плавный переход. Окей, пока что так и оставим. В принципе, здесь не должно быть таких вот жирных линий, должен быть плавный такой переходик и за счет этого получается такой блик, когда ты выделяешь эти границы, ну и соответственно, здесь просто накладываешь тени на какие-то темные участки, а на светлые — белый цвет, плюс обрабатываешь. В принципе, все что, наверно, здесь есть, каких- то других элементов здесь нету. Тени, освещение и блики – все. Допустим, все эти блики очень хорошо заметны, вот эти вот края. Просто опять-таки качественно сделан градиент и переходы в более чистые цвета, скажем в реальности, потому что в реальности переходов градиентов на таком маленьком участке обычно не бывает. Такое может быть, только если прям рядом вместе с ними будет стоять 2 каких-то разных источника освещения и светить один будет ярко, другой будет тускло светить.

С: Ну да, хорошо. Ну, в принципе, всё, по работе всё.

А: Макет тогда дорабатывай и, в принципе, потом можешь приступать к там, что у нас материал дизайн, по-моему. Всё, давай, желаю удачи!

С: Хорошо, слушай…

А: Ага.

С: На данном этапе тебе скидывать?

А: Да, в принципе, уже не нужно. Тут как бы всё, что нужно, ты уже сам знаешь. Доработать, ничего нового, в принципе, сказать не могу.

С: Да, для себя отмечу, а это по материалу можно уточнить?

А: Да, конечно.

С: Просто я, как бы выбирал себе работы и, это, выбрал одну, а потом, как бы не вижу отличий от материала и дизайна, то есть, какие там отличия будут?

А: Ну, я бы порекомендовал тебе просто пойти в Google, это их разработка, у них есть там статьи.

С: Ладно.

А: На эту тему у них там своя философия, ну почитай немного.

С: Просто сначала я выбрал работу, где много разных человечков, руки, компьютер, объекты разные. Я думал сначала нужно отрисовывать, но потом до меня дошло, что, наверно да, отрисовывать элементы да, как бы, начал искать побольше элементов, ну что, как бы нет разницы между материалом, ну оно как бы, в принципе.

А: Ну, оно сильно похоже. То есть, лучше, скажем, изучить их философию, чтобы понимать в чём их отличие, и как бы зачем они создали. Я, в принципе, понимаю почему у них это вышло. Потому что у них системы очень высоконагруженные и тот же там тех. дизайн они никогда не будут использовать. Они просто упадут, их сервера. Это непригодно, скажем для таких нагрузок. Ну, это естественно, плюс, потому что информации становится всё больше и больше, и когда очень много графики это перегружает мозг. Чем проще графика, тем для человека это будет проще. Ну, скажем — это основное вечное, почему появились вообще такие стили, как флэт, минимализм и материал. В принципе, это будет только развиваться. Ну, вообще, я люблю просто почитать, посмотреть в Google, даже можно просто вбить, чем отличается флэт от материал, посмотреть некоторые моменты.

С: Ну да, хорошо. В принципе, тех. дизайн, вот только когда я познакомился с твоими курсами, вот я познакомился и с тех.дизайном. Я даже таких сайтов не видел, то есть, всё, что я видел — это флет. Может, я просто мало лазил по интернету…

А: Да нет. Просто тех.дизайн не распространен, в принципе, так сильно, ну по нескольким причинам. Во-первых, он дорогой, во-вторых, он не эффективный с точки зрения продаж, поэтому никакие там крупные бренды никогда пользоваться не будут. Исключения составляют только какие-то плакаты, листовки и т.д., где на сайт трафик не идет, потому что такая страница будет грузиться в 5-10 раз больше. Соответственно, посетителей меньше, поэтому с точки зрения эффективности продаж он просто красивый. Его в основном заказывают заказчики для того, чтобы попонтоваться перед друзьями, скажем так.

С: Я понял.

А: То есть, если будешь делать дизайн, то оперируй именно такими этими, то есть, говорить, что это будет эффективно, не нужно. Скажи, что это будет круто показывать своим друзьям, то есть, в основном заказывают поэтому.

С: Я понял, хорошо. Значит, по материалу я ищу и отрисовываю не человечков, а там, что-то…

А: Да, в основном интерфейс.

С: Элементы, ну всякие выпадашки, как они там называются?

А: Ну, если конечно, будет желание, то можешь поотрисовывать, но не сложные. Лучше иконки поотрисовывай с такой, то, что, в принципе, что тебе еще понадобится, потому что всю вот эту графику, как сказать, человечков и так далее, их на фотобанках завалить и проще купить, и потратить 150 рублей вместо того, чтобы сидеть и пол дня отрисовывать, просто экономически невыгодно будет.

С: Я понял.

А: То есть, смотри из этого вот, ну если тебе будет выгодно, с точки зрения денег, быстрее нарисовать, чем купить, то рисуй. Если тебе дольше рисовать, как сказать, сэкономишь свои деньги, если купишь, допустим, то лучше купи графику. То есть, я вообще такие элементы не рисую. Вообще, мне проще отказаться и перейти на какой-то другой стиль и я  не знаю, другое сделать, чем тратить время. Я не вижу в этом смысла.

С: Ну да если это есть, то я понял. То есть, как бы я раньше думал, что веб-дизайн — это как-то больше вот там обработка фотографий вот этих вот, прорисовка всяких человечков. Я как-то больше в предыдущих работах по юай делал упор на картинки, я как бы, 80% времени ушло на поиск и обработку картинок и всё равно, я как бы не очень обрабатывал, вышло так себе, вот. Но, как оказывается, нужно было отрисовывать элементы. Как бы веб-дизайн — это по сути простановка и прорисовка элементов.

А: Ну, по факту знаешь, как? Ну вообще, если судить, то дизайн сам по себе никому не нужен. Люди не приходят посмотреть на какой-то дизайн, люди приходят купить утюг, заказать пиццу и так далее. То есть, если ты сделал дизайн, когда человек на него заходит и за 15 секунд может заказать пиццу, вместо того, что бы он 2 часа сидит на сайте и ничего не понимает, как сделать заказ. Тогда это крутой дизайн неважно, как он будет выглядеть, даже если там будет пустая страница по форме оплаты — это будет идеальный дизайн. Если там будет много там всех этих дизайнов и красивых картинок, человек не поймет, как заказать этот дизайн, потому что он не решает цель сайта.

С: Я понял.

А: То есть, нужно понимать вообще, зачем сайты создаются, для кого ты их делаешь. Ты их делаешь не для бизнесмена, ты делаешь их для тех людей, которые будут ими пользоваться. Ну, опять-таки это юзабилити, конверсия и так далее. То есть, за это уже можно брать большие деньги, если ты сможешь заказать, что твой сайт будет больше продавать.

С: Я понял.

А: Ну, здесь, скажем, минимум графики. В основном, очень минимум — это не так интересно, с точки зрения там творчества. Творчества здесь вообще нет никакого, здесь уже практически сплошной бизнес.

С: Я прям разочарован. Ты прям, как это, я думал, что веб-дизайн — это картинки всё-таки.

А: Ну да, как бы я тоже так думал. Я ради этого сюда и пришел. Изначально я бы хотел, знаешь всё это рассказать, но люди не хотят это знать.

С: Да, да, ну ты, как бы всё равно — это интересно, это какой-то…

А: Ну, это скажем, до этого нужно дорасти. Сначала нужно дорисоваться. Когда тебе это будет надоедать, когда ты поймешь, что это не эффективно — перейдешь на другой уровень с заказчиками. Им будет пофиг, какая графика — главное продажи. Ну, скажем, просто ты сам к этому придешь. Это невозможно так — оп и ты сразу начал работать с такими заказчиками, с такими задачами. Этого не будет. Сначала ты будешь рисовать красивые сайты, работать с вредными людьми, скажем так, потом постепенно всё будет меняться, скажем так.

С: Я понял. Ну ок, хорошо. Спасибо, спасибо за ссылку! Всё, работай дальше, давай пока!

А: Давай, успехов тебе!

 

 

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments