큰 이미지를 잘 그리는거보다 작은 이미지를 제대로 그리는게 더 어려움 회사에서 아이콘, UI, 캐릭터디자인 다 해봤지만 작은 아이콘이 진짜 어렵습니다 큰걸 작게 줄여도 어떻게 줄이느냐에따라 깨지는 방식도 다 달라서 작은 이미지에서 느낌 차이가 어마어마합니다. 그래서 작은 걸 기준으로 2배수로 놓고 작업한다음 정확이 1/2하죠. 그리고 작아질수록 픽셀 단위이기때문에 픽셀에는 소수가 없습니다. 정수로만 작업해야함 옛날에 도트 캐릭터 게임 생각하시면 될거같아요. 캐릭터를 그려서 줄이면 되는데 왜 도트를 굳이 찍을까요 작은 이미지에서 정확하고 딱 떨어지는 색감과 형태를 잡아야 하기때문에 도트를 찍습니다. 일러스트 캐릭터는 느낌으로 그리지만 도트 캐릭터는 찍을때마다 정확하게 왜 이렇게 찍는지 알고 찍어야 합니다. 아이콘도 마찬가지죠.
디자인 년차는 꽤 되는데도... 매번 회사에서 쓰는 사이트들에서 리소스 받아다 쓰고 하던거만 해서 그런가 마디아님 채널 보다보면 자괴감 개오짐... 지금까지 뭐하고 살았나 싶기도하고... 또 요즘 신입급으로 포폴 평가 받으시는분들 보면 진짜 너무 잘하시더라고요... 년차만 쌓였지 다 부질없는 경력된거 같아서 항상 영상보면서 배웁니다... 근데 볼때마다 자괴감들어 우울해짐... 걍 그만둘까...흑
UI 디자인을 하면서 질문이 생겨서 질문드립니다! 아이콘 선굵기를 1배수에서 1px로 하게 되면 어쩔수 없이 위치값에서 소수점을 사용하게 될 수 밖에 없더라구요.(1픽셀를 채우기 위해 0.5에 위치시키게 되기에) 그래서 질문을 드립니다! 2배수로 주로 디자인을 하게 되는 이유가 아이콘 또한 2px로 선 굵기를 주게되면 위치값도 딱 떨어지게 할 수 있는거랑 연관이 있는지 질문드려요!
개발자의 속이 뻥 뚫리네요 ㅋㅋㅋㅋㅋ 전 개발자인데도 Figma 에서 일일이 아이콘 픽셀 단위로 맞춘 기억이 나네요... 이게 어렵나..? 하면서... SVG로 하더라도 브라우저에 표시되는 경우 모니터 픽셀 밀도에 따라 위치나 깨짐 정도의 차이가 있는데 이걸 모르는 경우가 많더라고요...
아마도 네이버정도면 다들 배우신 분일거라 디자인 과정에서의 실수는 아닐거고 제 컴 문제일텐데 네이버 프로그램만 키면 딱 아이콘이 저런식으로 깨지더라고요. 아마 디스플레이가 뭔가 아다리가 안 맞는 거겠죠...? 네이버는 아이콘을 벡터가 아니라 png로 쓰는건지, 아니면 벡터인데 뭔가 오류가 있어서 깨지는지는 모르겠는데 참...
불편을 드려서 죄송합니다. 저도 하다 보니 열정에 불타서.. 지인들 알려주듯 과감하고 편하게 컨펌을 해서 반말 등이 나온 것 같습니다. 조언 감사합니당! 파이팅!! 개인적인 의견이 항상 도움이 되는 말이 많더라고요. 앞으로도 잘 부탁드립니당 ..앞서 몇 개 녹화 더 한 게 있는데 그거까지만 봐주세용..
![[역대급 무료강의] 실무 배너디자인 방향성 잡는 방법](http://i.ytimg.com/vi/UQLqCu1GdTI/mqdefault.jpg)
![5분에1개씩 일러스트 이것만 따라하면 100% 감잡는다 [일러스트]](/img/1.gif)
큰 이미지를 잘 그리는거보다 작은 이미지를 제대로 그리는게 더 어려움
회사에서 아이콘, UI, 캐릭터디자인 다 해봤지만 작은 아이콘이 진짜 어렵습니다
큰걸 작게 줄여도 어떻게 줄이느냐에따라 깨지는 방식도 다 달라서 작은 이미지에서 느낌 차이가 어마어마합니다.
그래서 작은 걸 기준으로 2배수로 놓고 작업한다음 정확이 1/2하죠.
그리고 작아질수록 픽셀 단위이기때문에 픽셀에는 소수가 없습니다. 정수로만 작업해야함
옛날에 도트 캐릭터 게임 생각하시면 될거같아요. 캐릭터를 그려서 줄이면 되는데 왜 도트를 굳이 찍을까요
작은 이미지에서 정확하고 딱 떨어지는 색감과 형태를 잡아야 하기때문에 도트를 찍습니다.
일러스트 캐릭터는 느낌으로 그리지만 도트 캐릭터는 찍을때마다 정확하게 왜 이렇게 찍는지 알고 찍어야 합니다.
아이콘도 마찬가지죠.
우와... 소수점이 나오면 안된다는 이유를 png jpg 로 추출해서 보여주시니까 직감적으로 확 이해가 됐어요! 왜 소수점을 없애야 하는지 제대로 이해했습니다!! 너무 감사합니다! 보는 내내 '우와...' 연발했습니다!
디자인 년차는 꽤 되는데도... 매번 회사에서 쓰는 사이트들에서 리소스 받아다 쓰고 하던거만 해서 그런가 마디아님 채널 보다보면 자괴감 개오짐... 지금까지 뭐하고 살았나 싶기도하고... 또 요즘 신입급으로 포폴 평가 받으시는분들 보면 진짜 너무 잘하시더라고요... 년차만 쌓였지 다 부질없는 경력된거 같아서 항상 영상보면서 배웁니다... 근데 볼때마다 자괴감들어 우울해짐... 걍 그만둘까...흑
어느 분야던지 계속 공부하지 않으면 도태되는 것 같아요. ㅠ
@@goatkinggod 맞아여 ㅠㅠ
님 마음 이해가 가네요..
제얘기로군요.... ㅠㅠㅠㅠ
부족한 점을 깨닫고 얼른 보완해야지가 아니라 포기하고 그만둘까라고 생각한다면 그만두시는게 맞습니다-ㅎ 성향 자체가 진취적이지 않기 때문에 나중에 언제 좌절해도 또 좌절하실 스타일입니다-
공격적으로 들릴 수 있는 부분에 하트 넣는 거 너무 웃겨요ㅋㅋㅋㅋㅋㅋㅋ
아이콘 픽셀 안 뭉개지게, 실무에서 기본중의 기본이죠.
저기서 서로간의 크기, 볼륨감 등 밸런스까지 잡아주면 오케이!!!
혹시 볼륨감 이라는게 어떤건지 알려주실수 있나요?
@@user-is628 7:04 말씀하시는 것 같네요
개발자로 일하면서 ui디자이너 분들이랑 일할 때가 많은데, ui 결과물이 개발 단계에서 생길 수 있는 문제들을 정말 명쾌하게 알려주셔서 놀랍네요 :)
저희 팀 ui 작업자 분들한테도 꼭 공유드리고 싶은 내용이에요
👍
피드백 잘 봤습니다~! :)
아이콘 디자인에서 가장 중요한 건, 가이드군요. 소수점이 아닌 정수로 규격을 맞춰야 한다는 거. 느낌이 아닌, 픽셀 맞춰서 그려야 하는거군요!
오왕… 저는 작지서 도식화 그리느라 일러 써서 전혀 몰랐는데 맨날 켜두고 그렸던 격자에 물리기가 이런 효과를 가져오는 군요.. 앞으로도 켜놓고ㅠ써야겠어요! 알고리즘 고맙다
못하겠으면 그리드 키고 스냅.. 꼭 쓰세요 여러분..
UI 디자인을 하면서 질문이 생겨서 질문드립니다! 아이콘 선굵기를 1배수에서 1px로 하게 되면 어쩔수 없이 위치값에서 소수점을 사용하게 될 수 밖에 없더라구요.(1픽셀를 채우기 위해 0.5에 위치시키게 되기에) 그래서 질문을 드립니다! 2배수로 주로 디자인을 하게 되는 이유가 아이콘 또한 2px로 선 굵기를 주게되면 위치값도 딱 떨어지게 할 수 있는거랑 연관이 있는지 질문드려요!
ㅠㅠ역시 쉬운게 없네요 이렇게 항상 노력해주시는 분들 덕분에 제가 보기 좋은 아이콘을 보고 생활하는 거겠죠.. 😊 모두 화이팅 하세요 감사합니다.
일러스트라고 맨날 무지성으로 그렸었는데
내보낼 때는 png라 픽셀 신경써야 하는구나
아무도 이렇게 자세히 알려주시는 분이 없었어요 ㅠㅠ 정말 참 스승… 감사합니다 마디아님… 마디아님 영상 다 보는 그 날까지 열심히 공부해야겠어요…
개발자의 속이 뻥 뚫리네요 ㅋㅋㅋㅋㅋ 전 개발자인데도 Figma 에서 일일이 아이콘 픽셀 단위로 맞춘 기억이 나네요... 이게 어렵나..? 하면서... SVG로 하더라도 브라우저에 표시되는 경우 모니터 픽셀 밀도에 따라 위치나 깨짐 정도의 차이가 있는데 이걸 모르는 경우가 많더라고요...
호우 확실히 끊어 말해주시니까 쌩초보부터 시작하는 저도 포인트를 알 것 같아요..! 조금씩 더 배워갑니다!
아이콘 사이즈 기준없이 만들면 모아놓고 봤을때 분명 불편할텐데.. 개발자가 이정도로 느낄정도면.. 그렇다고 디자이너에게 수정요청하기에도 애매해서 문제
크으 완전꿀팁이네용! 실제로 내보내서 보여주니까 이해가 쏙쏙되고 좋아요! 늘 많은 도움받습니다 🥰🥰
아마도 네이버정도면 다들 배우신 분일거라 디자인 과정에서의 실수는 아닐거고 제 컴 문제일텐데 네이버 프로그램만 키면 딱 아이콘이 저런식으로 깨지더라고요. 아마 디스플레이가 뭔가 아다리가 안 맞는 거겠죠...? 네이버는 아이콘을 벡터가 아니라 png로 쓰는건지, 아니면 벡터인데 뭔가 오류가 있어서 깨지는지는 모르겠는데 참...
아... 누가 이런거 지적 안해주나 했는데 정말 좋은 영상이네요.
아이콘 드로잉의 기본상식을 잘 배우고 가는 것 같습니다. 감사합니다.
피드백 너무 재미있어요ㅎㅎㅎ 눈으로 보는게 제일 쉬워~♡
마디아님 아이콘 그리실때 항상 가이드 박스를 그리고 하시잖아요 그 박스 크기를 그리는 기준이 있을까요?? 가이드를 잡기가 어려워서요ㅠㅠ
저도 생각없이 그냥 그렸는데 감사합니다
와 처음 영상보는데 놀랐네요 깨닫는게 많네요!
신입인 저에게 너무 도움 되는 영상입니다 ㅎ
안녕하세요. 저는 컴퓨터 그래픽에 문외한 인데 재미있네요. 그런데 한개의 아이콘을 만들고 어떻게 저장하는지 그리고 모음을 만들고 어떻게 저장하고 사용하는지 관리적인 것도 올려주시면 도움이 많이 될 것 같습니다.
6년차 디자이너인데 아무리 처음이라지만 음.. 저걸 굳이 스트로크를 써야하나 싶기도하고..
프..리.. 픽….
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ마디아님 오열 ㅠㅠ
자막에 💗하트 붙는게 넘 웃겨여ㅋㅋㅋㅋ
하… 우리팀 디자이너분한테 영상링크 전달하고싶다…
멋지다 멋져~
실력도 상당하시고 설명도 잘 해주시고
최고❤
내가 할 수도 있는 실수가 있을까 싶어 봤더니 가장 기본적인 부분에 대한 지적이었네요
마디아님 대학생입니다 포트폴리오용 앱디자인하고 있는데요. 포폴용 작업도 이런 디테일 필요할까요 어떻게 생각하시나요!
디자인에 사실 포폴용이고 아니고는 크게 나뉘지 않지만.. 시간적 여유가 없다면 유도리 있게 작업하시면 될 것 같습니다.
다만 습관은 무서운 것이기 때문에 작업은 대충하는 것보단 어느정도 디테일을 잡아주시면 좋을 것 같네요~
감사요
가끔 작업할때 벡터를 jpg로 변환하는데, 왜 깨짐현상이 생기나 했더니....이런게 문제가 되는 거였군요...모닝 깨달음...!
같은 것을 알려줘도...
선으로 생각하는 분들과
점선으로 생각하는 분들과
화살표로 생각하는 분들이 공존한다.
ㅋㅋ아이콘이 이렇게 손이 많이 가는거구나ㅜㅜ
디자이너가 해야할일
1. 로고
2. 각종 편집디자인
3. 상페
4. 웹 ui
5. 앱 ui
6. 가끔 ux
7. 재수없으면 시스템
8. 퍼블리싱
솔직히 디자인만하다
퍼블리싱쪽만 가도 공부가 끝도없는데 ㄹㅇ.. 아이콘까지 만들면 난 살고싶지않다 ㅋㅋ
다하는데 죽을맛이네여😂
피드백 오졌다... 잘봤습니다
나중에 기존 스타일과 반대로 큰 이미지가 퉁퉁 들어가는게 아닌 텍스트가 많이 들어가는 페이지 같은거 제작해 주시면 좋겠습니다ㅜ
내용이나 정보가 많을때 레이아웃이나 간격 같은걸 어떻게 짜야하는지 보고 싶어서요..
소수점이 아무래도 픽셀 기준이라 그런가보군요 신기하네
오늘 피드백도 좋다는거야~♡
저도 알아듣게 설명해주시다니.. 이거 진짜 지리는데 어휘력이 조져서 이딴 표현밖에 안되네요..
하트 아이콘이나 쇼핑카트 아이콘 등은 그릴땐 정수여도 모양을 확장시키면 소수점이 나오는데 확장시킨다음에 다시 정수로 맞춰주면 되는건가요? 가이드에 안 닿을때가 종종 있어서 질문남겨봅니다
아이콘이 정수로 그려졌다면 라인을 안쪽으로 넣으세용!
그럼 익스펜드 하셔도 그대로 일겁니당~!
@@UXUIDesign 확장 후 모양을 합치면 소수점이 되는데 정수로 맞춰야할까요?
소수점 넣지말라는건 어차피 프론트 개발자한테 줘봤자 소수점 단위까지 못 맞춰줘서 그런것도 있어요 디자인적인 관점에선 모르겠지만 개발자 입장에서 소수점 덩어리로주면 딱 맞춰지지도 않는데 디자인이랑 맞춰달라해해서 골때릴때 많아요
전공자는 아니지만 재밌네요ㅋㅋ
질문있습니다! 그러면 아이콘 같은 경우는, 일러스트레이터 보다는 XD를 이용해서 디자인 하는게 더 간편할 수 있는건가요? 픽셀로 딱딱 스냅을 해주니까 그런면에서 깨지지 않게 될 것같은데...
일러스트레이터에도 상단 보기메뉴에 픽셀스냅기능이 있어요. 그리고 이걸 실제로 쓰는 지는 모르겠는데, 윈도우 단축키도 ctrl+alt+Y 누르면 픽셀 미리보기 기능도 있더라구요.
요즘엔 디스플레이, 프로세서 성능이 좋기때문에 이렇게까지 안해도 됩니다 ㅎㅎ
짱이다..
제대로 그리는 아이콘 근데 이제 정수를 곁들인
아놔 쌤 사랑해여
와 이런차이가
외 스바 개쩐다…
걈사합니다!!!!
이런 기초 모르는 사람들이 너무 많음
아이콘 응근 귀칞음 ㅜㅋ근데은근공부도좀해야함
♥
배워야겠다
이런거 학원에서도 안알랴줌
오
영상 잘 봤습니다. 그런데.....
같은 문장을 세번 네번씩 반복하시는 습관은, 듣는 입장에서 굉장히 지치네요....
그만큼 중요하니까요
이정도 강박도 없으면서 그래픽 작업을 하는분들이 있구나...
앱을 개발하면서 많은 아이콘을 쓰지만 아이콘을 제작할때 이정도로 신경써야하는지 몰랐네요
근데 알려주시는건 감사하지만 억양과 반말을 섞어쓰는게 조금 안좋네요... 물론 개인적인 의견이긴 하지만 말투를 바꿔주시면 감사하겠습니다
불편을 드려서 죄송합니다.
저도 하다 보니 열정에 불타서.. 지인들 알려주듯 과감하고 편하게 컨펌을 해서 반말 등이 나온 것 같습니다.
조언 감사합니당! 파이팅!!
개인적인 의견이 항상 도움이 되는 말이 많더라고요.
앞으로도 잘 부탁드립니당
..앞서 몇 개 녹화 더 한 게 있는데 그거까지만 봐주세용..
형, 나는괜찮아. 너무 좋아.
뭐는 감사하지만 이런건 거슬리니 바꿔달라, 이딴것좀 안해주셨으면 좋겠습니다. 무료급식소에서 예쁘고 맛있게좀 만들라고 진상부리는것같네
@@Bean-Bug 알려주신거에 감사드리는건 진심 입니다. 어디까지나 저의 의견을 말씀드리고 요청을 드린거 뿐이지 진상을 부렸다고 생각되지는 않습니다. 그래도 저의 글이 불쾌하셨다면 사과드리겠습니다. 죄송합니다.
@@한성현-r3v 제 언행도 다소 예민하고 과격했네요. 그점 사과드립니다.