분류 전체보기 (549) 썸네일형 리스트형 평가용 - 풀괴"벼리" "풀괴'벼리' 스케치와 기본동작 이모티콘-스케치 트레이싱 들꽃벼리 편으로 아이디어 스케치를 볼펜으로 거칠게 그려보았다. 식물 그중에서도 그 누구도 관심없는 보드블럭의 빈 틈에 강한 생명럭으로 살아있는 들꽃에서 착안한 더 이상 작고 약한 들꽃이 아닌 '벼리' 라는 그럴 듯한 수식어와 별명을 붙여 주었다. 식물은 길가의 틈새에서 자라는 큰개미자리 라는 들꽃이다. 누구도 관심갖지 않고 작지먄 질기고 강한 생명력이 작지만 강한 의지를 들꽃에서 느낄 수 있다. 본격적인 라인작업에 들어가 본다. 풀괴벼리_기본형_홍길동(라인완성)에 까지 떠드는 시간을 줄여서 먼저 라인작업을 움직임 위주로 작업을 해보았다. 스케치한 캐릭터 촬영(스캔)이미지를 포토샵에서 보정하고, 일러스트레이터에서 원본위에 레이어에서 라인작업을하는 트.. 소셜로그인 지원 웹사이트에 소셜로그인을 지원하면 쉽게 회원가입없이 로그인하여 이용이 편리합니다. 소셜로그인 지원을 위해서는 작업전 해당 소셜서비스에 로그인하고 개발자로 등록했는지 여부를 알아아 합니다. 그누보드, 영카트, 워드프레스용 쇼핑몰 배포 그누보드, 영카트 개발사로 웹사이트와 쇼핑몰을 무료로 만들수 있는 수많은 솔루션을 무료로 제공하고 있으며 다국어버전도 배포하고 있습니다. 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차 스마트문화앱 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 비디오는 미디어서버 공간활용 .. 모션그래픽의 그래프(Ease In/Out) 자동차, 오토바이, 비행기 등 모든 메카닉(Mechanic)은 화석연료를 지속적인 주입을 증가시키며서서히 속도를 내고, 속도를 줄일 때는 서서히 줄어듭니다. 비행기도 이륙하려면 일정한 속도를 점차 내야 합니다. Ease는 '쉽다'는 사전적인 의미를 갖고 있습니다. 프리미어 프로에서는 오른클릭 후 적용하고, 애프터 이펙트에서는 단축키로 속도를 제어하는데... Ease In '서서히 익숙해지다'. Ease Out을 '떠나가버리다'라는 의미이다. In과 Out은 등장하다 퇴장하다 로 개념이 섞여서 무대 중앙에 등장하거나 사라지는 경우에 속도의 증감을 키프레임에 맞추어 오른클릭 후 선택해서 표현합니다. 프리미어 프로(Premiere Pro) 모션그래픽에서는 Ease In은 서서히 속도가 주는 개념으로, Ease.. 아이템의 그래픽과 코딩표현 아이템의 그래픽과 코딩표현 디자인을 반영한 형식 아이템에 적용한 CSS 속성과 값 소스활용(w3schools.com) 최종버전입니다. HTML 아이덴티티의 표현 - 파비콘과 오픈그래프 타이틀디자인(BI, Logo)에서 만든 심플한 심볼이미지를 브라우저에 북마크(즐겨찾기) 및 앱제작시 스마트폰에 뜨는 파비콘으로 활동되는 태그를 소개합니다. 파비콘은 브라우저상 Title과 함께 뜨는 즐겨찾기 아이콘의 줄인말로 영어로 Favicon이라 한다. 일반적으로 ICO 파일을 만들어주는 별도 응용프로그램이 있다. 파비콘은 브라우저상 Title과 함께 뜨는 즐겨찾기 아이콘의 줄인말로 영어로 Favicon이라 하며, 일반적으로 ICO 파일을 만들어주는 별도 응용프로그램이 있습니다. 아래 IcoFX는 별도 설치가 필요없는 포터블입니다. 다운받아서 USB에 잘 보관하여 사용하시기 바랍니다. 파비콘을 만들기 위해서는 기본 256X256px의 PNG이미지가 필요하다. 포토샵, 일러스트레이터에서 심볼 작업후 아.. 인트로 스플래쉬(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.. PHP(html) 인클루드문 적용 메인페이지의 주요 아이템을 그리드 시스템활용부분으로 테마중 헤드, 인덱스문 해당테마에서 붙여놓으시고 아래는 진행중인 반응형웹의 페이지입니다. https://www.w3schools.com/css/css_grid.asp CSS Grid Layout 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 https://www.w3schools.com/cssref/tryit.asp?f.. EM-6 헬로우 토마스 "일타쌍피" 동작추가 표현 창작한 캐릭터 헬로우 토마스 동작추가 표현을 어니언 스킨(양파껍질 처럼 투명한 계층) 방법을 소개합니다. 레이어를 잘 구분해서 일러스트레이터에서 작업한 파일을 File-Export-Export as를 이용해서 레이어가 고스란히 존재하는 형태로포토샵파일(PSD)로 내보내는 과정이 연결이 됩니다. 아래는 포토샵에서 GIF 애니메이션을 만드는 과정을 소개하고 있습니다. 웹사이트제작 2편 - 그누보드 테마와 스킨 웹사이트제작 2편 - 그누보드 테마와 스킨 https://sir.kr/g5_theme/7433?sfl=wr_subject%7C%7Cwr_content&stx=%EB%B0%98%EC%9D%91%ED%98%95 GnuTailwindcss v0.3.0 Dark Mode 지원 > SIR GnuTailwindcss v0.2.1에 Dark Mode를 추가한 버전입니다. 그외에 Video 게시판의 Naver TV와 관련한 오류를 수정했으며, 기존의 레이아웃을 일부 수정하였습니다. 이번에도 두서없이 작업하느라 sir.kr 반응형의 경우는 설치된 main에서 config.php 파일 define('G5_USE_MOBILE', false); // 모바일 홈페이지를 사용하지 않을 경우 false Bootstrap Icons.. 웹앱의 첫 아이덴티티 표현 - 스플래시(Splash) 웹앱의 첫 오픈에 뜨는 스플래시(Splash)는 단순한 로고와 색상에서 아이덴티티 표현하는 수단으로 뜨는 인트로 화면입니다. 각 사이트와 앱의 특성에 따라서 스플래시는 인트로 화면 역할만은 하지 않습니다. 고유의 아이덴티티(이미지부각, 각인)를 구현하면서도 기능적인 부분은 코딩을 통해서 다양한 기능을 수행합니다. Delicious Food Splash Screen | Splash screen, App design, Screen design (pinterest.co.kr) Pinterest에서 발견 회원님을 위한 아이디어를 더 많이 발견하세요. www.pinterest.co.kr 웹사이트 제작 1편 - 웹호스팅과 DB셋팅(그누보드5) 여러분들이 웹코딩과 디자인으로 구현한 내용은 퍼블리싱(공개)하지 않는다면, 내컴퓨터에서 브라우저로만 보는 디렉토리(폴더)속 html문서일 뿐이다. 실제 웹사이트를 만드는 기술은 html의 해박한 지식외에도 솔루션들을 이용해서 만들어 낸다. 실전경험을 쌓는 차원에서 웹호스팅과 도메인 서비스를 이용해서 홈페이지를 만들어 보자. 우선, 안전적인 전용회선이 연결된 서버컴퓨터의 일정한 공간을 임대하여 내용을 채우고 선보이는 역할이 웹호스팅이라 한다. 도메인은 IP주소로된 URL을 10자 내외의 영어와 숫자로 만든 의미를 담은 문자형태로 웹사이트의 특성을 담을 것이다. 웹호스팅과 도메인은 모두 유료로 1년정도의 사용기간이 만료되기 전 연장을 통해서 웹사이트를 유지해야하는데, 홈피를 처음 만들어보는 분들은 무료 호스.. 이전 1 ··· 10 11 12 13 14 15 16 ··· 19 다음
