Этого треда уже нет.
Это копия, сохраненная 23 декабря 2016 года.

Скачать тред: только с превью, с превью и прикрепленными файлами.
Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах. Подробнее

Если вам полезен архив М.Двача, пожертвуйте на оплату сервера.
42 Кб, 853x752
Переверстка для самых маленьких #39895 В конец треда | Веб
Разминайте ручки, расчехляйте линейки и раскройки. Специальная олимпиада объявляется открытой!

Задание
Выбирайте самый корявую картинку или инструкцию в алиэкспрессе, затем сделайте её в подобном стиле.
http://brakodelnya.livejournal.com/8600.html

http://ru.aliexpress.com/store/all-wholesale-products/815160.html

Или
Берете любой предмет и делаете иконку.
http://brakodelnya.livejournal.com/8006.html

Я начну. Мне самому скучно :-(
>>39896>>43032
115 Кб, 318x781
170 Кб, 800x800
#3 #39912
>>39896
Полдня ушло. Наконец-то научился пользоваться фигурами.
>>39913
25 Кб, 326x801
32 Кб, 800x800
#4 #39913
>>39912
Это успех.
20 Кб, 637x536
#5 #39914
Уменьшать кегль или интерлиньяж? Какое зло менее хуже?
>>39916
26 Кб, 326x801
#6 #39915
Зашвар или нет? Как избежать проблемы?
#7 #39916
>>39914
Ну, во-первых, ты можешь сэкономить написав | вместо /.

Что ты имеешь в виду под уменьшать интерлиньяж? У тебя же одна строка. Делай меньше кегль, как в оригинале, или замени текст на иконки.
>>39917>>39922
10 Кб, 242x178
24 Кб, 693x245
29 Кб, 326x801
#8 #39917
>>39916

>уменьшать интерлиньяж


В фотошопе это называется трекинг. Буду называть это так.

>Делай меньше кегль


Так норм? А то чувствую, что кнопки выбиваются с ритма. Смотри на «турбо».

>сэкономить написав | вместо /.


>HEALTHISAVE


Чёт не то.
#9 #39918
оставь одно слово
>>39919
28 Кб, 326x801
#10 #39919
>>39918
Вот теперь норм? Меня беспокоит кнопка «mildew».
>>39920
28 Кб, 326x801
#11 #39920
>>39919
Уменьшил трекинг.
>>39921
27 Кб, 326x801
#12 #39921
>>39920
Вроде всё.
#13 #39922
>>39916

>интерлиньяж


Да, чёт я упоролся. Кернинг, ёпты.
#14 #39923
заебись
#15 #39924
>>39921
А какая цель была?
>>39925
133 Кб, 359x464
447 Кб, 1113x623
1687 Кб, 1000x3000
#16 #39925
>>39924

>А какая цель была?


Научиться перерисовывать объекты в таком стиле.
439 Кб, 2168x1593
#17 #39926
Поебусь-ка над этим.
>>39927>>39940
408 Кб, 682x449
#18 #39927
>>39929
364 Кб, 781x518
#19 #39929
>>39927
Я-то думал, что у меня проблема с перспективной. Взял другую фотку. Оказывается, компутер не по сетке сделан. С трудом попал в пиксели.
>>39930
229 Кб, 515x341
#20 #39930
>>39929
Нащупал ритм.
>>39931
210 Кб, 781x645
#21 #39931
>>39930
Вот.
>>39932>>40336
160 Кб, 775x511
#22 #39932
>>39933
29 Кб, 781x517
#23 #39933
>>39932
Получилось! Беру свои слова обратно. Здесь был ритм :-)
>>39934
19 Кб, 515x341
#24 #39934
>>39933
Потом увеличу. Пошёл спать.
>>39935
19 Кб, 515x341
#25 #39935
>>39934
Во втором ряде обнаружил неправильно сдвинутую на пиксель первую клавишу. Вот теперь всё правильно. Теперь всё.
>>39936
19 Кб, 515x341
#26 #39936
>>39940
34 Кб, 1030x682
#27 #39940
>>39926
>>39936
Продолжаю.
>>39941
40 Кб, 1030x682
#28 #39941
>>39942
41 Кб, 1030x682
#29 #39942
>>39943
46 Кб, 1030x682
#30 #39943
>>39944
51 Кб, 1030x682
#31 #39944
#32 #39945
там же кнопки чуть ли не квадратные, ты чего их закруглил?
>>39946
49 Кб, 1030x682
44 Кб, 766x517
#33 #39946
>>39945
Показались слишком квадратными.
>>39947
20 Кб, 207x100
#34 #39947
>>39948
22 Кб, 336x66
#35 #39948
>>39947
Думаю, подойдет 4-я или 5-я.
>>39949
106 Кб, 1030x682
#36 #39949
>>39952
74 Кб, 1030x682
#37 #39952
>>39949
Фух. Наконец-то дошёл до клавиш.
#38 #39953
Ебать ты слоу
>>39955
358 Кб, 1233x474
#39 #39955
>>39953
Не всё так просто.
>>39965
78 Кб, 1030x682
#40 #39965
>>39955
Кажется, я нащупал ритм.
>>39966>>39967
78 Кб, 1030x682
#41 #39966
>>39965
Выровнял. 7px слева и справа.
>>39972
#42 #39967
>>39965
Ты весь тред его щупаешь. Это типа твой блог?
>>39968
32 Кб, 317x466
#43 #39968
>>39967
Я в треде предложил всем разминать ручки и ебаться с пикселями. Но видимо это интересно только мне.
82 Кб, 1030x682
#44 #39972
>>39966
Вот теперь могу спать спокойно.
>>39973
83 Кб, 1030x682
#45 #39973
>>39972
Точно всё.
>>39982
95 Кб, 1030x682
#46 #39982
>>39973
Трудно понять. Это обычные скобочки или 〈математические〉.
>>39983
111 Кб, 1030x682
#47 #39983
>>39982
Почти финализировал кончил.
>>39984
109 Кб, 1030x682
#48 #39984
>>39985
121 Кб, 1030x682
#49 #39985
>>39984
Превозмогаю.
>>39986
125 Кб, 1030x682
#50 #39986
>>39985
Всё, я заебался.
>>39987
84 Кб, 1030x682
#51 #39987
>>39986
Так как я не умею в скевоморфизм. Просто стилизую >>39921
>>40021
46 Кб, 256x256
22 Кб, 256x256
#52 #39988
Всем чайку за мой счёт.

Чёт с пером сложно работать. Потренеруюсть.
http://bezier.method.ac/
1806 Кб, 1772x1779
#53 #39989
>>39988
Поебусь-ка с часиками.
>>39993
196 Кб, 800x800
#54 #39993
>>39989
Попробую подобрать правильную сетку.
>>39994
233 Кб, 842x958
#55 #39994
>>39993
Вспомнил геометрию.
>>39995>>40083
70 Кб, 800x800
#56 #39995
>>39996
89 Кб, 850x850
#57 #39996
>>39997>>40021
#58 #39997
>>39996
60° — 12, 3, 6, 9
30° — 1, 2, 4, 5, 7, 8, 10, 11
6° — 5 минут
>>39998
#59 #39998
>>39997
Чёт обосрался.
90° — 12, 3, 6, 9
30° — 1, 4, 7, 10
60° — 2, 5, 8, 11
6° — 5 минут
2254 Кб, 2420x1470
#60 #39999
Следующая цель.
32 Кб, 300x300
#61 #40000
Лень допиливать.
>>40003
55 Кб, 1510x262
#62 #40003
>>40000
Как Бирман делает шрифты такими чёткими?
>>40004
20 Кб, 606x124
#63 #40004
>>40003
Это интересно. Кажется, что нет порядка, а оказывается, что есть.
7 Кб, 600x800
#64 #40005
привет, тред
#65 #40006
>>40005
ой, подзашкварился в ф-клавишах, без тебя бы и не заметил, тред.
108 Кб, 125x895
#66 #40009
>>40005
PSHHHH.... YOBA ETO TI?
58 Кб, 512x909
#67 #40010
>>40005
Милости прошу к нашему шалашу.

Как притупить углы?
>>40011
50 Кб, 512x909
#68 #40011
>>40010
Понял.
>>40012
19 Кб, 126x1080
#69 #40012
>>40014
80 Кб, 1072x754
34 Кб, 510x705
#70 #40014
>>40012
Интересная деталь.

Толщина линии 1 пт — это 1 писель. 0,05 пт — это не половина пикселя, а 50% непрозрачность линии. Хуй его знает почему.
#71 #40015
>>40014
CTRL+H убирает линейки.
20 Кб, 126x1080
#72 #40016
>>40017
24 Кб, 126x1080
#73 #40017
>>40016
Наконец-то попал в пиксели.
>>40018
22 Кб, 127x648
#74 #40018
>>40017
Разметил кнопочки.
25 Кб, 126x1080
#75 #40019
Антенну отрисовал пером → >>39988
30 Кб, 126x1080
#76 #40020
PSSSSSSSSSSSHHHHHH
>>40021
79 Кб, 600x3240
#77 #40021
>>40020
>>39987
>>39996
>>39921
Быстро я справился.
>>40022
85 Кб, 600x3240
#78 #40022
>>40021
Последняя правка.
>>40023
79 Кб, 600x3240
#79 #40023
>>40022
Бля, метрически всё правильно, но оптически пидорасит сетку. Четверка и единица выбивается с ритма.
>>40025
202 Кб, 800x2400
#80 #40025
>>40023
YOBA в треде, кто спрашивает?
241 Кб, 1532x686
32 Кб, 300x1080
#81 #40026
>>40025
Это произошло потому, что я увеличил картинку и пропорции распидарасило.

Что не так на первом пике? Слишком жесткое скругление, которое выбивается с ритма? Или это из-за того, что я уменьшил прозрачность?
83 Кб, 852x488
102 Кб, 865x673
#82 #40027
>>40025
Понял. С левой стороны 6px, а с правой 7px. Не заметил.
>>40029
32 Кб, 300x1080
#83 #40028
>>40025
А если так?
>>40031
16 Кб, 239x296
#84 #40029
>>40027
Ты намекнул на обводку? Чёт мне так глаза жжет.
37 Кб, 300x1080
#85 #40031
>>40028
Заебись. Но раз уж в этом треде мы строим маленький фашизм, то пикрилтд. Еще:
— Старайся создавать документы такого размера, чтобы при необходимости увеличивать их в какое-нибудь кратное число раз, тогда ничего не распидорасит. Впрочем, ты и сам уже наверное понял.
— И цифры тоже можно в пиксели.
— Заливки не нужны.
>>40032>>40037
30 Кб, 775x337
34 Кб, 300x1080
#86 #40032
>>40031
В оригинале именно так, как я сделол.
>>40057
22 Кб, 300x300
#87 #40037
>>40031

>фашизм


Освятил.
29 Кб, 619x213
#88 #40042
>>40014
а как ты представляешь себе линию в 0.5 px? монитор не сможет её отобразить, поэтому пошли на хитрость - полупрозрачная линия выглядит чуть тоньше.
#89 #40057
>>40032
Ну рамка вокруг цифр в пиксели не попала, ну же. Ты в люстре делаешь?
>>40058
#90 #40058
>>40057
В фотошопе.
>>40060
#91 #40060
>>40058
а разве там нет pixel perfect, вроде уже давно что в люстре что в шопе
>>40070
#92 #40070
>>40060
ОП, ты ебанутый, что ты делаешь? Ты высветляешь картинки и обрисовываешь по пикселям как умственно отсталый? На хуя? Кстати, как умственно отсталый умственно отсталому, обьясни как ты так ловко нарисовал деления на часах, я имею ввиду, что я нихуя не смог бы нарисовать так без прикладывания транспортера к монитору лол. В фотошопе есть какой то аналогичный инструмент? Только не говори, что ты их тоже обводил с картинки как даун. Хотя, вот пока писал додумался, что можно ведь на фри трансформе повертеть саму пикчу с точностью до доли градуса.
>>40077>>40083
16 Кб, 409x30
#93 #40077
>>40070

>на фри трансформе повертеть саму пикчу с точностью до доли градуса


Именно так я и сделал.

>Нахуя?


Потому что могу.
70 Кб, 1007x769
10 Кб, 331x238
#94 #40078
Смотрите, чё я придумал. Это же можно отрисовать.
#95 #40083
>>40070

>Хотя, вот пока писал додумался, что можно ведь на фри трансформе повертеть саму пикчу с точностью до доли градуса.


>>39994
#96 #40088
А можно из вектора захерачить чтоб вот так вот в пиксели попало?
>>43033
33 Кб, 448x727
#97 #40091
>>39988
Как этот кал можно начертить семью точками?
>>40094>>40113
#98 #40094
>>40091
Да ты охуел! Я машинку не могу отрисовать, а ты ещё об этом спрашиваешь. Не знаю, кароч.
>>40097
#99 #40097
>>40094
Тоже не понял как это действует, чтобы как у людей.
24 Кб, 410x448
#100 #40113
>>40091
легко же
#101 #40115
>>40113
Ну ты пиздец.
#102 #40116
>>40113
Можно из 2х точек нарисовать овал, и сказать что это голова. Хреново там рекорды считаются.
>>40303
35 Кб, 600x340
#103 #40117
>>40113

>легко

21 Кб, 1008x545
#104 #40133
Бирман поясняет за пиксели.
>>40285>>40304
#105 #40274
Что ты там затих?
>>40281>>40316
#106 #40281
>>40274
Прост :-(
#107 #40285
>>40133
А сказать "цвет сделай светлее" не достаточно илитно?
>>40291
#108 #40291
>>40285
Ты это к чему? Где именно? Ты чё несешь?
#109 #40303
>>40116
епт, там дается же колея в которую надо уложиться. Я тоже сначала думал, что это тру тест на перфекционизм и тренировку руки, красиво рисовал, потом увидел цифры рекордов и перерисовал все без особых проблем, там только с S заёб, из-за одной точки заколебался всё перерисовывать и забил через 10 минут. В целом годный сайт троллить всяких недодизайнеров, которые кичатся тем, что хорошо знают люстру, а на деле не могут кривую нормальную нарисовать
#110 #40304
>>40133
да он поехавший, 256 на 6 и 12 не делится, есть RGB по 8 бит и нехер выебываться. Понаберут гуманитариев по объявлению...
>>40306>>40308
#111 #40306
>>40304
Ясно. Ты не забыл написать ему на почту?
#112 #40308
>>40304
Гуманитарий выходит на связь.

256 red + 256 blue + 256 + green

256 * 3 = 768
768 / 6 = 128
768 / 12 = 64
>>40448
18 Кб, 613x616
#113 #40316
>>40274
Пердолюсь в пиксели и иду к успеху.
https://flowlab.io/
948 Кб, 1928x1058
#114 #40332
Но тут же нету ритма!
>>40334>>40342
#115 #40334
>>40332
Ты крутой. Линии слишком толстые и черные.
>>40335
#116 #40335
>>40334
Кек, я в глаза ебанулся. Он есть, щупай.
>>40336
267 Кб, 823x481
#117 #40336
>>40335
Будет такая же хуйня >>39931
Четче прорабатывай.
5 Кб, 1024x768
#118 #40342
>>40332
проиграл с сосачеров
#119 #40448
>>40308
Это ты охуенно придумал, особенно для градаций серого, про который речь. 2^8 - это 2222222*2 - найди тут тройку.
>>40449
#120 #40449
>>40448
От чего твоя каждая вторая двойка косо смотрит?
>>40472
#121 #40472
>>40449
шатается*
201 Кб, 1000x1312
#122 #40494
Не понимаю, в чем смысл этого дроча? Сидеть вытачивать векторы в шопе, когда есть люстра, потому что там какой-то дебил сказал это 5 баллов, конечно.
Эй, ОП, к тебе приходит заказчик, показывает пик и говорит, сделай так же.
Долго будешь щупать?
>>40495>>40502
#123 #40495
>>40494

>Не понимаю, в чем смысл этого дроча?


>Специальная олимпиада объявляется открытой!


http://lurkmore.to/Special_Olympics

>когда есть люстра


Я уже на нее перекатился и медленно осваиваю.
#124 #40502
>>40494

>Эй, ОП, к тебе приходит заказчик, показывает пик и говорит, сделай так же.


Не знаю. Как ты бы решил эту проблему?
>>40511
#125 #40511
>>40502 Можно сделать в люстре, но иногда быстрее замоделить это в 3D, отрендерить в изометрии линиями, поставить сноски в люстре, всё.
118 Кб, 1000x822
#126 #41533
ОП, ты хоть и наркоман, но ахуенен! Два чаю тебе.
Восхищаюсь тобой
>>41930
300 Кб, 1069x1168
#127 #41930
>>41533

>ахуенен


Я же быстро слился :-(

>Два чаю тебе.


И тебе того же!

Пришло время переверстать форму. Форма сама не переверстается.
https://www.youtube.com/watch?v=h_qNIIIQfVs

>>41927 — первое достижение.
>>41931>>41936
279 Кб, 720x741
#128 #41931
>>41930
Не могу попасть в пиксели градиенты. Понял, что в качестве грязи используется внутренняя тень и шум.
>>41932
116 Кб, 911x615
#129 #41932
Как делать такую тень, чтобы она была не чётко по краям и? >>41931
>>41942
230 Кб, 751x711
#130 #41933
Будет близко к оригиналу.
>>41934
118 Кб, 670x468
#131 #41934
>>41933
Потом прикручу блик к кнопочке.
476 Кб, 1069x1168
#132 #41936
>>41930
Оп, давай дружить, оставляй и-мейл — будем перекидываться всякими ништяками ну и вообще.
>>41939>>41942
#133 #41939
>>41936
чому тень цветная? жиай пришел и в ваш дом!?
>>41942
#134 #41942
>>41936

>оставляй и-мейл


mailfoj\QrdesignersANUSya"anPUNCTUM0)nru

Комментарии дельные, но на пикче тестовое задание в самзнаешькакоебюро, суть которого сверстать форму по картинке. Здесь дело в технической части, а не смысловой.

>>41932
Бирман пишет о контуре. Как его применить в CSS?
http://ilyabirman.ru/meanwhile/all/ui-shadows/

>>41939

>жиай


Поясни.
>>41948
127 Кб, 1375x982
#135 #41948
>>41942

>>жиай


>Поясни.


жлобал алюминэйшан GI ленивая ты ж хуина
>>41954
93 Кб, 500x422
#136 #41954
>>41948

>это название ряда алгоритмов, используемых в трёхмерной графике для более реалистичной имитации света


Как будто я должен знать.
>>41957
934 Кб, 1920x1280
#137 #41957
>>41954

>Как будто я должен знать


Вы имитируете эффекты реального мира, но даже не знаете как они называются... крестный_отец.жепеге

кстати нихуя тени не реальные, даже если заставить листок излучать свет, все равно не будет таких злоебуче крашенных теней с двух сторон
>>41960
5 Кб, 220x174
#138 #41960
>>41957

>крестный_отец.жепеге


Что почитать по теме? Люто завидую твоим знаниям.
>>41961
#139 #41961
>>41960
Для твоих задач хватит статеек из вики, читай про GI, IOR и френелевские отражения, про каустику и дифузию, SSS тоже глянь, забавная штука. В век матириал дизайна важно тонко понимать материалы и умело их стилизовать.

Именно поэтому в гуглофоне >5.0 охуенные дефолтные обои и полный кал любые скачиваемые, народ тупо не может понять как надо.

и да, не забывай что задача первична, именно под нее ты потребляешь знания, никак не наоборот
>>41966
#140 #41966
>>41961
А как тенюшка будет выглядеть сверху? Скинь исходники, плис.
>>41969
448 Кб, 1920x1280
#141 #41969
>>41966

>тенюшка будет выглядеть сверху


Фишка в том что на вашем макете два крашенных источника света, причем НЕВИДИМЫЕ, ибо парят над листом очень низко, мне было лень, но ты можешь заморочится

лови, только короную макс, иначе обосрешься со светом и материалами
http://rghost.net/8WJ8Qp4Zd
#142 #42680
пиздец, как охуительно у вас все получается. Жалко у меня руки из жопы :(
#144 #42801
Господи какое же говно здесь
>>42814
#145 #42814
>>42801
Ты забыл прикрепить картинку со своей работой.
#146 #43032
>>39895 (OP)

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


>в макет в фотошопе


>2015



Ору, блядь, с долбоеба.
>>43037
#147 #43033
>>40088
Да, в Sketch 3 и Affinity Designer.
#148 #43037
>>43032
Спасибо, что бамнул мертвый тред. Твое мнение ценно для нас.
Тред утонул или удален.
Это копия, сохраненная 23 декабря 2016 года.

Скачать тред: только с превью, с превью и прикрепленными файлами.
Второй вариант может долго скачиваться. Файлы будут только в живых или недавно утонувших тредах. Подробнее

Если вам полезен архив М.Двача, пожертвуйте на оплату сервера.
« /de/В начало тредаВеб-версияНастройки
/a//b//mu//s//vg/Все доски