DESIGN 31 [ Photoshop #4 ] 웹디자인을 위한 포토샵 기초 #4, 툴박스 - slice, crop, stamp, brush, 이미지 보정하기
예제 다운로드
https://drive.google.com/file/d/1SeeCT5UCT7PaBK6hWVmAcgwjobyXAa3g/view?usp=sharing
웹디자인을 위한 포토샵 기초 #4
- slice tool
- crop tool
- eye dropper
- 이미지 보정하기
0:0 photoshop cs6 tool
13:14 perspective crop tool
15:43 crop tool
#webdesign #photoshop
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
멤버쉽 가입하기: https://www.youtube.com/channel/UCax1DP6hqZowNWF2lquKk0w/join
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
DESIGN 30 [ Photoshop #3 ] 웹디자인을 위한 포토샵 기초 #3, 툴박스 - 선택영역 만들기, 스마트 오프젝트, 웹디자인에서 하지 말아야 할 것.
예제 다운로드
https://drive.google.com/file/d/1SeeCT5UCT7PaBK6hWVmAcgwjobyXAa3g/view?usp=sharing
웹디자인을 위한 포토샵 기초 #3
- Lasso Tool 선택영역 생성하기
- Smart Object 스마트 오브젝트활용하기
- 웹디자인 이미지 보정하기
- web design Do and Don't
#webdesign #photoshop
멤버쉽 가입하기: https://www.youtube.com/channel/UCax1DP6hqZowNWF2lquKk0w/join
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
DESIGN 29 [ Photoshop #2 ] 웹디자인을 위한 포토샵 기초 #2, 툴박스 - marquee, move, 주요 단축키
웹디자인을 위한 포토샵 기초 #2 - tool box
- marquee, move
- 주요 단축키
#webdesign #photoshop
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
멤버쉽 가입하기: https://www.youtube.com/channel/UCax1DP6hqZowNWF2lquKk0w/join
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
DESIGN 28 [ Photoshop #1 ] 웹디자인을 위한 포토샵 기초 #1, 컬러, vector, bitmap, panel
웹디자인을 위한 포토샵 기초 #1
- 컬러모드
- vector vs bitmap
- 그래픽 포멧
- 웹디자인을 위한 포토샵 패널 정리하기
#webdesign #photoshop
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
멤버쉽 가입하기: https://www.youtube.com/channel/UCax1DP6hqZowNWF2lquKk0w/join
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
The Hottest Web Design Trends 2022
What’s effective today and what will we take with us into the future?
시장 최고의 웹 사이트 빌더
당신은 시장에서 최고의 웹 사이트 빌더를 찾고 있습니까? 그렇다면이 리뷰를 확인하십시오-우리는 그것을 정확하게 밝힐 것입니다. 더 많은 정보를 원하시면 여기를 클릭하십시오!
Web Design for Beginners | FREE COURSE
If you're new to web design, this course on web design for beginners will teach you everything you need to know. ► Download creative digital assets with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
“How do I pick typefaces, how do I pick colors, what the heck is whitespace, and how do I position and size elements correctly?” These are exactly the kinds of questions which we’ll address in this beginner web design tutorial.
In terms of fundamentals, you’ll learn about color, typography, spacing, sizing, imagery, and responsive web design. We’ll discuss the theory, best practices, and some tools you can use to make your job easier.
When it comes to common web design patterns, you’ll learn about the elements you can use to design a web page—things like headers, hero areas, buttons, image galleries, contact forms, and more.
For each of these patterns, we’ll look at the definition and some use cases, and then we’ll apply that knowledge to a demo project: a three-page portfolio website designed specifically for this course.
► Check out this link for the project brief and course assignments: https://bit.ly/37YMk4W
► Read the course notes (and more!) for Web Design for Beginners on Envato Tuts+: https://webdesign.tutsplus.com/articles/web-design-for-beginners-epic-free-course--cms-41118?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Link to wireframe portfolio website with Figma: https://www.figma.com/file/Ak0JQMv65digqiASGnoLI0/Portfolio-Website?node-id=0%3A1
What You'll Learn:
00:00:00 Welcome!
00:04:31 Course brief and assignment
00:05:48 UI design vs. UX design vs. web design
00:14:08 Learning to work with project briefs
00:19:59 Working with wireframes
00:28:08 Picking the right design tool
00:33:53 Color theory
00:51:36 Color harmonies, psychology and tools
01:03:11 Creating a color palette for our project
01:20:00 Let’s talk about typography
01:31:11 Creating the typography for our project
01:46:01 Spacing and sizing in web design
01:54:47 Using icons and images in web design
02:03:33 Definition and use cases for headers
02:11:39 Let’s design a header
02:28:16 Definition and use cases for hero areas
02:33:06 Let’s design a hero area
02:39:08 Definition and use cases for buttons
02:44:46 Let’s design some buttons
02:57:27 Definition and use cases for image galleries
03:01:38 Let’s design an image gallery
03:12:34 Definition and use cases for footers
03:17:55 Let’s design the footer
03:26:37 Definition and use cases for testimonials
03:31:48 Let’s design some testimonials
03:44:15 Definition and use cases for tabs
03:48:11 Let’s design some tabs
03:59:47 Definition and use cases for accordions
04:04:03 Let's design an accordion
04:13:19 Definition and use cases for contact forms
04:18:17 Let’s design a contact form
04:32:49 What is a responsive website?
04:36:55 Making layout changes for tablets and phones
04:56:44 Making a component responsive
05:09:52 A quick word about prototyping
05:16:11 Next steps and key takeaways
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Don’t use 100vh for mobile responsive
Generally, we use height:100vh it is for fullscreen layout which is an easy hack and a convenient way to get better design. Here, the documentHeight function sets a new style property var(‘ —…
Writing Cleaner CSS using BEM Methodology
Have you ever come across this syntax and assumed it was autogenerated and didn’t give it much thought? There’s a good chance you have. That’s what we’ll look at in this article, where you’ll learn…
1시간안에 쇼피파이 쇼핑몰 만들기 | 초보자 완벽가이드 제작 강의 (2021년)
쇼피파이 14일 무료로 시작하기: https://guidebean.com/shopify
쇼피파이를 통해 처음 사이트를 만드는 사람도 혼자서 쇼피파이 쇼핑몰 홈페이지를 만들 수 있을까요? 이 영상에서 쇼피파이를 처음 접하는 초보자 분들을 위해 이렇게 사이트를 제작 및 꾸미는 방법부터 쇼핑몰을 운영하기 위해 필요한 모든 개념들을 하나씩 하나씩 무료 강의를 통해 알려드리려고 합니다.
[영상 바로가기]
00:00 - 인트로
00:45 - 쇼피파이 쇼핑몰 14일 무료로 시작하기
02:15 - 쇼피파이 관리자 페이지 언어 변경하기 (한국어)
02:55 - 쇼피파이 기본 사이트 확인하기
03:20 - 관리자 페이지 살펴보기 (주문)
04:00 - 관리자 페이지 살펴보기 (제품)
04:50 - 관리자 페이지 살펴보기 (고객)
05:00 - 관리자 페이지 살펴보기 (분석)
05:35 - 관리자 페이지 살펴보기 (마케팅)
05:49 - 관리자 페이지 살펴보기 (할인)
06:10 - 관리자 페이지 살펴보기 (앱)
06:23 - 관리자 페이지 살펴보기 (온라인 스토어: 테마)
06:52 - 관리자 페이지 살펴보기 (온라인 스토어: 블로그 게시물)
07:07 - 관리자 페이지 살펴보기 (온라인 스토어: 페이지)
07:18 - 관리자 페이지 살펴보기 (온라인 스토어: 탐색)
07:45 - 관리자 페이지 살펴보기 (온라인 스토어: 도메인)
08:01 - 관리자 페이지 살펴보기 (온라인 스토어: 기본설정)
08:49 - 관리자 페이지 살펴보기 (설정)
09:15 - 컬렉션 추가하기
11:55 - 제품 추가하기
15:45 - 무료 새 테마를 라이브러리에 추가하기
16:36 - 테마 메인페이지 편집하기 (헤더: 로고, 메뉴 위치, 탑 바)
19:00 - 테마 메인페이지 편집하기 (슬라이드: 이미지, 버튼, 텍스트, 높이, 자동회전)
21:19 - 테마 메인페이지 편집하기 (컬렉션 리스트, 컬렉션 목록)
22:42 - 테마 메인페이지 편집하기 (새 섹션 추가하기: 특별상품)
24:02 - 테마 메인페이지 편집하기 (바닥글)
24:47 - 테마 설정하기 (레이아웃)
25:16 - 테마 설정하기 (색상)
26:28 - 테마 설정하기 (폰트, 입력체계: 본문, 제목, 버튼)
26:45 - 테마 설정하기 (Favicon)
27:07 - 테마 설정하기 (소셜미디어)
27:31 - 테마 설정하기 (Checkout)
28:27 - 편집한 새 테마를 현재 테마로 적용하기
29:05 - 메뉴 편집하기
30:34 - 블로그 게시물 작성하기
32:10 - 블로그 페이지를 메뉴에 추가하기
33:00 - 새 페이지 추가하기
33:53 - 추가한 새 페이지를 메뉴에 추가하기
34:52 - 쇼피파이 쇼핑몰 설정하기 (일반: 스토어 세부 정보, 주소, 표준 및 형식, 통화)
35:35 - 쇼피파이 쇼핑몰 설정하기 (지급: 결제 서비스 공급업체 설정)
38:06 - 쇼피파이 쇼핑몰 설정하기 (결제: 결제 과정에 대한 옵션)
40:20 - 쇼피파이 쇼핑몰 설정하기 (배송: 배송요금 관리 및 배송관련 모든 옵션)
43:26 - 쇼피파이 쇼핑몰 설정하기 (세금)
44:31 - 쇼피파이 쇼핑몰 설정하기 (스토어 언어)
46:00 - 쇼피파이 쇼핑몰 설정하기 (위치)
46:15 - 쇼피파이 쇼핑몰 설정하기 (알림: 고객에게 보내는 이메일 템플릿)
47:28 - 쇼피파이 쇼핑몰 설정하기 (파일)
47:42 - 쇼피파이 쇼핑몰 설정하기 (판매채널)
48:03 - 쇼피파이 쇼핑몰 설정하기 (청구)
48:27 - 쇼피파이 쇼핑몰 설정하기 (법적정보: 환불정책, 개인정보처리방침, 배송정책…)
50:27 - 쇼피파이 플랜 변경하기
52:07 - 사이트 비공개에서 공개 상태로 변경하기
52:40 - 새 도메인 주소 등록하고 변경하기
DISCLOSURE: 가이드빈은 구독자분들을 통해 운영되고 있습니다. 이에 따라서 이 곳에는 제휴링크가 포함되어있을 수 있으며 링크를 통해 구매시 가이드빈에 소정의 커미션이 지급될 수 있습니다. 이에 따른 추가 비용은 없으며 오히려 해당 상품 및 서비스에 대한 프로모션이 있을 때마다 추가 할인을 받을 수 있도록 제공하며 실제로 사용해본 도구만 추천하고 있음을 알려드립니다.
쇼피파이 초보자 튜토리얼 2022 | 19단계의 쉬운 방법으로 쇼핑몰 만들기
이번 단계별 쇼피파이 튜토리얼을 통해 프로페셔널한 온라인 쇼핑몰 만드는 법을 배울 수 있습니다
► 쇼피파이 (Shopify): https://makewebsites.co.kr/shopify
00:00:00 – 1) 인트로
00:01:10 – 2) 쇼피파이 가입하기 (혹시 앞으로의 튜토리얼 제작을 위해 저에게 도움이 되고 싶으시다면 꼭 다음 링크를 사용해주세요: 'please add your link')
00:05:04 – 3) 쇼피파이 기초
00:06:11 – 4) 테마 설치하기
00:07:22 – 5) 테마/디자인 편집하기
00:28:20 – 6) 쇼피파이 설정
00:28:25 – 6.1) 일반 설정
00:29:35 – 6.2) 결제 방법
00:31:48 – 6.3) 결제 화면
00:37:05 – 6.4) 배송
00:42:33 – 6.5) 세금
00:44:53 – 6.6) 장소
00:45:05 – 6.7) 알림 설정
00:47:24 – 6.8) 미디어
00:47:43 – 6.9) 세일즈 채널
00:48:27 – 6.10) 계정
00:49:15 – 6.11) 쇼핑 언어
00:50:51 – 6.12) 청구서
00:51:21 – 6.13) 약관 정보
00:54:33 – 7) 페이지 추가 + 내비게이션에 추가하기
00:59:52 – 8) 설정
01:04:40 – 9) 블로그 포스트
01:05:14 – 10) 도메인 추가하기
01:09:31 – 11) 상품 추가하기
01:18:55 – 12) 카테고리
01:27:02 – 13) 할인
01:32:06 – 14) 주문 테스트하기
01:37:55 – 15) 통계분석
01:38:40 – 16) 마무리
추가 정보:
이번 영상은 2020년 초보자를 위한 한국어 쇼피파이 튜토리얼입니다.
이 쇼피파이 튜토리얼에서 어떻게 효율적으로 쇼피파이 쇼핑몰을 만들고 상품을 판매할 수 있는지 보여드리겠습니다.
쇼피파이 스토어를 만들기 위한 기초 내용을 배울 수 있습니다.
먼저 14일 무료 시범 버전 가입을 합니다. 그 다음 스토어 디자인을 시작합니다. 이후 쇼피파이의 모든 설정에 대해 둘러보고, 온라인 스토어의 백엔드(backend) 역시 잘 작동하도록 할 것입니다.
이 작업을 끝낸 후, 첫 상품들을 만들어보고 온라인 쇼핑몰 판매 목록을 작성할 것입니다. 쇼피파이 스토어 만드는 법은 어렵지 않습니다. 이번 단계별 쇼피파이 튜토리얼에서 모든 것을 보여드리겠습니다.
저는 구매대행에 대해서는 깊이 다루지 않지만, 이 튜토리얼을 통해 구매대행 쇼피파이 스토어 또한 구축할 수 있습니다.
온라인 쇼핑몰을 만드는 것은 매우 유용한 기술입니다. 이커머스는 앞으로 더욱 커지기만 할 것입니다. 쇼피파이 스토어를 만들 줄 알게 됨으로써 제 커리어에 여러 번 도움을 받았고 제가 어떻게 만드는지 그 방법을 이 쇼피파이 튜토리얼에서 보여드리겠습니다.
만들어진 쇼피파이 스토어는 필요한 모든 기능(결제 방법, 배송, 세금 등)을 포함할 것입니다.
즐겁게 시청하세요!
06 웹디자인기능사 실기 (2019) 실전편 - 푸터영역 무삭제판
#웹디자인기능사 #푸터 #float
웹디자인기능사 실기 푸터영역 무삭제판 레이아웃 및 패밀리사이트 셀렉트태그 관련 영상입니다.
60점 이상이 목표인 자격증 시험을 위한 강의이며,
마이크가 강의용 마의크라 녹음 상태가 좋지 않은 점 양해 바랍니다.
강의자료가 필요하신 분은 yulssem_nim@naver.com 으로 메일주시면 보내드리겠습니다.
감사합니다.
05 웹디자인기능사 실기 (2019) 실전편 - 레이어팝업(모달) 10분컷
#웹디자인기능사 #모달 #레이어팝업
웹디자인기능사 실기 레이어팝업(모달창) 만들기와
공지사항의 첫번째 컨텐츠 클릭시 팝업창 노출
엑스버튼 클릭시 팝업창 비노출 관련 영상입니다.
60점 이상이 목표인 자격증 시험을 위한 강의이며,
마이크가 강의용 마의크라 녹음 상태가 좋지 않은 점 양해 바랍니다.
강의자료가 필요하신 분은 yulssem_nim@naver.com 으로 메일주시면 보내드리겠습니다.
감사합니다.
04 웹디자인기능사 실기 (2019) 실전편 - 공지사항/갤러리 탭메뉴
#웹디자인기능사 #탭메뉴 #공지사항탭
웹디자인기능사 실기 컨텐츠 영역 중
1. 공지사항/갤러리 탭메뉴 ,배너,바로가기 유형
2. 공지사항, 갤러리, 배너 유형
두가지 유형을 html css로 짠 후
탭메뉴를 제이쿼리로 구성하는 내용입니다.
60점 이상이 목표인 자격증 시험을 위한 강의이며,
마이크가 강의용 마의크라 녹음 상태가 좋지 않은 점 양해 바랍니다.
강의자료가 필요하신 분은 yulssem_nim@naver.com 으로 메일주시면 보내드리겠습니다.
감사합니다.
03 웹디자인기능사 실기 (2019) 실전편 - 메인슬라이더 통합 제이쿼리
#웹디자인기능사 #슬라이드 #slide
웹디자인기능사 실기 메인슬라이더 (왼쪽이동/위쪽이동/페이드인 페이드아웃) 세가지 유형을 한번에 적용할 수 있는 족보입니다.
60점 이상이 목표인 자격증 시험을 위한 강의이며,
마이크가 강의용 마의크라 녹음 상태가 좋지 않은 점 양해 바랍니다.
강의자료가 필요하신 분은 yulssem_nim@naver.com 으로 메일주시면 보내드리겠습니다.
감사합니다.
02 웹디자인기능사 실기 (2019) 실전편 - 네비게이션 완벽정리 (header영역 포함)
#웹디자인기능사 #네비게이션 #gnb
웹디자인기능사 실기 네비게이션 메뉴 html css jquery 정리본 입니다. (header영역 포함)
60점 이상이 목표인 자격증 시험을 위한 강의이며,
마이크가 강의용 마의크라 녹음 상태가 좋지 않은 점 양해 바랍니다.
강의자료가 필요하신 분은 yulssem_nim@naver.com 으로 메일주시면 보내드리겠습니다.
감사합니다.