분류 전체보기 (549) 썸네일형 리스트형 유튜브영상 커버디자인 템플릿 공개 영상의 미리보기가 생명이다! 흥행을 꿈꾸는 개봉영화도 화보촬영에서 색상과 로고타이프(글씨)까지 한장의 포스터 디자인에서 스토리텔링을 한다! 제자로 부터 교수님은 영상표지를 눈에 띄게 왜 안만드세요?라는 질문을 받은 적이 있습니다. 편집할 시간도 없어 걍 올리던 차였는데... 뜨끔했습니다. 2002년부터 지면으로 표현하는 출판인쇄분야의 편집디자인을 해본 저로는 광고선전효과가 지면디자인에서 부터 시작된 다는 것도 알고 있었지만, 바쁘다는 핑계로 커버디자인 없이 올렸습니다. 그 계기로 다시 영상을 꾸며주는 디자인을 모아서 템플릿으로 공개하게 되었습니다. 유튜브영상의 포스터 - 미리보기 썸네일 디자인 템플릿 템플릿형태의 디자인으로 통일성과 일관된 디자인을 섹션잡지처럼 만들어 보기로 결심하고 아래와 같이 디자인을.. HTML+CSS 기초 - 글씨관련 태그들 Chapter 01. 웹브라우저와 편집기, 기본코딩 실제 스마트문화앱(모바일 웹 앱)을 제작하기 위한 기초 첫시간으로 웹분야1위 도서로 알려진 " HTML5+CSS3 웹표준의 정석" 을 줌을 통한 쌍방향 학습의 부교재로 선정하여 쌍방향학습하는 내용을 공개합니다. 코딩을 처음하는 분들에게 추천하며 교재를 참고하되, 교재없이 독학도 영상을 참고하면 가능합니다. Chapter 02. HTML기초와 Head문에 삽입되는 것들 HTML문서는 본문에 대부분 보여지는 내용을 Body태그내에 구성한다. HTML을 처음 배우는 분들은 Head문에는 title이 웹문서를 브라우저로 보는 타이틀만 보여지는 것으로 알 수 있는데, Head문에도 상당히 두뇌같은 복잡한 태그들이 들어가서 궁금해 하는 분들을 위해 정리해본다. 저.. 첨부자료10mb에 맞춰 PDF압축하기 기획서를 클라이언트에게 볼수 있게 PPT파일을 파워포인트에서 PDF로 내보내는 것이 일반적입니다. 메일이 아닌, 사내인트라넷 등의 게시판에 자료첨부시 10mb로 용량을 제한하면 자료가 첨부가 안나는 에러가 나는 경우가 있습니다. 이럴 때 아래링크는 첨부자료10mb에 맞춰 PDF압축하여 첨부할 수 있는 유용한 웹사이트 이니 작업시 활용바랍니다. https://www.ilovepdf.com/ko/compress_pdf 온라인으로 PDF 파일을 압축하세요. 같은 품질의 PDF지만 더 작은 크기의 파일 동일한 품질이지만 더 작은 파일 크기를 가진 PDF 파일을 위해 압축하세요. 온라인에서 쉽고 무료로 PDF 파일을 압축하고 최적화하세요. www.ilovepdf.com 위에서 소개한 용량을 줄이는 PDF압축외에 .. 픽사베이 아티스트 - 영상과 일러스트 픽사베이에 독특한 멀티미디어 소스를 공개한 작가들을 알아보는 시간을 가져본다. 첫 소개하는 작가는 padrinan은 멕시코의 아티스트이다. 예술적인 비디오 클립들이 주된 푸티지로 영상제작에 응용할 만한 소스를 상당히 많이 배포하고 있다. https://pixabay.com/ko/users/creozavr-2567670/ 아래 태극기는 블랜드모드로 활용가능한 영상소스를 제공하는데, 클릭하면 해당 URL로 이동합니다. https://pixabay.com/ko/users/padrinan-1694659/?tab=videos&pagi=6 https://pixabay.com/ko/users/padrinan-1694659/?tab=videos&pagi=5 크로마키로 김밥(초밥)이 떨어지는 영상소스도 제공합니다. Click Green Screen (Free Footage) 크로마키-클릭하는 효과영상을 커서, 손 2개 버전으로 공개하니 무료로 사용하셔도 됩니다. 클릭효과음은 아래 별도 afx_click.mp3파일을 활용하세요. Click Green Screen Footage ▼ Download Audio Effect - Click 지지직~ 글리치 효과 https://youtu.be/PQILJh8QrCQ 액션장렬 일러스트 - 아치와 씨팍(Aachi & Ssipak) 액션이 장렬하는 일러스트가 돋보이는 2006년 한국애니메이션 "아치와 씨팍(Aachi & Ssipak)"은 욕설과 액션이 장렬한다. 원작은 플래시 버전이 었는데, 영화화 하면서 극장에서 선보였다. 일본애니메이션에서도 볼 수 없는 독특한 액션은 해외에서도 평이 좋다. https://youtu.be/ZUJ0D5qFqzg 류승범, 임창정, 마왕 신해철이 더빙한 아치와 시팍의 나무위키 설명이다. https://namu.wiki/w/%EC%95%84%EC%B9%98%EC%99%80%20%EC%94%A8%ED%8C%8D 벡터모양만들기-열쇠(Key) 포토샵에서 벡터모양만들기-열쇠(Key) GTQ 포토샵 - 쉽게 Shape 열쇠 그리기 https://youtu.be/OaOZWuAZWk4?list=TLPQMDIwODIwMjE8X_GHvh74dQ 일러스트레이터로 다양한 벡터 쉽게 그리기 (포토샵,파워포인트,폰트어썸) https://youtu.be/fy5F4SWIux0 https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 넌리니어 에디팅, 가편집과 종합편집, 스토리텔링 프리미어 프로 등 디지털 영상편집 프로그램을 활용하여 비선형(Non-Linear)방식으로 편집하는 영상제작 및 편집과정은 크게 가편집과 종합편집(마스터편집)으로 구분한다. 가편집과 종합편집 가편집이란 제작 콘셉트 및 스토리보드에 기반으로 촬영하거나 수집(구매)한 영상들을 일련의 순서로 배열하고 기본적인 요소들을 추가하고 제작하는 것으로 종합편집(마스터편집) 전에 사전작업하는 영상편집과정이다. 마스터편집이란 감독(PD)의 연출 및 지시에 따라 최종편집, 효과 삽입, 자막 애니메이션 추가, 음향 추가 등 최종적인 종합편집하는 과정이다. Non-Linear Video Editing (NLE) 비선형(Non-Linear)편집이란 파일형태로된 디지털 비디오(이미지), 오디오를 활용하기 때문에 품질이 뛰어나고, 인.. 심볼로 활용 가능한 캐릭터의 표정 대표적인 벡터그래픽 프로그램인 일러스트레이터에서 오브젝트(Object, 개체, 물건으로 선택한 대상을 의미함)들 중에서 기본이 되는 도형,선 등 쉐이프(Shape)에서 필요에 의해서 묶어놓은 그룹(Group)이란 오브젝트의 신분과도 같은 레벨이 있는데... 얼굴표정과 같이 등록하고 교체하고 수정가능한 오브젝트는 일러스트레이터에서는 당연히 심볼을 사용해야 합니다. 심볼외에도 팔,다리 같은 몸의 동작에 활용가능한 아트브러시도 같은 역할을 하지만 아래 캐리터 표정에 활용할만한 소스가 충분히 활용되었으면 합니다. 아래는 다양한 인물의 표정이 담겨있는 자료이며, 저작권 위반사례이니 개인적인 활용만 하시길 바랍니다. 2D그래픽 자격증과 포트폴리오의 차이 자격증은 이력서 한줄,한줄 본인의 스팩을 채우는 하나의 강력한 아이템을 장착하는 것이다. 그래픽관련 자격증은 국내와 국제 자격증으로 구분되는데, 취업을 준비한다면 필히 자격증 취득을 해야한다. 2D그래픽 GTQ자격증을 취득하자. 지티큐 자격증을 취업전에 취득하자! 아래는 지티큐 그래픽 기술자격의 2개프로그램인 포토샵과 일러스트의 취득방법을 소개하는 별도의 게시물을 참고해서 자격증을 취득하고 이력서에 2줄의 스팩을 만들어 보자. 자격증시험은 정해진 출력형태 대로만 만들어라. 관련분야의 자격증을 취득하는 것은 시험준비를 통해 일반적이고 특정한 조건에 맞는 그래픽작업을 경험하여 폭넓게 그래픽프로그램을 다루는 능력을 키울 수 있다. 지티큐는 매월 마지막 토요일 자격시험이 있어서 필히 취득해야하는 자격증이다. h.. 반응형웹 플러그인 - 부트스트랩과 제이쿼리 PC와 스마트폰 등 다양한 화면크기에서 쉽게 반응하는 웹사이트를 만들어 주는 기술인 반응형웹은 하이브리드앱을 구현할 수 있는 가장 쉬운 표현방법이다. UI디자인에서 세부 레이아웃 및 그래픽 요소들을 다양한 자바스크립트와 CSS스타일로 구현하는 부트스트랩과 제이쿼리를 소개하는 시간을 가져본다. Bootstrap(부트스트랩)은 자체 구성된 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하면서, 반응형 모바일 웹 사이트를 개발하기위한 가장 인기있는 HTML, CSS 자바 스크립트 프레임 워크인 부트 스트랩입니다. 부트스트랩은 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. 현재 최신 버전은 5이지만, 버전 4가 일반적으로 많이 사용되고 있다. Bo.. 웹사이트 제작 4편 - 오픈그래프으로 사이트 알리기 그누보드5 추가한 반응형웹 테마적용시 직접 모바일환경에서 스마트폰으로 테스트를 해야 한다. 만약 기본 그누보드5의 모바일웹으로 뜨는 경우 추가된 반응형웹 테마에서는 기본 기능인 PC와 모바일 2개환경에 맞게 설정된 config.php파일을 리모트사이트(서버)에서 다운받아서(설치시 DB정보등이 기록되있어서 꼭!!!!!! 다운받아서 해야함) 136번 줄의 아래 내용처럼 수정 후 업로드 하면 해결된다. define('G5_USE_MOBILE', false); // 모바일 홈페이지를 사용하지 않을 경우 false 로 설정, 그누보드는 PC와 모바일 공통사용을 기본으로 해서 반응형의 경우는 true를 false로 설정해야 반응형이 바로 동작한다. 웹사이트를 오픈그래프(Open Graph)으로 카카오톡 등 SNS를.. 웹사이트 제작 3편 - 네비 및 내용구성 메뉴를 구성하고 내용을 표현하는 부분들을 구현해봅니다. 테마는 에티 비지느스 무료테마 에서 받은 것을 기반으로 페이지를 구성하겠습니다. https://sir.kr/g5_theme/6648 에티 비즈니스 무료테마 v1.5 > SIR 안녕하세요~ 에티테마 입니다. 지난번에 v1.2 를 배포했었는데 너무 시간이 많이 가서 이제야 업로드합니다. 최대한 빨리 올려드린다고 말씀드린 sir.kr 에디테마 배포파일에는 theme외에 page라는 디렉토리(폴더)를 제공하는데에는 내용들을 수록할 수 있다. 루트인 /html 내에 /pages 폴더 업로드합니다. 링크주소를 기입하는 URL 주소에 대해 우선 절대주소와 상대주소를 알고 가야한다. 절대주소(경로) : 브라우저로 프로토콜을 포함한 URL을 말한다. http://k.. 웹사이트 제작 2편 - 테마변경 설치된 그누보드5의 테마(Theme)는 웹사이트의 레이아웃과 디자인을 담은 템플릿이다. 그누보드5의 테마 공유 게시판에 가보면 다양한 테마들이 있는데... 설치한 버전에 맞는 반응형웹 테마를 통해서 레이아웃과 디자인이 응축되어 포함된 jQuery, Bootstrap등의 외부 플러그인이 연결된 종합된 팩키지로 외관과 기능을 기본 테마를 새로운 테마로 변경해서 전혀 다른 사이트로 변화를 줘보자. 테마(Theme) 추가하기 소개하는 내용을 위 유튜브 채널에 영상으로 강좌를 올렸으니 참고하고 따라한다. 아래 그누보드 공식사이트의 배너나 URL 링크로 들어가서 테마라는 메뉴를 클릭해서 "반응형웹"테마를 받아서 설치해보자! https://sir.kr/g5_theme 그누보드5 테마 > SIR 그누보드, 영카트 개발.. DIV(디비전)태그 총정리 / 슬라이드 외부소스 HTML 구성은 HTML 구조내 네모난 박스형태의 Body(본문)내에 특정한 정보를 소개하기 위한 제목, 단락, 목록 등과 같은 텍스트들과 이미지, 혹은 영상들을 가져와서 본문을 꾸미고, 필요한경우 URL 링크등을 통해 유기적인 구조적 문서를 만들 수 있는 방법을 제공한다. Head에는 CSS, 자바스크립트 등을 포함하거나 Link를 통해 불러 올 수 있는데, 기본이자 전체 구조를 표현하는 DIV(디비전)과 관련 내부 구성요소들의 태그를 총정리해보겠습니다. p 태그에 아래 Lorem ipsum~을 복사해서 사용하세요. Img는 Pixabay의 이미지들을 활용했습니다. > Pixabay Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam .. On Event 전체메뉴(사이트맵) 보기 자바스크립트의 On Event는 크게 onclick, onmouseover, onmouseout 등이 적용된다. onclick onmouseover onmouseout onload 마우스클릭외 마우스를 올리거나, 범위내를 벗어나는 상황에 맞는 전체메뉴 열기원리를 소개한다. CSS 스타일 규정 #navbox{background:#00f;color:#fff;height:90px;} #navbox .logo{margin:0;float:left;padding:0 100px;} #navbox .fLT{float:right;margin-top:30px;} .btn{cursor:pointer;} #subnav{position:relative;left:0;bottom:-90px;height:400px;backgroun.. div 태그 레이아웃 div 태그 레이아웃을 결정짓는 Box model 세로로 펼쳐지는 글씨와 이미지 요소들을 분리된 박스영역내에 표현하는 레이아웃의 기본요소이다. DIV가 레이아웃으로 역할을 할때 주로 사용하는 CSS에는 바깥여백 margin / 안쪽여백 padding / 선 border / 배경 backgrond / 좌우 배치 float / 새로운 시작 clear:both / 보여주는 방식 display: none block inline inline-block 외 다양한 스타일 속성이 존재한다. 디비전 태그 | 디스플레이 속성 | 플롯의 속성 | 플롯의 사용예시 | 클리어 속성 아래 원본파일을 참고하세요.(이미지는 포함되지 않았습니다.) Splash(Intro) 페이지에 사용할 수 있는 Positon 속성1편-절대위치 P.. 원격수업을 위한 비디오 회의 전용솔루션-줌/원격제어 애니데스크 코로나19의 2.5단계가 되면 진행하는. 원격수업을 위한 비디오 회의 전용솔루션-줌/원격제어 애니데스크 사용법을 알려드립니다. ID: 996 116 1120 Pw : 311 01. Zoom 회원이 되다. 처음 줌을 이용하는 경우에는 '줌'이라 검색 후 줌 공식사이트 zoom.us에 크롬으로 접속하고 구글로그인 상태에서 로그인 클릭. 구글계정으로 간단히 로그인하여 회원계정을 만든다. zoom.us/ 비디오 회의, 웹 회의, 웨비나, 화면 공유 Zoom은 모바일, 데스크톱 및 회의실 시스템에서 비디오 및 오디오 회의, 채팅 및 웨비나를 안전하고 편리하게 진행할 수 있는 클라우드 플랫폼을 제공하여 첨단 엔터프라이즈 비디오 통신을 선도 zoom.us 02. Zoom 하다! PC버전 설치 줌을 통해 PC화면을 공.. Web 05. 이미지 스타일(Background:color,url('url') 로고 SVG파일 불러오기 www.w3schools.com/cssref/css3_pr_background.asp CSS background property CSS background Property Example Set different background properties in one declaration: body { background: lightblue url("img_tree.gif") no-repeat fixed center; } Try it Yourself » Definition and Usage The background property is a shorthand property f www.w3schools.com 색상정보를 쉽게 알수 있는 Color Picker www.w3schools... 파워포인트 2016 다운로드 한 파일 <복구 오류> 해결법 파워포인트 2016 다운로드 한 파일 해결법 파워포인트에서 파일메뉴 누르고 제일 아래의 옵션을 클릭합니다. 옵션을 클릭하면 - 보안센터-제한된 보기-인터넷에서 가져온 파일에 대해 제한된 보기 사용을 체크 꺼주세요. 일러스트레이터 Stroke을 이용한 약도 그리기 일러스트레이터 Stroke 옵션을 이용하며 간단한 지도인 약도 쉽게 그릴 수 있습니다. www.youtube.com/watch?v=rQ-F-Mvy8kE 페르소나 만들기-비트맵이미지 벡터화 페르소나 만들기-비트맵이미지 벡터화 www.youtube.com/watch?v=8q6Q_vSQ4LI PSD, JPG시퀀스 불러오기 포토샵 PSD파일을 프리미어 프로에서 Import하는 다양한 방법 Import As를 Sequence로 불러온 후 기본 애니메이션인 계단식 배열의 Frame By Frame 기법으로 영상화하는 과정을 소개합니다. 또한 Timeline에서 Add Track, Delete Track 기능, Program Monitor Pannel의 Setting에서 Play Loop하는 기능도 배울 수 있습니다. youtu.be/_xJFrUlR7nY 3D그래픽의 결과물을 이미지 시퀀스파일을 영상편집하는 방법 시네마4D 등 3D그래픽작업의 결과물을 동영상파일로 내보내기에 많은 시간을 렌더링에 소요하고, 렌더링중 에러가 나는 경우는 난관에 부딪히는 경우가 많은데, 각 프레임을 JPG와 같은 이미지 파일로 렌더링한 경우 아래 그.. 3단 리플렛(포폴활용) 보호되어 있는 글입니다. 프레젠테이션 디자인(포폴활용) 보호되어 있는 글입니다. 일러스트레이터 CC - 회색박스 안보이게 설정하기 일러스트레이터 CC버전부터 이동 및 크기조절시 스마트가이드 역할로 마우스 밑에 회색박스가 보이는 경우 발생한다. 도움을 주는 것이 아니라 방해가 된다. 회색박스를 안보이게 설정하기는 방법이다. 편집-설정 단축키로 접근 ....... Edit-Preferences (C+K) 왼쪽 카테고리 중 Smart Guides 클릭하고 - Measurement Labels Check Out 체크해제한다. OK를 누르면 정상으로 안보인다. 19. 주제별 포트폴리오 정리 보호되어 있는 글입니다. 18. 옥외광고 크리에이티브(02.09/ 재02.15) 보호되어 있는 글입니다. 브랜드 프로모션 광고디자인(썸네일,상세소개) 보호되어 있는 글입니다. 17-디자인 자료화 보호되어 있는 글입니다. 이전 1 ··· 13 14 15 16 17 18 19 다음
