Visual & Media Design

수업에서 언급한바와 같이 1024*768을 기준으로 하는 경우가 대부분이며 이때 모든 종류의 브라우저에서 스크롤이 안생기는 영역에서 디자인이 되려며 상단의 브라우저 메뉴를 제외한 영역을 고려한 사이즈로 작업되어야 합니다. 849*507 을 기준으로 작업합니다 reference : http://www.designerstoolbox.com/designresources/safearea/compare/?PHPSESSID=404371441f30ebc39a52d2b901e571cd Screen Resolution 1024 x 768 Browser Safe Area Download File Mac OS X: Safari 909 x 519 Safari Window (.psd) Mac OS X: Firefox 909 x..

http://vimeo.com/6520450 Web Design Tutorial Part One Web Design Tutorial Part One from andrew on Vimeo. 1. 와이어 프레임을 손으로 먼저 자세히 그린다. 2. 포토샵에서 먼저 새로운 도큐먼트에서 Web을 선택하고 거기서 사이즈를 선택 3. proof setup에서 monitor RGB 선택, proof color 를 선택 4. grid system generator를 이용하여 그리드 이미지를 만들고 이것을 가져다가 포토샵에 넣고 사용 5. 포토샵 레이어 폴더를 만들어서 각각의 로고, 메인메뉴 등등의 폴더를 만들어서 따로 따로 디자인해서 이용함 . 이것은 와이어 프레임을 그렸던 것에 기초해서 만든다. 그런다음에 종류별로 다..

아이폰 어플이나 모바일웹을 2학기 웹디자인에서 시도하려고 합니다. 디자인 하실때 다음의 재료들을 쓰셔서 디자인을 시작할수 있습니다. iPhone Safari Browser Download File (.psd) iPhone GUI Elements iPhone Status Bar: Gray Download File (.psd) iPhone Status Bar: Black Download File (.psd) iPhone Title Bar: Blue Download File (.psd) iPhone Title Bar: Black Download File (.psd) iPhone Title Bar Buttons Download File (.psd) iPhone Icon Bar Download File (.psd..

자신의 작업에서 사진이나 그림을 가져다가 쓰실경우에는 반드시 저작권을 확인하셔야 합니다. 오늘 웹디자인 수업시간에 설명을 드린대로 CC 라이센스 표시가 있는 사진이나 그림을 쓰시는 경우에는 비영리 목적으로 자유롭게 쓰실수 있습니다. 이용방법은 가장 찾기 쉬운것으로는 Flickr 에서 고급검색 Advanced Search 에서 CCL 달린 컨텐츠만 이용하는 방식을 쓰시는게 좋습니다. http://www.flickr.com/search/advanced/ () Creative Commons 사용권이 있는 컨텐츠 내에서만 검색합니다. 상업용으로 사용할 컨텐츠를 찾습니다. 수정, 적용 또는 빌드 기반으로 사용할 컨텐츠를 찾습니다. 그러나 이경우에도 변경금지 조항이 있는지, 2차저작물에 대한 원작자 표시등에 대해서..

그림을 클릭하면 그림이 새 창에 뜨는 것 ←클릭해보세요 새 창(보통 팝업창이라고 하죠)이 자동으로 뜨는거하구 클릭해서 뜨는거를 설명합니다.. 아래의 빨간색 부분을 새창을 띄우는 링크를 하고 싶은 HTML 문서에 써 줍니다.. 위의 자바스크립트를 반드시 써줘야 새창이 나타납니다.. 위에서 지정된 openwindow() 함수에 의해 새로운 창이 뜨게 하는데요.. Links는 새 창의 이름입니다.. 창의 이름을 지정하여 두면 openwindow()를 사용한 곳을 클릭할 때마다 매 번 새 창이 뜨지 않고 하나의 새 창에서 클릭한 주소의 내용이 나타나게 됩니다.. Links 대신 ''로 작은따옴표를 바로 열고 닫고 하면 창의 이름이 없기 때문에 매번 새로운 창이 뜹니다.. x는 창의 width(가로 크기), y는..

인트라넷으로 접속해서 왼쪽 젤 하단에 있습니다. http://www.sookmyung.ac.kr/~mancc/adduser.html 학교계정의 홈페이지를 만들고 싶어요. 인트라넷> 숙명홈페이지계정신청> [신규 홈페이지 계정발급]에서 신청하시면 홈페이지계정을 바로 이용할 수 있습니다. (2008.4.14 변경) 홈페이지 계정 정책 : 1인 개인계정 1개와 공용계정 1개에 한함. 홈페이지 주소는 어떻게 되나요? 기본적으로 서버에 'www_home'폴더를 생성하고 그 안에 index.htm 문서를 올리게 되면 브라우저에서 http://sookmyung.ac.kr/~userID 와 같이 호출하였을 때 자신의 홈페이지를 볼 수 있습니다. 홈페이지 용량은 얼마나 되나요? 숙명홈페이지 계정 용량은 50MB를 제공하고..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1. 슬라이드용 디자인 자신의 웹사이트 디자인을 이미지를 1024*768 로 작업바랍니다. - 자신 웹사이트 디자인 컨셉소개 템플릿 포토샵화일 첨부합니다. 나눔고딕 ExtraBold를 사용하였습니다. 서체다운로드 : http://hangeul.naver.com/nanum.nhn 폰트를 먼저 인스톨하시고 포토샵을 여셔서 입력한뒤에 jpg로 만들어서 제출합니다. web_template.psd - 자신 웹사이트 디자인 이미지 백그라운드 없고, 브라우저 부분빼고 순수 이미지 영역만 4장 1024x768 사이즈로 제출합니다. 2. 웹사이트 링크로 연결할 부분에 대한 제출 - 타이틀, 링크 이름.txt (메모장에 적을것) - 썸네일 이미지 180px × 118px jpg 자신의 블로그에 올리고, 여기에 댓글 다시기..

박상원군에게 배운 플래시 투토리얼과 관련있는 동영상을 찾아서 올립니다. 박상원군에게 오늘 했던 예제화일을 받아서 추후에 포스팅하도록 하겠습니다. 예제화일 올립니다. 다운로드 받아서 해보시고 다음시간에 질문하시기 바랍니다. 박상원군이 추천하는 플래시 교재는 "Flash Navigation Patter" 플래시 네비게이션 패턴 18 윤용호 지음. www.thedofl.com/navigation18 절판되었다고는 하나 헌서점이나 도서관에서 찾아서 보면될것같습니다. 아도비에서 제공하는 동영상이기때문에 차근차근 따라하시면 어렵지 않을것입니다. 따라하시면서 오늘 한 내용도 복습해 보시기 바랍니다. 액션스크립트를 이용하여 링크를 제공하는것에 대한 투토리얼 http://tv.adobe.com/watch/flash-do..

과제전 공간문제로 프린트를 안 하는것으로 결정되었습니다!!!!!!!! 1. 과제전 전시계획 5월 25일 1시에 설치하고 26일~6월3일까지 과제전 전시합니다. 프로젝터와 프린트 두가지로 예정하고 있으며 프린트로 하고 싶은신 분은 아래에 댓글 달아주시기 바랍니다. 전부 그리고 프로젝션으로 갑니다. 전시공간 문제로 모두 프로젝션으로만 과제전시합니다. 2대를 쓸예정이고, 큰것에는 이미지슬라이드를 하고 작은것에는 각자 작업한 웹사이트의 링크를 보여주고 직접 접속할 예정입니다. (버그가 있거나, 이미지가 깨지거나, 링크가 잘 안되는 웹사이트는 빼고 가겠습니다.) 2. 과제제출 프린트 하실분은 다음주까지 A1 사이즈(추후 한번더 공지예정)로 작업하시기 바라고 프로젝션은 2대를 설치해서 한대는 이미지 넘기는 슬라이드..

1. Main(1~2 페이지 이상) & Sub(5 페이지 이상) 디자인 마무리 => 블로그에 포스트하고 여기에 숙제 댓글 달기 주제를 바꾸거나 새로 정하신 분들은 다음시간까지 ppt마무리와 디자인까지 마무리하여서 저에게 보여주시기 바랍니다. 2. 교재 스터디 312 페이지의 배경 이미지고정과 외부 스타일 시트까지 최종 복습하여 마무리 합니다. 3. 위의 교재 및 제가 올려놓은 화일을 참고하여 external CSS 적용안한사람은 적용하여 완성하기 바랍니다. 이 포트폴리오사이트 숙제는 기말까지 계속가니 미리미리 끝내시길 바라니다. * 다음주는 뷰티풀 웹 디자인 교재로 넘어가서 강의토록 하겠습니다.교재 사지 않아도 됩니다. ** 서울대 박상원군이 플래쉬 메뉴 만드는 방법에 대해서 다음주 부터 2주간 특강을할..

보호되어 있는 글입니다.

1. 자신의 포트폴리오 html 사이트 완성 자신의 포트폴리오 사이트를 CSS 화일을 연결한 (external) HTML 작업하여 파란 웹호스팅에 업로드할것 ** 해당 웹호스팅 URL을 여기에 댓글로 달고 자신의 블로그에 캡쳐한 화면과 동시에 URL을 포스팅 할것 2. 중간발표 이후 기말까지 진행할 프로젝트 기획 발표 아래내용이 포함되어야함. 기존의 웹디자인 5주차에 이미 기 공지된 내용임. ** 이름.ppt에 정리하여 미리 수업 시작 전에 웹디자인 폴더한군데에 넣어놓을것. 1단계 전략수립(strategy / research) 1-1. Mission - 개발 하고자 하는 사이트의 미션은 무엇인가? 몇문장으로 정리 1-2. Objectives - 개발 하고자 하는 사이트의 목적은 무엇인가? 몇문장으로 정리..

창학 B178 오늘 웹디자인 여기서 합니다. 7:00 pm 다음의 이효숙씨가 아래의 내용으로 특강을 해주실 예정입니다 1. 포탈에서 모바일 시장을 바라보는 시각 2. 모바일 어플과 모바일웹의 기획단계에서 고려해야 할 점 3. Daum의 어플 개발사례 : tv팟, 지도, 다음앱스, 티스토리 (아직 사내 오픈 예정인 어플 등) 4. 모바일 어플 UX가이드 소개 5. 모바일웹 UX가이드 소개 이지선

팟캐스트에 대한 사전적 의미 팟캐스트는 애플의 아이팟(Ipod)과 방송(Broadcasting)을 결합해 만든 신조어로, 포터블 미디어 플레이어(PMP) 사용자들에게 오디오 또는 비디오 파일 형태로 뉴스나 각종 콘텐츠를 제공하는 것을 말한다. 과거엔 특정 방송을 정해진 시간에 일일히 녹음해두었다가 청취해야 했지만 팟캐스트는 특정 방송 내용을 시간에 구애받지 않고 언제 어디서나 활용할 수 있다는 것이 가장 큰 특징이라 할 수 있다. 또한 뉴스, 영어학습, 음악, 강좌등 활용 방안은 무궁 무진하다고 할 수 있다. 팟캐스트를 활용하는 방법은 itunes, rss리더, 티스토리 플러그인을 제공하는 podics 를 이용하는 방법이 있다. 1.rss 리더 활용 아래 이미지는 구글 리더를 통해 팟캐스트 구독하는 화면..

웹사이트에서 정보를 수집하거나 새로운 소식을 접할 때 일반적으로 흔히 하는 행동 또는 가장 손쉬운 방법은 포털 사이트에 접속하는 것입니다. 그리고 검색을 하고 중요하다 싶은 웹사이트의 경우 북마크를 하는 것이 아직까지는 가장 보편적이 행동입니다. 그러나 이러한 방법은 매번 별도의 웹사이트에 접속해야하며, 다른 일을 하다 새로운 소식을 바로 접하기가 상당히 어렵습니다. 또한 시간의 낭비도 많습니다. rss 는 뭔가요? 우리는 보통 신문을 매일 배달해서 구독합니다. 매번 가판대를 방문해서 신문을 사서 보지는 않습니다. rss란 real simple syndication 의 약자로 '정말 간단한 배급'으로 해석할 수 있습니다. 즉 간단한 배급을 통해 뉴스 사이트나 블로그를 방문하는 번거로움과 시간의 낭비를 덜..

RSS 아이콘을 삽입하는 방법은 아래의 사이트에서 적당한 아이콘을 다운받는다. 티스토리 블로그에 비공개로 사진을 올린다. 마우스 우클릭해서 이미지 주소를 복사한다. 아래 태그를 사용해서 블로그 사이드바나 스킨의 적당한 곳에 삽입해 주면 된다. ()괄호는 로 바꿔줘야 한다. (a href="블로그 rss feed주소" target="_blank") (img src="블로그 이미지 주소" align = "middle" border = "0") (/a) 참고)target=blank를 제거하면 현재창에서 열린다. 다양하고 예쁜 RSS아이콘을 다운로드 받을 수 있는 사이트 » 10 Most Beautiful RSS Icon Packs for Web 2.0 » Social Networking Blog - So..

1. HTML & 드림위버 CS4 교재 실습 277페이지 ~ 312페이지 : 스타일 시트로 문서의 한계 뛰어넘기 / 하이퍼링크 정의 스타일시트 만들기 / 배경이미지 고정과 외부 스타일 시트 * 자신의 포트폴리오 사이트 HTML 작업 시작하기 ==> html 코드를 하시다가 모르시는것은 저에게 질문을 주세요~ 코드 같이 보면서 알려드릴께요. 플래쉬로 작업하고 싶으신 분도 우선은 html 로 작업먼저 해보시기 바라니다. 플래쉬는 중간고사 이후로 박상원님이 오셔서 특강하실 예정... 2. 중간고사 준비하기 1단계 전략수립(strategy / research) 1-1. Mission 1-2. Objectives 1-3. Target Users 1-4. Scope of the Project - 유사/ 경쟁 사이트..

Daum 모바일 디자인을 담당하고 있는 이효숙님의 특강을 진행할 예정입니다. 모바일 웹의 가이드에 대해서 설명해 주실 예정입니다. 제가 수업시간에 부탁을 드렸으나 월요일 오전에 있는 정기회의로 인해 월요일 오전은 어려우시다네요. 그래서 월요일 저녁시간대에 잡거나, 토요일에 하려고 합니다. 1안 4월 19일 월요일 저녁 6시~(4월 19일 월요일 오전수업을 저녁으로 이동) 2안 4월 24일 토요일 오전 10시~ ( 이날 하게 되면 26일 예정이였던 중간발표 까지 같이 가도록 하겠습니다.) 3안 5월 1일 토요일 오전 10시~ (5월 3일 월요일 수업 대체) 결정 ==> 4월 19일 월요일 저녁 7시 월하는 시간대를 알려주시기 댓글로 바랍니다.

3/29 출석 : 김다은, 김바다, 강서현, 김현진, 강예원, 수련, 박초희, 변민녕, 황다원, 조예지, 박혜진,서가은, 김보람, 권서윤, 서윤석, 조소현, 양혜진, 이효숙, 배민경, 김나래, 문정윤, 이태경, 김혜지, 오주영, 최미나, 안정호, 함유경, 박혜령 숙제하면 댓글로 달아주세요. 댓글을 안달면 숙제안한것을 간주. 과제 : 자신의 포트폴리오 사이트의 메인과 서브페이지 디자인 (포토샵 또는 일러로 작업하여 이미지화일로 자신의 블로그에 올리기) 중간발표 공지 : 1. 자신의 포트폴리오 사이트 html 까지 작업 2. 자신이 만들고자 하는 웹사이트에 대한 사이트 디자인 기획서 + 메인 디자인 이미지

1. HTML & 드림위버 CS4 교재 part 3 이미지와 멀티미디어 개체 사용하기 까지 실습 해볼것 2. 자신의 블로그에 자신의 웹포트폴리오 사이트에 대한 기획서 작성 - 자신의 포트폴리오에 담고 싶은 결과물들을 프린트하여 친구들 3명이상에게 보여주고 어떻게 포트폴리오 사이트를 만들면 좋을지에 대한 의견을 구한다. - 친구들의 의견을 요약하여 포스트하고 자신의 포트폴리오 사이트에 대한 기획서를 아래내용을 포함하여 작성한다. -- 사이트 명 -- 사이트 목적 -- 타겟 사용자 (1차, 2차) -- 사이트 범위 : 사이트에 담고자 하는 컨텐츠에 대한 정리 3. 자신의 웹포트폴리오를 만들기위한 유명 디자이너들의 포트폴리오 사이트 벤치마킹하기 ==> 이건 2주에 걸쳐 실시 - 자신의 블로그에 멋지다고 생각되..

1. 이름, 이메일주소, 블로그나 홈페이지 주소 URL을 여기에 댓글로 달기 2. 자신이 만들고 싶은 아니면 잘만들었다고 생각하는 웹사이트를 찾아서 URL을 블로그에 적고, 거기에 누가 만들었는지, 어떻게 만들었는지를 조사해서 글로 쓸것 3. HTML 을 설명한 1장을 읽어보고 HTML 화일을 블로그에 연결해서 올려볼것(파일로 첨부- 다양한 방법을 시도해 볼것... 단 HTML 태그를 외우도록 노력할것) 교재 : 웹페이지 제작을 위한 HTML 드림위버 CS4 저자" 함호종, 조양현, 김성욱 지음 혜지원 출판 http://www.yes24.com/24/goods/3591748?scode=032&srank=1 수업시간에 보연준 서적들 주교재 : Beautiful Web Design 뷰티풀 웹 디자인 : 좋아..

웹디자인 수업 첫수업이 다음주 월요일 3월 8일에 있습니다. 추가로 수강하실 분들 우선 수업에 들어와 주세요. 김은혜 조교에게 증원신청할 예정입니다. 김조교에게 물어본뒤 다시 업데이트 포스팅 하겠습니다.