본문 바로가기

티스토리툴바

전체 글

 (470)
EM-1-2. 이모티콘 기초와 포토샵 GIF "허니빈 캐릭터"편 프레임애니메이션 원칙 이동/투명도/효과(레이어스타일) 등은 별도 레이어가 필요없음. 커-작 별도레이어 준비(눈감-눈뜸)
평가용 - 풀괴"벼리" "풀괴'벼리' 스케치와 기본동작 이모티콘-스케치 트레이싱 들꽃벼리 편으로 아이디어 스케치를 볼펜으로 거칠게 그려보았다. 식물 그중에서도 그 누구도 관심없는 보드블럭의 빈 틈에 강한 생명럭으로 살아있는 들꽃에서 착안한 더 이상 작고 약한 들꽃이 아닌 '벼리' 라는 그럴 듯한 수식어와 별명을 붙여 주었다. 식물은 길가의 틈새에서 자라는 큰개미자리 라는 들꽃이다. 누구도 관심갖지 않고 작지먄 질기고 강한 생명력이 작지만 강한 의지를 들꽃에서 느낄 수 있다. 본격적인 라인작업에 들어가 본다. 풀괴벼리_기본형_홍길동(라인완성)에 까지 떠드는 시간을 줄여서 먼저 라인작업을 움직임 위주로 작업을 해보았다. 스케치한 캐릭터 촬영(스캔)이미지를 포토샵에서 보정하고, 일러스트레이터에서 원본위에 레이어에서 라인작업을하는 트..
소셜로그인 지원 웹사이트에 소셜로그인을 지원하면 쉽게 회원가입없이 로그인하여 이용이 편리합니다. 소셜로그인 지원을 위해서는 작업전 해당 소셜서비스에 로그인하고 개발자로 등록했는지 여부를 알아아 합니다. 그누보드, 영카트, 워드프레스용 쇼핑몰 배포 그누보드, 영카트 개발사로 웹사이트와 쇼핑몰을 무료로 만들수 있는 수많은 솔루션을 무료로 제공하고 있으며 다국어버전도 배포하고 있습니다. sir.kr
SNS마케팅을 위한 콘텐츠 제작실무(평가 : 공식 블로그 제작) SNS마케팅을 위한 콘텐츠 제작실무는 네이버의 프로필과 포트폴리오를 소개하는 목적의 공식블로그를 다음 조건에 맞게 개설과 관리운영 기능을 URL을 통해 운영관리하는 내용입니다. 1. 공식블로그 네이밍 설정 2. 관리모드에서 레이아웃 및 카테고리 구성 3. 레이아웃에 최적화된 블로그 스킨디자인 4. 이미지맵형태의 하이퍼링크로 위젯을 통한 게시판 연결 (위젯,투명GIF,태그) 네이버는 3개의 계정을 유지(회원로그인 없이 회원가입으로 실명 가입 다시해주세요) 1개 oknok70 / 회원가입 별도로 했음 개인(법인)가능합니다. https://blog.naver.com/gunslinger6970 오즈마트 공식블로그 : 네이버 블로그 기발한 생활용품을 판매하는 오즈마트 공식블로그입니다. blog.naver.com ..
키워드로 분석한 웹분야의 취업키워드(카드뉴스, 블로그 디자인) 키워드로 분석한 웹분야의 취업키워드는 # 프론트 엔드(웹디자인과 웹퍼블리싱) / 백 엔드(웹프로그래밍 영역서버사이드 스크립트 PHP) = 그누보드(워드프레스, 제로보드) 소셜커머스, 쇼핑몰, 오픈마켓, 전자상거래, B2C, 게시판관리, 쇼핑몰, 웹사이트운영, HTML5, HTML코딩, 포토샵,카드뉴스, 유튜브, 블로그 등이 있습니다. 이력서에 학원 교육과정 수료내용 추가 ■ 포트폴리오 : BI&CI 디자인(목업), 배너, 카드뉴스,유튜브(인트로영상포함) 포폴활용가능한 미리캔버스 ■ 웹포폴(2+B) 현재 문화앱(목업 콘셉 URL), 커뮤니티형 웹사이트(소셜로그인 지원 네이버) A,B2개유형(닷홈웹호스팅), 네이버 공식블로그(사이트 추가)=포폴을 공개 웹 취업분야 1. 기업의 웹사이트 관리(디자인,웹사이트 ..
키워드로 분석한 웹분야의 취업정보 프론트 엔드(웹퍼블리싱) / 백 엔드(서버사이드 스크립트 PHP)=그누보드(워드프레스, 제로보드) 이력서 교육과정 수료내용 추가//////////////////////////// ■ 포트폴리오 : BI&CI 디자인(목업), 배너, 카드뉴스,유튜브(인트로영상포함) 포폴활용가능한 미리캔버스 ■ 웹포폴(2+B) 현재 문화앱(목업 콘셉 URL), 커뮤니티형 웹사이트(소셜로그인 지원 네이버) A,B2개유형(닷홈웹호스팅), 네이버 공식블로그(사이트 추가)=포폴을 공개 취업분야 ////////////// 1. 기업의 웹사이트 관리(디자인,웹사이트 운영=개발사연락 계정정보 ftp 디자인 그림 등 콘텐츠 수정, 공식블로그-유튜브 운영관리, 상품상세이미지) ■ 주요키워드 # 소셜커머스, 쇼핑몰, 오픈마켓, 전자상거래, B..
EM 4-1 일러스트 심볼응용과 표정연구 어도비 일러스트레이터로 이모티콘용 캐릭터 드로잉을 배우고 있습니다. 가장 기본인 모양 혹은 형상이란 뜻의 쉐이프(Shape)라는 원시적인 최하위 개념의 개체(Object) 보다 상위개념이 그룹(Group)이라면, 최상위 개념인 심볼(Symbol)은 어떤 의미를 갖는 이름과 형태로 등록하고 대체가능한 개념입니다. 캐릭터의 다양한 얼굴표정과 바탕이 되는 얼굴 등 여러분이 원하는 형태를 심볼로 등록 및 교체등 활용을 해보세요. 심볼로 활용가능한 EPS, AI 등의 무료벡터파일을 쉽게 구해 참고할 수 있는 프리픽을 활용 표정파일과 일러스트 심볼활용에 대해서 소개합니다. 아래 배너 및 URL은 무료 벡터그림들(출처표시)을 쉽게 구할 수 있는 프리픽입니다. 구글 및 페이스북으로 쉽게 로그인할 수 있습니다. 한국어 ..
수정보완 평가(5.18)안내 보호되어 있는 글입니다.
그누보드 유튜브게시판 스킨 그누보드 유튜브 게시판 스킨입니다. 게시판스킨과 최신글 스킨으로 구분되어 있으니 잘 파악해서 적용하세요. 아래는 유튜브게시판을 미리보기입니다. 1. 게시판 스킨 (쓰기,보기,리스트 목록) 아래 압축파일을 다운로드 후 압축풀고, 그누보드 내 theme/kfood_v03/skin/board/ 경로에 붙여져 있어야 하니, FTP로 업로드 하시면 됩니다. 2. 최신글 스킨 (메인페이지 최신글 노출 1개 ) 아래는 메인페이지에서만 적용되는 최신글로 스킨디렉토리내에 latest라는 곳에 FTP로 업로드 후에 메인에서는 php구문으로 연결해서 보여집니다. 게시물이 갤러리와 달리 1개 정도 임펙트 있게 보여지면 늘 변화된 사이트가 될 수 있습니다. 위 다운로드 후 압축을 풀고 위 스킨을 skin에 업로드해야 합니다. ..
공모전 - 라우드소싱 외 (웹 UI/UX), 로고디자인(BI, CI) 라우드소싱에서 (웹 UI/UX), 로고디자인(BI, CI) 외에 캐릭터 등 여러분이 취업과 포트폴리오가 될 수 있는 공모전을 라우드소싱에서 찾아서 스스로 준비할 수 있습니다. 디자인 콘테스트 보기 | 라우드소싱 지금 진행중인 디자인 콘테스트를 확인해보세요. 수많은 콘테스트가 디자이너님을 기다리고 있습니다. www.loud.kr 아래는 라우드 소싱에 등록되지 않은 업체의 로고디자인 공모전입니다. 유토이미지 | 유토이미지 로고를 만들어주세요! 잘나가는 디자이너가 선택하는 유토이미지! 즐거운 이벤트와 넘치는 혜택을 확인하세요. www.utoimage.com 일러스트 작업을 주로 해야겠고, 결과물에는 목업소스로 사실적인 적용예시가 있어야 하는 부분이 필요합니다. 아래 배너를 통해 해당된 목업소스 활용법을 별도로..
그누보드 테마 - 메인과 서브페이지 내용(Content-Basic) 웹사이트의 주된 내용을 그누보드는 게시판/콘텐츠로 구성합니다. 그누보드의 서브페이지 콘텐츠 내용 구성과 스킨(Content-Basic) 반응형 변용에 대해 소개합니다. 01. FTP로 이미지 업로드 후 PC에서 html문서로 내용확인 PC에서 확인하고 이미지파일을 FTP로 업로드 해주세요. 해당된 html문서는 PC용으로 테스트 하고 내용수정에서 필요한 부분만 삽입합니다. 그냥 테스트를 하면 제 한식 이미지로 뜨니 여러분도 FTP에 여러분들만의 이미지를 업로드 하고, html문서로 테스트를 해봐야 합니다. 그렇다면 다음작업은 서버사이드측에서 아래 내용을 작업 합니다. 02. PC에서 내용확인이 되었다면 서버에서 스킨내용수정 우선 직접적인 콘텐츠의 내용을 담는 부분인 스킨을 변경합니다. 즉, 관리자모드에서..
일러스트레이터의 색상창고 -스와치스(Swatches) 일러스트레이터의 색상창고인 스와치스에서는 단색(Solid), 그라디언트, 패턴 등 다양한 라이브러리 제공하고 있는데, 단색의 경우에는 팬톤컬러를 이용하면 원하는 색을 쉽게(혹은 복잡하게) 찾아서 선과 채워지는 면에 적용할 수 있습니다. 아래는 일러스트레이터에서 기본 제공하는 라이브러리에서 스와치스 라이브러리를 통해서 세계적인 팬톤컬러를 찾아서 적용하는 복잡한 메뉴의 로드맵입니다. PANTONE 팬톤코리아 PANTONE 한국공식, 팬톤컬러칩 전제품 구매 및 상담가능, 팬톤코리아 공식 스토어 www.pantone.kr 팬톤컬러 외에도 원하는 색상을 쉽게 찾을 수 있는 컬러픽커를 이용하는 방법도 있습니다. https://www.w3schools.com/colors/colors_picker.asp HTML Co..
스마트문화앱 UI디자인(05.10) 보호되어 있는 글입니다.
메인페이지 - 탭 배경작업과 내부 구성요소 레이아웃 오늘의 날짜와 날씨 정보를 아래 php문서를 인클루드해서 메인에 추가해보세요. 아래는 최신업데이트한 테마 압축파일입니다. 교육내용을 따라하는 데 참고하세요. 개인정보처리방침, 이메일무단수집 거부 자료는 아래 첨부내용을 수정해서 사용하세요. 탭 배경작업과 내부 구성요소 레이아웃을 포토샵의 마스크 총정리로 프론트앤드와 백 앤드 작업을 병행해봅니다. UI, UX관련 개발소스(html, css) 디자인구성요소 설계를 위한 분석 외부 플러그인이라 하여 현재 작업중인 태그내에 삽입하여 사용하는 경우에는 직접 HTML과 CSS로 코딩하면서 웹퍼블리싱을 하지만은 않습니다. 관련된 프레임 oztv.tistory.com 탭 내부에도 꽉찬 레이아웃이 아닌 부트스트랩의 그리드 표현이 필요합니다. 아래 소스를 참고로 작업진행하..
어서와 GTQ - 포토샵 속전속결 어서와 GTQ 포토샵 속전속결에서는 자격증 시험을 위한 강좌를 준비했습니다. 90분이라는 제한된 시간동안 4개의 문제를 그래픽작업하고 결과물을 JPG형태로 내보내고 포토샵파일은 10단위 픽셀로 줄여서 제출하는 것이 전체 시험내용입니다. 아래 강좌와 관련 소스를 받아서 연습해보세요. 사진과 그림형태는 매시험 비슷합니다. 시간을 재보면서 줄여서 풀어가는 연습을 해보세요. 아래는 시험에 출제되었던 Key라는 키워드로 픽사베이에서 적용한 예제입니다.
그누보드 부트스트랩과 탭형식의 최신글 반응형구현 그누보드 부트스트랩과 탭형식의 최신글 반응형구현 https://youtu.be/VCi3_ANMwio /html/main/theme/kfood_v03/skin/latest 에 아래 스킨을 다운받아서 /html/main/theme/kfood_v03/skin/latest/basicPic 위와 같이 설치해주세요 그누보드용 B5 그리드시스템 샘플 테스터 최신글 스킨테스트 1차
블랜더의 다양한 경로애니메이션 /시뮬레이션 블랜더 자체내의 선형태인 베지어 커브를 따라가는 Path Animation에 대해 소개합니다. 기존의 Auto Keying을 통해서는 짧고 단순한 운동들의 반복이었지만, 커브라는 2D의 그래픽의 펜툴을 사용하여 그린 것 같은 형태의 경로에 자연스럽게 물흐르 듯 움직이는 경로애니메이션을 구현해보자. 01 시계방향의 원형 회전 경로운동 원형의 벡터곡선인 커브인 경로(Path)를 따라서 오브젝트가 움직이는 기본 경로운동을 표현해본다. 1. 수잔 원숭이가 있는 현재 스테이지에서, 추가(Shift+A)를 누르고 커브에서 원형을 클릭해서 원을 그려봅니다. 필요한 경우 S를 누르고 크기를 조절하세요. 2. 수잔을 커브 원형에 출발위치에 배치를 해주세요. 3. 먼저 수잔을 선택하고 Shift를 누르면서 커브를 선택해주..
스마트문화앱 UX설계(04.21) 보호되어 있는 글입니다.
외부자료를 본문내 삽입하는 아이프레임(iframe) iframe : 정해진 크기에 외부에 콘텐츠나 사이트 그내부에 일부인 것처럼 뜬다. 고유 네임과 ID가 있어서 A태그의 타겟대상되는 경우로도 활용가능. ex)주가정보,날씨,배너,구글검색 https://www.w3schools.com/tags/tag_iframe.asp HTML iframe tag W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 비디오는 미디어서버 공간활용 ..
Bootstrap 5 그리드 시스템에는 4가지 클래스 Bootstrap 5 그리드 시스템에는 6가지 클래스가 있습니다. 그중 정리한 11 22 33 44 아래부분을 콘테이너에 적용해보세요. 11 22 33 44 현재 테마의 테마 그리드4개 개선버전 Bootstrap 5 Grid System W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com Bootstrap 5 그리드 시스템에는 6가지 중 4개 클래스를 정리했습니다. .col-..
모션그래픽의 그래프(Ease In/Out) 자동차, 오토바이, 비행기 등 모든 메카닉(Mechanic)은 화석연료를 지속적인 주입을 증가시키며서서히 속도를 내고, 속도를 줄일 때는 서서히 줄어듭니다. 비행기도 이륙하려면 일정한 속도를 점차 내야 합니다. Ease는 '쉽다'는 사전적인 의미를 갖고 있습니다. 프리미어 프로에서는 오른클릭 후 적용하고, 애프터 이펙트에서는 단축키로 속도를 제어하는데... Ease In '서서히 익숙해지다'. Ease Out을 '떠나가버리다'라는 의미이다. In과 Out은 등장하다 퇴장하다 로 개념이 섞여서 무대 중앙에 등장하거나 사라지는 경우에 속도의 증감을 키프레임에 맞추어 오른클릭 후 선택해서 표현합니다. 프리미어 프로(Premiere Pro) 모션그래픽에서는 Ease In은 서서히 속도가 주는 개념으로, Ease..
아이템의 그래픽과 코딩표현 아이템의 그래픽과 코딩표현 디자인을 반영한 형식 아이템에 적용한 CSS 속성과 값 소스활용(w3schools.com) 최종버전입니다.
UI, UX관련 개발소스(html, css) 디자인구성요소 설계를 위한 분석 외부 플러그인이라 하여 현재 작업중인 태그내에 삽입하여 사용하는 경우에는 직접 HTML과 CSS로 코딩하면서 웹퍼블리싱을 하지만은 않습니다. 관련된 프레임워크 플러그인 요소를 알고 삽입하여 활용하는 방법을 소개합니다. ★ BS로 제작한 웹사이트 템플릿 > 구글검색 아래는 최신 업데이트된 위로가기 StrollTop 자료파일원본(html, css)파일입니다. 아래는 위 파일내용을 함축적으로 정리한 2 버전입니다. Bootrap , jQuery 응용기술(버전유의) https://www.w3schools.com/bootstrap5/ https://www.w3schools.com/w3css/w3css_accordions.asp https://www.w3schools.com/howt..
HTML 아이덴티티의 표현 - 파비콘과 오픈그래프 타이틀디자인(BI, Logo)에서 만든 심플한 심볼이미지를 브라우저에 북마크(즐겨찾기) 및 앱제작시 스마트폰에 뜨는 파비콘으로 활동되는 태그를 소개합니다. 파비콘은 브라우저상 Title과 함께 뜨는 즐겨찾기 아이콘의 줄인말로 영어로 Favicon이라 한다. 일반적으로 ICO 파일을 만들어주는 별도 응용프로그램이 있다. 파비콘은 브라우저상 Title과 함께 뜨는 즐겨찾기 아이콘의 줄인말로 영어로 Favicon이라 하며, 일반적으로 ICO 파일을 만들어주는 별도 응용프로그램이 있습니다. 아래 IcoFX는 별도 설치가 필요없는 포터블입니다. 다운받아서 USB에 잘 보관하여 사용하시기 바랍니다. 파비콘을 만들기 위해서는 기본 256X256px의 PNG이미지가 필요하다. 포토샵, 일러스트레이터에서 심볼 작업후 아..
캐릭터는 스케치에서 시작된다. 유명한 캐릭터도 제일 처음은 어떤 아이디어가 떠올랐었고, 이를 어떠한 형상으로 만들기 위한 스케치에서 시작되었던 것이었다. 스케치하는 방법을 위해 구석에 방치하고 사용하지 않던 2004년 출시된 제법 큰 크기에 와콤타블릿으로 그림판 스케치 습작. 촛점을 못잡고 마우스로 인도한 어색한 위치잡기와 첫 터치의 이질감. 정말 필감이 얺좋았지만 이상한 모습의 자아를 그려 보게 되었다. 이렇게 새로운 어떤 형상을 표현하는 것은 의외의 불특정한 선의 방향이동과 익숙해지는 느낌으로 새로운 창작의 출발점이 되기도 한다 https://www.pinterest.co.kr/pin/510877151491340558/ www.pinterest.co.kr 캐릭터 일러스트 ongolzin님의 컬렉션 캐릭터 일러스트을(를) 둘러보세요..
인트로 스플래쉬(Splash)페이지 자동연결 인트로 스플래쉬(Splash)페이지 자동연결 상대경로와 절대경로로 구분하였습니다. 아래파일을 서버의 html(www)인 루트디렉토리에 업로드 후 표현하세요.
그누보드5 최신글 스킨과 서브페이지 비주얼요소 표현 그누보드5에서 작성한 글 중 텍스트, 이미지 위주의 게시판에서 최근에 작성한 순서대로 메인페이지의 레이아웃 구성에서 표현해주는 기능을 [ 최신글 ] 스킨이라 합니다. 메인의 최신글 소스와 관련 스킨소스입니다. 최신글 스킨의 위치 main/theme/kfood_v02/skin/latest/ 스킨은 원하는 HTML과 CSS외에 PHP로 구성된 코딩소스를 변경해서 가장 일반적인 형태로 구분해 보여지게 하는 레이티스트'lastest'라는 디렉토리에서 테마에 속한 스킨명, 게시판ID, 나열갯수, 제목의 제한 형태로 표기하여 보여집니다. Basic이라는 기본 스킨을 커스터마이징하여 처리하는 방법을 소개합니다. Bootsrap버전별로 차이가 있으나, 아래 적용한 소스는 BS5이다. ▶ 바로가기 theme/kfood_..
오프닝영상세트 (Trim path +Animation Presets - Text) AfterEffects에서 제작한 2개의 오프닝영상세트와 Trim path(패스다듬어 자르기) 2의 Start~End를 활용한 프로젝트소스와 어마한 효과를 Animation Presets - Text의 효과들을 모두 모아서 리스트를 정리해 보았다. 3D Text ////////////////////// 3D Basic Position Z Cascade 3D Basic Position Z Typeon 3D Basic Rotate X Cascade 3D Basic Rotate Y Cascade 3D Bouncing In Centered 3D Fall Back Scale & Skew 3D Fall Back Scramble & Blur 3D Flip In Rotate X 3D Flip Out Rotate X 3..
디지털 제작 도구 시각화 작업을 시작하는 초반에는 주로 스케치 방법을 이용하여 표현해 보는 것이 바람직한 방법이며, 이후 여러 사람과의 의사소통, 공유 및 수정 작업을 위해 디지털 제작 도구를 사용하여 옮기는 방법이 바람직하다. 세계적으로 많은 사용자를 확보하고 있으며, 유료로 운영되고 있는 대표적인 디지털 제작 도구들은 다음과 같다. (1) UX Pin http://www.uxpin.com (2) Adobe XD http://www.adobe.com (3) Sketch http://www.sketchapp.com (4) InVision http://www.invisionapp.com
이모티콘 적용가능한 포토샵 필터효과편 이모티콘 캐릭터 제작에 일러스트레이터와 포토샵 외에도 애프터이펙트와 같은 애니메이션 프로그램을 사용하여 표현하는 이들도 많아지고 있습니다. 앞에서 소개한 영상의 기본단위인 프레임(한장면)에 각각의 변화를 한장면마다(Frame By Frame) 그림으로 표현하는 것을 보충하기 위하여 포토샵에는 필터(Filter)라는 효과 메뉴가 있는데 효과를 잘 활용하면 캐릭터의 움직임을 다이나믹하고 극적으로 표현 할 수 있습니다. 일러스트레이터에서 레이어별로 잘 구분하여 준비한 일러스트레이터파일(Ai)을 File - Export - Export As...로 포토샵파일 72dpi로 레이어를 유지하며(Write Layer) 포토샵 파일(Psd)내보내서 포토샵에서 열어본 레이어구조 그대로의 그림들을 볼 수 있습니다. 필터(F..
반응형

티스토리툴바