본문 바로가기

티스토리툴바

전체 글

 (568)
그누보드 테마 - 메인과 서브페이지 내용(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 tagW3Schools 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년정도의 사용기간이 만료되기 전 연장을 통해서 웹사이트를 유지해야하는데, 홈피를 처음 만들어보는 분들은 무료 호스..
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" 웹문서(자체페이지간 이동) ★★★원페이지의 원리(..
반응형

티스토리툴바