웹디자인 시작한다면 이건 꼭 보세요[포토샵]
ฝัง
- เผยแพร่เมื่อ 23 ก.พ. 2020
- 좋아요, 구독, 알림, 댓글은 큰 힘이 됩니다.
멤버십을 가입하시고 매월 제작되는 원본 파일을 받아보세요
(가입 이전 파일을 받으실 수 없습니다.)
han.gl/OBONg
➤완벽한 디자인 학습 방법 [마디아 스타일가이드]
• 디자인 실력을 빠르게 향상시키는 방법 |...
➤마디아 사이트
www.madia.co.kr
➤캐릭터 유튜브 채널 : han.gl/9q5gi
➤아래 재생목록에서 수백개의 디자인 & 디자인 팁을 배워가세요
1. 포토샵 기초강의
han.gl/DtcSI
2. 일러스트레이터 기초강의
han.gl/En3UZ
3. 어도비XD 기초강의
han.gl/jpu30
4. 시청자 포트폴리오 컨펌
han.gl/b6INc
5. 웹 디자인UIUX
han.gl/ZMgL9
6. 모바일 디자인UIUX
han.gl/KB5tU
7. 아이콘 디자인
han.gl/qcHlM
8. 디자인 정보
han.gl/BL9AW
안녕하세요 디자이너 마디아입니다.
현재 실무에서 쇼핑몰 UIUX 구축 디자이너로 활동하고 있으며 학생분들에게 조금이나마 도움이 될 수 있는 강의로 여러분들에게 다가가도록 하겠습니다.
--------------------------------------------------------------------------
► youtube channel: bit.ly/2GJYUF1
►단톡방 : open.kakao.com/o/gakaJCvb
►mail : madia_designer@naver.com
►cafe : cafe.naver.com/madiadesigner
--------------------------------------------------------------------------
본 디자인은 다양한 해외 벤치마킹을 통해 고민없이
비쥬얼 적으로만 디자인 되었음을 알립니다.
--------------------------------------------------------------------------
#그리드 #웹디자인 #포토샵 - แนวปฏิบัติและการใช้ชีวิต
![기본이 없다고 매일 혼나는 웹디자인 [시청자 컨펌]](http://i.ytimg.com/vi/QOgsI3EufKs/mqdefault.jpg)
![[역대급 무료강의] 실무 배너디자인 방향성 잡는 방법](http://i.ytimg.com/vi/UQLqCu1GdTI/mqdefault.jpg)
단축키를 어떤걸 누르시는지 잘 몰라서 똑같이 따라하기가 어렵네요.. 예를 들면 그리드 지정한 박스가 갑자기 높이값에 맞춰서 확 길어진다거나, 110짜리 12개를 깔아놓은 뒤에 눈금자로 다시 가이드를 그리는 것도 바로 안맞춰지는데 이런 부분이 어떻게 하는 건지 설명이 좀 없는거 같습니다.
막연히..알고 있어~했던건데.. 해보니까 확실히 다르네요!항상 좋은 강좌 감사합니다!!
마디아님 정말 감사합니다!ㅜㅜ 그리드에 대해 좀 더 알고 싶어져서 찾아보다가 검색에 뜨길래 우연히 들어와서 봤는데, 이렇게 이해 잘 되게 가르쳐 주셔서 놀랐어요! 덕분에 도움 많이 받습니다! 좋은 강의 영상 올려주셔서 감사합니다! 복 많이 받으세요!!
목소리도 나긋나긋 좋으시고 고퀄 강의들 항상 감사합니다!!
와 신기하네요.. 그리드시스템 설명 잘듣고 갑니다.~! 좋은강의 감사합니다.
교수님이 하시는 강의보다 더 알차요 ㅠㅠㅠ 마디아님 보면서 많이 배우고 있습니다!! 감사합니다!!
제일 곤란했던게 처음 웹페이지 사이즈 잡는게 어떻게 잡는지 잘 몰랐었는데 정말 감사합니다. 패스트 캠퍼스 한번 들어볼 예정입니다.
아름다우시네요. 강의 너무 유용합니다 감사해요!😇
많은 도움 되었습니다. 좋은 강의 정말 감사합니다
와 자세한 강의 정말 감사드립니다!!!
이런건 알려주기도 힘든데 쉽게 알려주셔서 감사합니다 참고가되네요
키야..그리드 강의까지.....역시...마디아님 덕에 웹디자인하면서 갈팡질팡 했던 제 마음이 안정되고 있어요ㅎㅎ 재미있게 느껴져요!!!
10:08 느긋느긋한 목소리로 경의로운 겁니다~ 집중해서 보다가 터졌네요 ㅎㅎㅎ., ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 유익한 강의 잘봤습니다 감사합니다 :-)
유익한 강좌 잘봤습니다!!🤟💪👍
자세한 설명 감사합니다~~
유익한 강의 감사합니다~~!
진짜 좋은 강의 감사드립니다!
마디아님~그리드 강의 정말 감사합니다! 영상이 2020년도에 올라온것인데, 혹시 현재도 그리드를 많이 사용할까요?
탈그리드 역시 많이 사용되고 있다고 말씀해주셨는데, 요즘에도 업계에서 그리드를 많이 사용하는지 궁금합니다!
저는 반응형 웹을 잘 만들어보고싶은데, 반응형 웹을 만들때에도 그리드를 많이 참고하면 좋을까요?
도움이 많이 됬습니다! 감사합니다!!
그리드 강의 넘 알차네요. 감사합니다ㅜ
무료로 고퀄리티 강의 올려주셔서 감사합니다
포폴만드는데 도움이 많이 되어요ㅎㅎ 영상 잘 보고갑니다
4:40 엄청 초보입니다! 그리드 하는거 배워보고 싶어서 강의 듣고 있어요 도와주세용 ㅠㅠ 110으로 나눠놓고, 그리드 20잡을때요, 마르퀴툴로 누르면 그 110짜리가 선택되는데, 마디아님처럼 새로 네모 그릴려면 뭐 누르고 그려야하는건가용...?
마디아님 항상 잘 보고 있습니다 감사해요 !!!!!!!!!!!!>.
정말 감사합니다 !!!
항상 감사합니다!
그리드 잡기 너무 힘들었는데 감사합니다ㅠ 저기능은 CC에만 있는거죠?
전에 다른 강좌 보고 그리드 잡았는데 컨텐츠 사이즈가 5나 0으로 안떨어지고 죄다 애매한 값이 나와서 찝찝했어요. 감사합니다 ㅠㅠ
원론적인 부분부터 집어주시는게 정말 도움이 돕니다. 감사합니다.
유래설명부터 상세하고 다양한 예시까지 알려주시면서 재업로드 해주시다니! 항상 감사합니다🙇🏻♀️
항상 감사합니다. !!!
항상 감사합니다:)!!!
항상 잘보고있습니다 감사해요👍🏻🙇🏻♀️
역시!! 기초튼튼강의 감사합니다.
추후 여건이 되신다면 쇼핑몰 상세페이지 레이아웃 관련한 강의도 부탁합니다!!
인사하다 머리 찢는거 귀엽습니다.ㅋㅋ
저 정말 CC의 간편 기능 때문에 정확하게 이해를 못하고 그냥 하고 있었는데ㅠㅠ 기초부터 설명 넘나 감사드려요ㅠㅠㅠㅠㅠ
선생님 4분 5초에서 110px짜리에서 어떤 단축키 사용하셔서 세로로 가득채우신건가요???
답변 부탁드릴께요^^
강의 감사합니다.
좌우 남는여백은 왜필요한걸까요? (흰색부분)
3:00 여기서 사각형안에 색 바로 어덯게 하셧는지 너무 궁금해요 ㅠㅠ
감사합니다 :)
기초부터 실전까지 항상 많은 도움 받고있습니다ㅠㅠㅠㅠ기본기가 탄탄한게 중요한데 알기쉽게 설명해주셔서 또 도움받고갑니다 유익한 영상 감사합니다!
형.. 지린다..
마지막 인사할 때 머리 부딪히셨어요ㅎㅎ
홈페이지만들때 아이콘같은거 만드려는데 무료로 포토샵이런ㄱㅓ없을까요?
네모박스 아래로 칠해지는 단축키가 몬가용?!ㅠㅠ
15:52 이렇게 길게 늘리는거 단축키가 뭔가요..?!
그리드 옮기기 알트 + 쉬프트
상자 지우기 컨트롤 + d
복사한거 한번에 채우기 알트 + 딜리트
4:20 저는 줄자가 스냅이 안잡히는데 왜 그럴까요 ㅠㅠ
마디아님 보다가 질문이 생겨서 댓남겨용. 1320px로 예를 들면 맨끝에 20px씩 남기고 쓰지 않는데 왜 남기는 건가요? 20px씩 없애고 1280px를 컨테이너로 그리드를 그려도 되나요?
저두 궁금하네요 혹시 이유를 찾으셨을라나요?~
12의 약수니까 1 2 3 4 6... 5까지 떨어지려면 60으로 나눠야하는데 그러면 너무 자잘해지겠지요
네이버 스마트 스토어 상세페이지를 만드려는데 네이버는 권장 가로 사이즈가 860px 이라고 되어 있던데 1320px로 사용해도 될까요?? 860px은 그리드를 어떻게 나누는게 좋을까요.. ㅜ?
관련책도 추천해주실수 있으신가요?
마디아님 보고싶었어요 ! ^^
상세한 설명 감사드립니다 많은 도움이 됬어요 그런데 오류?제가 이해를 잘못한건지 모르겠는데 영상에서 16분20초~16분25초 설명하시는 구간이
1060으로 나누기를 하시다가 갑자기 그 부분만 1080으로 나누기를 하셨는데 햇갈리신건지 원래 그렇게 하시는건지 궁금합니다 문의드려요^^
실수입니당~!
마디아님 안녕하세요 옥외간판쪽에서 디자인일을 하고있는 사람입니다.
가끔 취미로 게임 길드홍보지같은거를 만들었는데 항상 만들고나서 글올린뒤 보면 모니터로 봤을때 너무 크고 부담스럽더라구요😂😂
그러다가 마디아님이 알고리즘으로 떠주셔서 이영상을 배워서 적용시키면 좀 덜 부담스러운 이미지구현이 가능할꺼같아 여러번 뒤로갔다 앞으로갔다 하며 따라했습니다😊
너무 유익한 정보 영상으로 올려주셔서 감사드립니다
감사합니다!!!!!!!!!!!!!!!!!!!
강좌 너무 잘보고있어요~ 이번 강좌 내용에 대해서는 아니지만
일러스트 3d 공룡만드는 강좌나 포토샵 푸른계열로 바꾸는방법??
강좌 동영상이 사라진것같아서요 다시 보고싶은데 볼수있는 방법없을까요?
저작권 신고 들어와서 삭제하신 걸로 알고 있습니다 :)
감사합니다
4:03 어떻게 한거예요??
처음시작사이즈가 어떻게되나요??
단축키 쓰는 거 알려주는 프로그램 있으면 다운해서 사용하면 더 좋을 거 같아요! 기본 종종 보면 단순한 움직임도 배울 꺼 많아 ㅠㅠ
움직이는 사진을 넣을 수 없나요?
고맙습니다. 마디아 사랑.
흑흑 감사합니다!
13:15 이부분 세팅을 똑같이 해놓고 적용하는데 왜 한컬럼에 103으로 결과값이 나올까요 ㅠㅠ
늘리기 단축키가 뭔가요? 5:03
양쪽 끝 20픽셀씩 남기고 나머지 영역에만 작업하는 이유는 뭔가요?
05:30
20 나누는거 쨍파랑 때문에 볼 수가 없어요.. 살려주세요
정말 강의를 잘하십니다. 👍👍👍 최고..ㅎ
👍👍감사합니당
지린다..
감사합니다~
저도 감사합니다
마디아님 그리드 스냅을 켰는데 왜 컬럼을 나눈 그리드가 스냅이 딱 붙는 그리드가 있고 1픽셀씩 빗겨나가면서 절대 붙지않는 그리드가 있을까요 ㅠㅠ?
저는 보통 사각형 선택 윤곽툴을 활용해서~ 점선 사각형을 그리고 그리드를~ 그려요!!
그러면 알맞게 붙을 거에요!
4:04초에 툴끼리 끝에서 끝까지 연결한건 어케 한건지 알수있을까요 ㅜㅜ
ㅇㄷ 저도이거궁금해요ㅜ
저도 궁금해요 그러면 어떻게 하신거에요?
@@user-ir3nj8wk1t 컨+T해서 늘리면 됩니다
마디아님 영상 잘보고 있습니다^^....혹시 잘문하드려요. 선택툴을 세로로 100%늘리는 단축키 어케될까요? 님들 아시는 분 있으면 좀 알려주세요^^;
저도 궁금해요
도움이 많이 됐는데요
정확히 제가 이해하고자 뒤에 1200안나오더라구요 혹시 누가보면 댓글좀 달아주세요
1200에서 1170으로 도형 2개 : 570
도형 3개:370 도형 4게:270 맞나요??????
110 안 나오고 왜 자꾸 소수점으로 나올까요...
자로 1320을 지정하고 그 안에만 칠해지는 걸 어케 하는거지요..? 자로 공간 설정해놨는데도 색채우기 하면 모든 공간이 다 칠해집니다
레이어 추가해서 우측 상단에 있는 점 선 사각형 툴로 하나하나 다 그려줬습니다.
유튜브에서 시각적으로 보시기 편하라고~ 색칠 한 거니 신경 안 쓰셔도 됩니다.
잘들었습니다~
다만 1080 사이즈로 나눌때
1060 - 60 ÷ 4 까지는 잘 떨어지는데
1060 - 80 ÷ 5 하면 딱 안떨어지고 196로 안맞습니다 ㅎㅎ
그리고 적응형 웹 디자인 그리드와 반응형 웹 디자인 그리드가 다르다는걸 알게되었습니다
제가 대학다닐때 웹디자인 교수님에게 물어보니 요즘은 거의 반응형 웹디자인을 사용한다라고하는데 맞나요?
취업 포트폴리오를 만들때 그리드 짜는것도 영향을 받는지 궁금합니다.
사실 반응형을 많이 사용하긴하나 하나의 트렌드나 흐름이라기 보단 비용문제나 기타 여러가지 상황때문에 어쩔수없이 만드는 경우가 많고요. 돈많고 여력있는 분들은 각 디바이스에 맞게 최적화해서 만들듯 합니다. 포털이나 종합대형쇼핑몰 같이 어렵고 복잡한 사이트는 거의 반응형은 불가능하다고 보시는게 맞아요 ㅎㅎ
반응형 그리드에서는 모바일 대응 때문에 8배수 수치를 많이 사용했어요 ~
앱 아이콘 사이즈가 8배수 인것괴 같은 이치이죠
왜 이런건 대학에서 안알려줄까요?
안녕하세요. 너무 감사합니다. 그런데, 왼쪽 레이어 밑으로? (화살표)하는 방법을 제가 계속 찾아봐도 몰라서 아시는분있으면 부탁드립니다. 꾸벅 꾸벅
이미지 마스크 하는 거 말씀하시는 건가요? alt키를 누르면서 레이어와 레이어 사이에 갖다대시면 마스크 하는 화살표가 나오고 마우스 클릭하시면 됩니당 : )
@@Fryderyk.F.Chopin 너무 감사합니다. .
양쪽끝에 10씩 남기는 이유는 뭔가요?
만약에 1200그리드 잡게되면 양쪽 10씩 빠져서 1080인데 그렇게 작업해야하나요??..
음 간단하게~ 1200으로 꽉 채워서 디자인을 했는데 1200모니터로 보면~ 여유 없이 꽉 차겠죵~
이런것 이외에도 윙 배너라던지 기타 등등 여러 이유들이 있답니당
4:03 여기 세로로 색깔 한번에 채우는 스킬은 어떻게 하는건가요?
저도궁금해요
저도궁금요 ㅜ
저도 저거 몰라서 그냥 네모 박스 만들어서 제가 세로 길이 처음에 한걸로 길이 해서 넣었네요ㅋㅋㅋ 그게 더 편할 꺼에요
감사합니다
현재 26살 남성 취준생인데 (2년제 시각디자인과 졸업)
웹디자인 취업에 대해 어떻게 생각하시나요? 학교에서는 웹디에 대해 자세하게 배우진않았어요
앞으로 이 직종에 대한 전망이라던지 방향이 어떠한지 현 직업이신분의 생각이 궁금하네요
취성패로 국비지원 학원에 웹퍼블리셔 수업 받는걸 추천드려요! 무료에다가 취업 알선까지 해줍니다
@@leejae8785 감사합니다 ㅎㅎㅎ
단축키가 같이보이면 더 좋을거같습니다!
요즘 영상은 대부분 자막이 있는데ㅠ 예전 영상이라 ㅠ 그런 듯 합니다피드백 감사합니다!
혹시 4:06 쯤에 갑자기 밑으로 늘어나는거 어떻게 하는건가요?
걍 보면 영상을 짤라 편집해서 그런 거지 그냥 늘이심
아하 감사합니다
단축기 내 방식대로 커스터마이징 할 수도 있고 액션이라는 기능을 이용해서 본인이 자주사용하는 그능들 쉽게 쓸 수도 있어요
찾아서 응용해보세요~
제일 처음에 네모칸에 색넣는거부터 막히네요..
저도 궁금해요ㅋㅋㅋ네모칸 색 들어간게 어떻게 모양을 유지하면서 꽉 채워지는지ㅜ
웹은 관심이 없
ㅋㅋ 근데보는건꿀잼
ㅎㅎㅎ 감사합니다
혹시 용지 사이즈는 어떻게 될까요??
보드 사이즈는 1920 입니다~
@@dip_blue_eyes 웹은 세로 무한이라 가로값만 맞춰요
3개짜리는 왜 도데체 80을 빼는거지..
제가 계속 돌려보고 따라해봤는데요
3개짜리 1320w 처음 좌우20씩 40빼면 1280w
1280w에서 3조각이고 사이가 두개인데 두개가20씩 2번이 한개라 40씩 두번이라서 총 80이 빠지게 된다고 이해했어요!
5:00 에 끝까지 채우는거 어떻게 한건지 알수 있을까요ㅠㅠㅠㅠㅠ
ㅋㅋㅋㅋ
저두 궁금요 ㅠㅠ
포토샵의 기초가없는사람이라면 상당히 이해하기 어려운부분이 많은거같아요 ㅠㅠ 네모칸에 색을 넣는부분부터 정렬이라던가 찍으시는분은 그냥 안다는 전재하에 하시는거겠지만 보는입장에서는 아무 설명없이 딸깍딸깍 하시는 부분들이라 어렵네요 ㅠㅠ 이기능을 이용해 어떠한식으로 해주시면 됩니다 같은 설명이 있으면 정말 좋을꺼같아요 보여지는 기능 하나하나 찾아보면서 하고있는데 19분짜리 영상 하나에 10시간 이상의 이해가 필요합니다 ㅠㅠ
포토샵 기초를 더 배우신뒤에 웹디자인에 접근하시는게 맞다 생각합니다 이런 영상 보시는 분들은 이미 기본적인 기능을 아시는 분들이 대부분이니까요ㅎㅎ 이 영상은 웹디자인 기초에 관한 강의지 포토샵 강좌가 아니예용ㅜㅜ
툴 기초 원하시는분 때문에 다른분들이 한시간씩 더 들어야하는건 비효율적인거라 생각하진 않으세요..?