분류 전체보기 (549) 썸네일형 리스트형 3. 디자인구성요소설계 (평가 4.7) 보호되어 있는 글입니다. [영상강좌목록] 디지털웹디자인 콘텐츠제작실무 웹사이트 / 앱 기획부분에서 UI/UX 유튜브강좌를 찾는 분들을 위해 전체강좌를 유튜브채널을 소개합니다. 전체강좌 는 아래 강좌 목록 이미지를 클릭하면 바로 볼 수 있습니다. 디지털웹디자인(웹퍼블리셔) & SNS마케팅을 위한 콘텐츠제작 실무 2021년도 부터 NCS(국가직무능력표준)의 스마트문화앱 교육커리큘럼에 맞게 UI /UX 설계와 디자인 관련된 강좌로 2022년 현재까지 진행하는 강좌내용입니다. 아래 2022년 3월 진행하고 있는 UX UI / 프로토타입 / 디자인 구성요소 설계 / 스마트문화앱 / 그누보드3 까지 전체목록보기를 누르고 새로 시작된 강좌를 순서별로 볼 수 있습니다. 2022-0302 시작 프로젝트 ▶ 전체목록보기 그누보드5 게시판 실무활용 웹디자이너-웹퍼블리셔-웹프로그래머로 이어지는.. 애프터이펙트- 외부 소스활용 모션어레이 애프터이펙트에서 점, 그리고 선과 도형을 이용한 모션그래픽의 표현은 일부는 판박이 처럼 유사한 것들이 있지만, 독특한 모션그래픽을 만들기 위한 몇몇 독특한 튜토리얼들을 리스트 보여드리며 업그레이드 하는 시간을 가져봅니다. Motion Array 구글, 페북계정으로 쉽게 회원가입하고 프리미어 프로, 애프터이펙트 템플릿 등을 받을 수 있습니다. 다운로드시 메일인증필요합니다. https://motionarray.com/ The All-in-One Video & Filmmakers Platform | Motion Array Create your projects with unlimited asset downloads: premium Templates, Presets, Stock Photos, video eleme.. EM4-3. 눈사람~강아지 심볼이해(표정) 일러스트레이터의 심볼은 개체 < 그룹 < 심볼 순으로 최상위 개체유형(Object Type)로 과거 플래시의 심볼(무비클립 이하)으로 완성된 개체들 중 가치있는 개체의 반복사용을 원할때 선택후 F8 키를 통해 등록하여 다른 심볼이나 개체들과 조합해서 다른 표현에 활용됩니다. 등록된 심볼들은 심볼창에서 복제하여 다른 변용된 심볼로 재등록 형태로 쉽게편집 할 수 있습니다. 몸과 얼굴을 포함한 표정관련 눈/입 심볼과 Replace로 교체된 표현의 예입니다. 아래 CC2022버전에서 열수 있는 눈사람 캐릭터 작업파일인 PDF파일을 참고하세요 CS6버전을 이용하는 분들은 아래 파일을 다운로드 후 실습해보세요 https://www.freepik.com/free-photos-vectors/angry-expressio.. 일러스트 [별책부록] - 스트로크 팩토리(Stroke Factory) 일러스트 별책 - 스트로크 공장(Stroke Factory) 일러스트레이터의 숨겨진 기능을 별책부록으로 구성한 1편은 선을 표현하는 스트로크 공장(Stroke Factory)입니다. 일러스레이터에서 편집가능한 PDF 작업소스 확인가능합니다. 2편에서 계속 이어집니다. 일러스트 - 로고디자인 (포트폴리오와 공모전) 일러스트레이터로 로고디자인을 해보는 시간을 갖어봅니다. 기본적인 일러스트레이터의 개념을 알고 진행해야해서 아래 그림과 연결된 튜토리얼 노트를 첨부합니다. 로고디자인은 우수한 포트폴리오 수상작의 수준을 참고하자 디자인과정에 취업을 준비하는 분들은 포트폴리오에 도움이 되는 라우드소싱을 통해서 수상작품들의 예시를 보면 멋진 작품도 참고하고 눈높이도 높아집니다. 진행중인 콘테스트를 통해서 목표를 정하고 수상작들의 포트폴리오를 통해서 최상위느낌을 알아보세요. 로고디자인 포폴보기 작품 갤러리 | 라우드소싱 수많은 디자이너의 다양한 디자인 작품을 만나보세요. 로고 디자인, 패키지 디자인, 제품 디자인, 브랜드 디자인 등의 전체 포트폴리오를 한 눈에 확인하실 수 있습니다. www.loud.kr 1편 기초적인 일러스트 .. 웹기초2- HTML, CSS를 활용한 프로토타입 (Onepage) 프로토타입 샘플모델 원페이지형식으로 위키백과와 유사한 단원아트 원페이지 스타일 홈피작업입니다. 기초적이지만 위키백과 스타일이란 주제를 원페이지형식으로 정하고 생소한 태그와 디자인 스타일이 나오지만, 앞부분 기초를 기반으로 하니 앞부분의 내용을 미리 볼 수 있는 기회겠죠. https://www.youtube.com/watch?v=Eiiysvcw7iQ&t=7s 아래는 위 영상소개부분의 웹소스입니다. 배경에 대한 모든표현 매니저는 중복한 배경처리시 아래와 같은 함축된 CSS를 이용한다. 귀찮게 많을 것을 넣을 필요가 없을 때 아래 스타일을 추천한다. body{margin:90px; background:#ffeace url('imgs/bg_kart.jpg') no-repeat right bottom; /* 배경.. 포토샵,일러스트를 활용한 모션그래픽 공모전에서 캐릭터애니메이션을 구현하는 것은 대부분 애프터이펙트에서 구현하는 것이 일반적입니다. 프리미어 프로에서 모션그래픽 이번 강좌는 쉽게 일러스트레이터에서 레이어를 기반으로 제작한 Ai파일을 Export를 통해 포토샵(PSD)파일로 내보내서 기본적인 프레임 애니메이션을 Gif, Mp4 파일형태로 구현한 후 프리미어프로에서 대부분의 영상편집과 타이틀,자막을 이용해서 공모전용 캐릭터 애니메이션 만들기는 전체적인 방법을 소개합니다. https://www.youtube.com/watch?v=E6AFM5ELRsY Pr에서 불러오는 매체는 같은 이름에 번호가 연결되는 경우에 시퀀스형태로 가져와 영상처럼 활용할 수 있다. 아래 이미지파일을 드롭다운하면서 시퀀스 시작을 했습니다. 이미지의 해상도와 크기에 따라 시퀀.. 웹기초-01. 일반적인 웹문서와 스타일 기초 웹디자인 이후에 이어지는 웹 퍼블리싱(공개란 뜻) 작업은 HTML과 CSS외에 자바스크립트 등 다양한 기능들이 붙여지면서 비로소 웹문서로 구현할 수 있습니다. 웹 퍼블리싱이 구현되야 인터렉티브한 페이지 구동을 하는 웹프로그램이 이어지게 되는 것입니다. 이번시간 부터는 HTML과 CSS 기초에서 일반적인 웹문서와 웹문서의 스타일 규정까지 전반적인 문서구조를 소개하는 첫시간을 갖겠습니다. 아래 영상강좌로 보여진 샘플파일을 압축파일로 준비했으니 함께 보시면 좋겠습니다. E01. 웹문서의 HTML 일반적인 구성 E02. 웹문서의 HTML 일반적인 구성 하이퍼링크의 종류는 다음과같다. 글,그림 URL위치에 아래내용구분 웹사이트(외부 네이버) target="new" 웹문서(자체페이지간 이동) ★★★원페이지의 원리(.. 2-1. 프로토타입 기초데이터수집 및 스케치 (평가 3.14) 보호되어 있는 글입니다. 시퀀스 셋팅변경 프리미어 프로에서 Sequence Setting으로 작업중인 시퀀스 크기를 변경하는 방법, 이미지 및 비디오 클립으로 새로운 시퀀스 만드는 방법을 소개합니다. 원하는 크기로 시퀀스를 마음대로 조절하는 방법을 소개합니다. Project 패널에서 해당된 시퀀스를 선택하고 오른클릭(RMB)해서 Sequence Settings를 누고, Editing Mode : Custom / Pixel Aspect Ratio : Square Pixels(1.0) 옵션확인 후 Frame Size에서 크기를 변경하면 됩니다. 다이어그램 그리기 사진, 일러스트 등의 그래픽 이미지나 텍스트 등을 활용하여 정보를시각적으로 표현한 설명적 그림인 다이어그램 만들기를 소개합니다. Admired Global Leader, CANDOIT 깨끗한 기업, 정직한 기업, 투명한 기업 고객협력사에 대한 책임 임직원의 기본윤리 국가와 사회에 대한 책임 임직원에 대한 책임 고객가치 창조 공정한 거래 열린 경영 공정한 직무수행 상호신뢰.존중 자기 청결 사회봉사 활동 환경친화 활동 지역사회 발전 공정한 평가 인재 육성 협력적 노사관계 웹디자인 포토샵4 - 블랜드모드/마스크 블랜드는 다른 재료를 섞다는 의미를 갖고 있습니다. 영상에서는 기본영상에 첨가해(위트랙) 효과로 많이 사용합니다. 보통 블랜드 모드는 Nomal이 기본입니다. 서로 독립된 보통(Nomal) 상태라는 것이죠! Screen 모드와 Multiply 모드가 제일 많이 사용되는데... Multiply는 현재의 레이어가 아래 레이어와 섞여 만들어 내는 블랜드 모드를 알아봅니다. 포토샵 기초로 기본 레이어 위에 추가된 특별한 목적의 레이어에 적용하는 블랜딩모드와 외부에서 가져오거나 현재 필요에 의해서 특별하게 만드는 스마트오브젝트를 활용한 목업을 만드는 기초를 소개합니다. 포토샵 블랜딩모드 중 빛과 조명 등의 효과이미지에 적용하는 스크린(Screen) 모드를 적용합니다. 레이어스타일 중 어두운 배경이미지에 적용하는 .. 태극부채 표현 일러스트레이터로 그리드 환경인 그리드 보기(C+")와 그리드 잠그기(CS+")에서 선을 1개 그리고 120도로 회전복제를 하고, Twirl이라는 도구의 옵션조절로 회오리형태로 돌린 선을 태극부채의 형상을 Pathfinder의 분리기능으로 나누어 대극부채를 그리는 표현방법을 소개합니다. 웹디자인 포토샵3 - 공간에 채색하기 포토샵에서 색상이 1개인 단색(솔리드 컬러;Solid Color)외에 타일형태로 표현하는 화려한 무늬인 패턴(Pattern)을 등록하여 사용하는 방법과 레이어 스타일 중 패턴을 활용한 패턴오버레이(Pattern Overlay)의 활용까지 소개합니다. 브러시, 다양한 도형 및 커스텀 쉐이프를 이용한 패턴 등록도 놓치지 마세요. 편집메뉴에서 패턴과 브러시 등록하는 방법은 Edit-Define Pattern 입니다. https://youtu.be/iHspNU7fAqU 여러 색상으로 표현하는 그라디언트(Gradient) 포토샵에서는 색상이 1개인 단색(솔리드 컬러;Solid Color)외에 1개 이상의 색상으로 표현하는 5종의 다양한 그라디언트(Gradient)의 표현방법이 있습니다. 그라디언트의 기초부터 멋진.. 사실적인 일러스트레이터의 메쉬(Mesh) Apple, Cheery 등 과일을 사실적인 색상을 표현하는그라디언트(Gradient)와 메쉬(Mesh)사용법을 소개하고, Effect 등을 이용한 빛의 표현, 일러스트레이터의 Blend Mode, Edit-Adjust Color Balance로 기존의 색상을 변경하는 방법을 소개합니다. AI CS6버전으로 만든 사과(Apple)원본은 아래에서 응용해보세요. 유튜브 동영상의 표지디자인 웹디자인 포토샵 기초2- 자르기와 웹용 슬라이스 웹디자이너로 입문하는 분들에게 필요한 포토샵에서 홍보목적의 SNS, 쇼핑몰, 메일광고에 Tag형태로된 텍스트표현보다 감성적이고, 심미적인 광고디자인의 제작원리와 자르기 도구와 함께있는 수평과 수직의 자(영어로 룰러 Ruler)를 C+R로 보이게하고, 룰러를 기준으로 드레그 하듯 레이아웃 목적으로 만든 가이드라인을 기준으로 슬라이스(Slice)하는 방법과 웹용저장(Save for Web)을 CAS+S키를 누르고 이미지와 html 2가지 파일형태로 내보내는 방법을 소개합니다. 기본적인 코딩(Coding)을 통한 웹사이트를 연결하게 하는 앵커태그(Anchor. A)를 통한 실무적인 하이퍼링크 개념을 더불어 소개합니다. 포토샵에서 빠른 선택도구인 퀵셀렉션과 선택범위를 썸네일로 부터 불러오는 로드셀렉션의 개념을 .. 웹디자인 포토샵 기초1 - 무작정 따라하기 포토샵 기초1 - 일반 JPG 배너제작 시각디자인의 한 분류인 웹디자인에서 이미지를 편집하거나 디자인요소의 추가, 레이어스타일 및 필터 등 효과(fx. Effect)를 표현하는 포토샵은 너무 광범위한 분야에서 사용합니다. 교재에서 보는 기본 개념외에 필자만의 독특한 노하우로 포토샵을 처음 하는 분들을 위한 1편으로 배너제작 무작정 따라하기를 소개합니다. A. 사진편집 보정 - 사진파일(JPG) 열어 편집 B. 규격(웹,영상 화면 / 종이 편집디자인) - 새 문서(PSD) ex) 웹규격에 맞게 문서명은 Ban_Sam 규격은 600x150px 위 규격대로 로 배너광고를 제작하면서 디자인과정을 따라해보겠습니다. 아래는 JPG 움직이지 않는 기본배너입니다. 여기까지는 움직이지 않는 JPG배너제작의 교육내용과 결.. EM-8 스케치용 스마트폰 앱 소개 이면지의 종이, 달력뒷면에서도 캐릭터는 탄생합니다. 하지만 스케치는 비단 손으로 종이에 그리지는 않습니다. 요즘 스마트폰 앱으로도 레이어 구조를 갖고 생각나는대로 그림을 그려낼 수 있습니다. 아래는 일상에서 편하게 그림을 그리는 앱을 소개합니다. FlipaClip 애니메이션을 통해 여러분의 꿈을 실현하세요! FlipaClip의 강력하고 재미있는 도구로 프레임별 애니메이션을 쉽게 만들 수 있습니다. 스케치, 스토리보드, 애니메이션, 단순 학습 등 무엇을 하든 상관 없습니다. FlipaClip의 응답형 인터페이스는 최고의 도면 및 애니메이션 환경을 제공합니다. 간단하고 직관적인 컨트롤로, 시작하기 쉬우며, 창의적인 아이디어를 낼 수 있을 만큼 강력합니다. sketchbook Sketchbook은 그림 그리기.. 교육안내 - 디지털웹디자인(웹퍼블리셔)& SNS마케팅 보호되어 있는 글입니다. EM-7 캐릭터 그래픽표현과 추가 응용동작 캐릭터를 소개하는 부분에 필요한 그래픽 표현들을 일러스트레이터에서 펜툴로 그려놓은 곡선을 물결치는 글씨 / 레어이합치기/색상견본, 컬러칩 / 경계가 뿌연효과(Effects-Feather, Blur) / 블랜드, 슈퍼맨타이틀/ 멋진 그래픽스타일(Appearance, Graphic Style) 등 그래픽표현을 소개합니다. 타이틀과 어피어런스 쥬어키의 그래픽표현은 아래 그림 밑에 파일에 포함되어있습니다 일러스트레이터에서 열어보세요 표정과 동작 줘어짜기! 기본동작외 응용동작 3 = 총4개 정비공 쥬어키의 동작이 획기적인 것은 아니지만, 기존의 "반갑구만~ 반가워" 버전을 약간 응용해서 큰 웃음 버전을 최소의 시간으로 동작을 만들어 보았다. 더 이상 선자세로 만드는 캐릭터의 동작은 한계가 있다. 20개 이상의 응.. EM-6 AR 이모지 활용한 표정과 동작 연구 "캐릭터의 다양한 표정과 동작을 24개를 만들어야 한다면 어떤 방법이 있을 까요? " 이모지를 활용해서 세상에 없는 표정과 동작 구상하기 필자의 얼굴이 나와야 하지만, 쑥스럽고 공개용이다 보니 초상권 때문에 얼굴만 인식하여 3D로 변환된 캐릭터의 형상을 자연스럽게 담을 목적으로 삼성폰 자체의 이모지를 역시 자체의 포토샵을 통해 간단한 비디오 편집을 한 후 캐릭터 개발에 활용하는 장면을 소개합니다. 삼성 AR 이모지 앱(Samsung AR Emoji) 위에서 삼성 AR 이모지 앱(Samsung AR Emoji)을 이용해서 응용동작을 포토샵으로 주요 장면을 비디오편집을 하고 몇개의 동작으로 추출하여 JPG로 내보내는 방법을 소개합니다. 포토샵도 타임라인(Timeline)창을 통해서 간단한 영상편집을 할 수 .. 영상디자인 관련 공모전 HOT 뉴스 ◆ '비온뒤' 100만 구독자 달성 기념 1,000만 원 공모전 공모분야 (3) : 비온뒤 홍보영상 / 채널아트 / 팬네임 대한민국 No.1 공모전 브랜드-대티즌 #광고/아이디어, #디자인/플래시, #사진/영상/UCC, #예체능, #문학/시나리오 449 22.02.15 ~ 22.02.24 www.detizen.com 의학채널 비온뒤 국내 최초 의학전문기자 홍혜걸 박사가 운영하는 의학채널 비온뒤(www.aftertherain.kr)입니다. 지식나눔에 동참하는 최고의 전문가들을 모시고 정직한 의학지식을 나누기 위해 최선을 다하겠습니다 www.youtube.com ★ 참여 방법 방법 1. 비온뒤 홍보영상을 만든다. (동영상 길이 제한 없음) 방법 2. 비온뒤 채널아트를 만든다. (이미지 사이즈: 2560 x .. 입체적인 BOX 표현 일러스트레이터에서 복사와 제자리 앞에붙이기(Copy & Paste in Front)를 이용해서 표현한 심플한 3D 박스의 표현방법과 Effect-3D Extrude를 활용한3D박스 만드는 2가지 방법을 소개합니다. 일러스트레이터에서 Stroke와 Pathfinder의 Divide를 이용해서 심플한 롱쉐도우 아이콘와 그라디언트를 통한 그림자표현하는 방법을 소개합니다. 유튜브 미리보기 이미지(썸네일) 디자인 프리미어 프로에서 스틸이미지로 추출할 PNG이미지를 포토샵에서 열어 다음그림과 같은 사진이미지, 커서템 쉐이프 등 이미지를 클리핑마스크(AC+G)와 레이어스타일 등의 효과를 적용해 만든 디자인 입니다. 프리미어 프로 - 만화컷 같은 Video Comic Book Layout 프리미어 프로를 이용해서 한 화면내에 3개의 이미지와 영상을 모아서 만화컷 같은 장면을 표현해봅니다. Premiere Pro / Video Comic Book Layout Video Clip Color = Label / Layout = Ruler Guide & Crop Video, Image 등 Footage를 Layout 구성을 위해 Grid형태의 Guide Line을 Ruler를 이용해서 배치하고, 특정한 비디오, 이미지는 자르기 효과인 Crop을 이용해서 표현해봅니다. 유튜브썸네일 표지디자인 - Video Comic Book Layout 장애인 고용공모전 (~02.25) 제31회 장애인고용 콘텐츠 공모전으로 장애인고용을 주제로한 포스터, 영상 등 공모전소식이 있습니다. 공모전 소식과 접수는 아래 공모전 공식페이지에서 참고하세요. 제31회 장애인고용 콘텐츠 공모전 제31회 장애인고용 콘텐츠 공모전 www.keadcontest.co.kr 공모전의 주제에 맞는 장애인고용공단의 사업내용은 아래 공식페이지에서 참고하세요. 한국장애인고용공단 www.kead.or.kr 공단의 CI를 다운받아서 작품제작에 활용해보세요. > 공단CI 소개페이지 01. 포스터 수상작은 아래 이미지를 클릭해서 다양한 아이디어를 확인하세요. 02. 영상공모전 수상작은 아래를 참고하세요. 씽유 thinkyou 여러분이 찾는 공모전 정보, 이제 씽유에서 모두를 위한 공모전을 만나볼 수 있어요! http://ww.. EM-5 캐릭터 창작 '정비공' 기본과 응용동작 (어니언스킨 적용) 최초의 아이디어 스케치 아래 최초에 그려본 스케치는 교육당시 너무 빨리 그려서 사탄의 인형 '처키'와 같은 얼굴표정이 보여진다. 스케치기반의 트레이싱 작업을 일러스트레이터에서 작업할대 눈을 친근하고 단순히 하려고 핀, 제이크, 틴틴과 같은 미국만화의 캐릭터를 착안하여 단순한 표현을 표정에서 아이디어를 얻어보았다. 차량정비차 낮에 들렸던 정비소에서 아이디어를 얻어서, 마음을 정비하는 정비공 줘키는 처키의 변조이다. 자동차키를 달라는 뜻으로 "줘~키"는 어떨까?? Tutorial : 제작과정을 소개하는 유튜브 영상강좌 스케치와 일러스트레이터를 통한 컴퓨터그래픽 작업은 스케치만 달리해서 교육하는 부분에서는 유사하지만 일부 다른 방식의 강의를 진행하였으며 대부분의 자료는 직접작업한 내용으로 수행하였다. 아래 그.. EM-5 캐릭터 창작 '양파군' 기본동작 일러스트 작업 진입장벽이 높은 이모티콘 시장에는 캐릭터가 쎄고쎘다. 국내 최대는 아마 카카오 이모티콘인데, 인키 캐릭터도 결국은 손에서 그려진 스케치부터 시작했다. 손으로 그려 돌속의 원하는 상을 만들어 내 듯 스케치를 시작해야 한다. super mario model sheet - Google 검색 DO THE MARIO! Perry Martin... vantagepointinterviews.com www.google.com 평가라는 잦대를 떠나서 새로운 캐릭터를 탄생시키기 위한 스케치부터~일러스트 작업과 동작표현에 대한 내용을 차근 차근 성취하는 느낌으로 따라 해본다. 평가라기 보다는 관련 공모전에서 주제를 찾아서 캐릭터를 개발하는 경험도 좋겠다. 심사중인 디자인 콘테스트 | 라우드소싱 현재 심사중인 디자인 콘테스트.. 이미지를 벡터로 이미지 트레이싱 일러스트레이션 중 직접 스케치한 이미지나 사진이미지를 벡터로 이미지 트레이싱해주는 직접 그린 커피캔음료와 로고 스케체를 벡터로 변환하는 이미지 트레이싱과 익스펜드(Image Trace & Expand) 를 소개합니다. How to edit artwork in Illustrator using Image Trace Image Download Pixabay Image인 남자이미지와 스케치한 이미지를 클릭후 다운로드 해주시고 따라할 수 있습니다. Cover Design 유튜브 썸네일의 표지디자인에 활용한 디자인 시안 2개를 공유합니다. 디자인으로 다른 시안을 제작해서 전혀 다른 베리에이션 표현이 가능합니다. Illustrator Artwork File 커피캔음료와 로고 스케체를 벡터로 변환하는 이미지 트레이싱과.. 이전 1 ··· 11 12 13 14 15 16 17 ··· 19 다음
