Photoshop 및 jQuery를 사용하여 이미지 슬라이더를 만드는 방법

의심 할 여지없이, 이미지 슬라이더는 비즈니스 웹 디자인에서 가장 일반적으로 사용되는 요소 중 하나입니다. 상대적으로 큰 크기로 인해 사이트에 도착하면 방문자의 관심을 끌 수 있습니다. 비록 웹이 이미지 슬라이더의 유용성에 대해 재고하기 시작했지만, 웹 디자인 업계의 새로 온 사람들에게 반드시 배워야 할 것으로 간주됩니다.

이 웹 디자인 자습서에서는 Photoshop을 사용하여 위의 마지막 이미지를 미리 볼 수있는 사용자 정의 이미지 슬라이더를 만드는 방법을 배웁니다. Photoshop에서이를 설명 할뿐만 아니라 HTML / CSS로 변환하고 멋진 슬라이딩 효과로 jQuery를 추가하여 기능적 디자인으로 전환합니다..

복잡한 비트가 많이 들리는 것처럼 들리지만 실제로는 이해하기 쉽고 이해하기 쉽습니다. 시작해 보겠습니다.!

이미지 슬라이더를 채택하고 그 과정에서 커스터마이징하는 것에 대해 더 관심이 있으십니까? 다음은 나와 관련된 게시물입니다..

이미지 슬라이더 : 23 개의 jQuery 슬라이더
이미지 슬라이더 : 18 WordPress Plugins

시작하기

이 자습서에서는 다음과 같은 리소스가 필요합니다.

26 PSDfreemium의 반복 가능한 픽셀 패턴.
jQuery 라이브러리
Nivo 슬라이더 플러그인
모더니즈
VandelayPremier에서 발견 된 종이 텍스처
(대안) 13 HQ 오래된 종이 텍스처 overdosse
Rinjani Ciaciya 제작 :
Stupa by Agnes Sim
Nino Satria의 탈리
Timo Balk의 오퍼링
Uluwatu-Bali by Aris Wjay

1 부 - 이미지 슬라이더 설계

1 단계 : 배경 설정

먼저 크기가 1000 x 700px 인 새 파일을 만듭니다. 배경을 색 # efc89e로 채 웁니다..

PSDfreemium의 자유 픽셀 패턴을 사용하여 패턴 오버레이 추가.

2 단계 : 슬라이더베이스

사각형 도구 활성화. 크기 940 × 450 픽셀의 직사각형을 만듭니다. 어떤 색깔이라도 사용할 수 있습니다. 중요하지 않습니다..

레이어 스타일 대화 상자를 열려면 레이어를 두 번 클릭하십시오. 레이어 스타일 그림자, 외부 광선 및 획 추가.

이것이 결과입니다. 슬라이더베이스에는 부드러운 그림자가있는 멋진 프레임이 있습니다..

3 단계

사진을 추가하고 슬라이더베이스 위에 놓습니다. Ctrl + Alt + G를 눌러 클리핑 마스크로 변환하고 슬라이더에 사진을 삽입하십시오..

4 단계 : 리본

리본으로 사용할 색상 # f4e1ae로 직사각형 모양을 그립니다..

도형 레이어를 두 번 클릭하고 다음 설정을 사용하여 경사 및 엠 보스, 그래디언트 오버레이 및 패턴 오버레이를 활성화합니다..

레이어 스타일을 추가 한 후의 결과입니다..

5 단계

보다 현실적인 리본을 만들기 위해 종이 텍스처를 추가합시다. 리본 모양 위에 텍스처를 배치합니다. Ctrl + Alt + G를 눌러 클리핑 마스크로 변환하십시오..

6 단계

리본 위에 그림자와 하이라이트를 칠해 봅시다. 리본 위에 새 레이어를 만듭니다. 리본 아래 부분에 검은 색을 칠합니다. 클리핑 마스크 (Ctrl + Alt + G)로 변환 한 다음 불투명도를 10 %로 낮추십시오..

7 단계

이전 단계를 리본 상단으로 반복합니다. 그러나 이번에는 흰색 페인트로 강조 표시를 추가 한 다음 불투명도를 50 %로 낮 춥니 다..

8 단계 : 스티치

연필 도구를 활성화하십시오. F5 키를 눌러 브러시 설정을 엽니 다. 브러시 크기를 1 픽셀로 설정하고 미리보기 영역에 점선이 나타날 때까지 간격을 늘립니다..

9 단계

리본 위에 1 px 검정색 선을 그립니다. 불투명도를 20 %로 감소시킵니다. Ctrl + J를 눌러 레이어를 복제합니다. Ctrl + I를 누르면 색상이 반전됩니다. 불투명도를 50 %로 증가시킵니다. 이동 도구를 활성화 한 다음 아래쪽 화살표와 왼쪽 화살표를 한 번 눌러 미세 이동합니다.

100 % 배율로 보는 결과입니다..

10 단계

이 과정을 반복하여 리본의 다른면에 다른 스티치를 그립니다..

11 단계 : 화려한 모양 추가

전경색을 회색으로 설정하십시오. 화려한 모양을 그리려면 크기 1 x px의 부드러운 브러시를 사용하십시오. 창조적 인 당신은 당신이 좋아하는 모양을 사용할 수 있습니다. 그 옆에있는 1 px 라인을 그린 다음 부드러운 지우개 도구를 사용하여 바깥 쪽 가장자리를 지 웁니다. 선을 복제하고 수평으로 뒤집은 다음 다른면에 배치합니다..

12 단계

모든 고급 레이어를 선택하고 Ctrl + E를 눌러 한 레이어로 병합합니다. 모양을 복제 한 다음 원래의 화려한 모양 아래에 배치합니다. Ctrl + I를 눌러 색상을 바꿉니다. 이동 도구를 활성화 한 다음 아래쪽 화살표를 한 번 눌러 뾰족하게 1 픽셀 아래로 이동합니다..

13 단계 : 사진 정보

리본 안에 사진 데이터 입력.

스텝 14 : 네비게이션

다음으로 슬라이드 탐색을위한 원을 그립니다. 리본의 아래 부분에 # 8d877c 색상으로 원 모양을 그립니다..

다음 설정을 사용하여 내부 그림자 추가.

이것이 결과입니다. 원이 이제 얕은 구멍으로 바뀌고 있습니다..

15 단계

Alt 키를 누른 상태에서 원 모양 레이어를 드래그하여 복제합니다..

16 단계

이 링크 중 하나에서 활성 조건을 설정해 보겠습니다. 원 중 하나를 선택하고 # bebbb5로 색상을 변경하십시오. 내부 그림자, 그라디언트 오버레이 및 획 추가.

17 단계

Ctrl 키를 누른 채로 레이어 패널에서 리본 기본 축소판을 클릭합니다. 리본 아래에 새 레이어를 만들고 검정색으로 채 웁니다. 이동 도구를 활성화하고 왼쪽 및 아래쪽 화살표를 몇 번 누릅니다..

18 단계

가우시안 블러 필터를 사용하여 부드럽게합니다. 필터> 흐리게하기> 가우시안 흐림 효과를 클릭하십시오..

19 단계

슬라이더 프레임 레이어 위에 리본 그림자를 배치합니다. Ctrl + Alt + G를 눌러 클리핑 마스크로 변환하십시오..

20 단계

그림자 불투명도를 40 %까지 줄입니다..

21 단계

배경에 리본 그림자를 페인트합니다. 불투명도를 20 %로 줄입니다..

22 단계

펜 도구를 사용하여 리본의 일부분을 그립니다. 색상을 # b68f63으로 설정하십시오. 슬라이더 뒤에 놓습니다..

이것은 100 % 배율로 보는 결과입니다..

23 단계

방금 만든 모양을 복제하여 리본의 맨 뒤에 배치하십시오. 수직으로 뒤집기.

24 단계 : Photoshop의 최종 결과

이것이 Photoshop의 최종 결과입니다. 다음으로, 우리는 그것을 기능 슬라이더로 계속 코딩 할 것입니다..

2 부 - HTML / CSS로 변환

25 단계 - 파일 설정

새 폴더 만들기 내 사진 - 슬라이더. 이 폴더 안에 빈 HTML 문서를 새로 만듭니다.index.html), 빈 스타일 시트 (style.css), 이미지 폴더 (img). 우리는 또한 폴더에 jQuery 라이브러리와 Nivo Slider 플러그인을 포함시켜야합니다. HTML5 마크 업을 사용할 때 Internet Explorer 8 이하에서 HTML5 요소를 사용하려면 IE 해킹을 추가해야합니다. 우리는 Modernizr이라는 스크립트를 사용하여 IE를 수용 할 것입니다..

26 단계 - 기본 HTML 마크 업

열다 index.html 좋아하는 코드 편집기에서. 정의 DOCTYPE (HTML5 사용), 머리 요소 (여기에는 문서의 제목을 추가하고 CSS와 JavaScript (jQuery Library, Nivo Slider 및 Modernizr)를 연결합니다. div 래퍼 (레이아웃을 가운데 정렬), 머리글 요소 및 슬라이드 래퍼.

      내 사진 슬라이드

27 단계 - 슬라이스 PSD

PSD 모형을 열고 필요한 모든 이미지를 잘라냅니다. 사진을 보려면 sxc.hu에서 다음 사진을 가져 오십시오 (로그인 필요, 계정이없는 경우 무료로 신청할 수 있음). 모든 이미지의 크기를 920 × 430 픽셀로 조정하십시오. 모든 이미지를 이미지 폴더에 넣으십시오 (img).

Rinjani Ciaciya 제작 :
Stupa by Agnes Sim
Nino Satria의 탈리
Timo Balk의 오퍼링
Uluwatu-Bali by Aris Wjay

28 단계 - 헤더 생성

다음 코드를 사이에 추가하십시오.

과

  내 사진 슬라이드

이제 헤더에 스타일을 추가해 보겠습니다. 또한 본문 및 래퍼 요소의 스타일을 추가합니다. 모든 스타일을 스타일 시트에 넣기, style.css.

 / * 기본 스타일 * / body background : 투명한 URL (img / bg.jpg); 글꼴 : 15px / 2 'Adobe Caslon Pro', 조지아, 세리프; margin : 0; 패딩 : 0;  개요 : 0 없음 #pagewrap margin : 120px auto; 패딩 : 0; 위치 : 상대적; 높이 : 100 %; 너비 : 960px;  header display : 블록; float : 오른쪽; margin-right : 40px; 너비 : 192px; Z 지수 : 52; 위치 : 상대적;  h1 배경 : 투명한 URL (img / separator.png) 반복 반복 없음; / * 제목 아래에 구분선을 추가하십시오. * / font-size : 18px; font-weight : bold; 높이 : 70px; 선 높이 : 1.1; 여백 : 55px 10px 0; 텍스트 정렬 : 가운데; 텍스트 변환 : 대문자;

29 단계 - 사진 슬라이더 추가

이제 문서의 주요 부분 인 사진 슬라이더에 코드를 추가 할 것입니다. 먼저 사진을 추가합시다. 다음 코드를 사이에 배치하십시오.

과

그런 다음 리본과 사진 캡션을 추가하십시오..

 
  사진 작가 :
 엔리코 누니 아티
 위치:
 나미 브 사막
 모델:
 데드 블레 이는
 날짜:
 2011 년 3 월 18 일 
  사진 작가 :
 리나 더햄 마나리
 위치:
 인도네시아 롬복 섬
 모델:
 린자 니 산
 날짜:
 2008 년 5 월 8 일 
  사진 작가 :
 아그네스 심
 위치:
 인도네시아 보로부두르
 모델:
 빅 스투파
 날짜:
 2008 년 6 월 12 일 
  사진 작가 :
 니노 사 트리아
 위치:
 타만 사파리 인도네시아
 모델:
 탈리 기린
 날짜:
 2009 년 8 월 16 일 
  사진 작가 :
 티모 보크
 위치:
 Bali, Ubud, Indonesia
 모델:
 오퍼링
 날짜:
 2009 년 12 월 20 일 
  사진 작가 :
 Aris Wjay
 위치:
 울루와 투 - 발리
 모델:
 아름다운 해변
 날짜:
 2011 년 7 월 20 일

이제 우리가 열면 index.html 브라우저에는 다음과 같은 것이 있습니다.

30 단계

CSS를 사용하여 슬라이더의 모양을 수정해야합니다..

 #slidewrap position : absolute; #slider 위치 : 상대적; 높이 : 자동; 너비 : 920px; 국경 : 10 픽셀 단색 #fff; box-shadow : 0 0 5px # 444; 여백 : 10px;  .lib 배경 : 투명한 URL (img / info-bg.png) no-repeat; 높이 : 482px; 너비 : 192px; 위치 : 절대; 오른쪽 : 40px; 상단 : -3px; z- 색인 : 50;  #slider img 위치 : 절대; 상단 : 0 픽셀; 왼쪽 : 0px; 표시 : 없음;

이것은 우리가 지금 가지고있는 것입니다..

현재, 우리는 Nivo 슬라이더 플러그인을 연결 시켰지만 우리는 스크립트를 연결하지 않았습니다. 이 JavaScript 함수를 다음과 같이 추가하여 스크립트를 연결해 봅시다. 과 요소.

31 단계 : 슬라이더 스타일

마지막 단계는 슬라이더의 스타일을 추가하는 것입니다..

 / * Nivo 슬라이더 스타일 * / .nivoSlider 위치 : 상대적;  .nivoSlider img 위치 : 절대; 상단 : 0 픽셀; 왼쪽 : 0px;  / * 이미지가 링크로 감싸는 경우 * / .nivoSlider a.nivo-imageLink position : absolute; 상단 : 0 픽셀; 왼쪽 : 0px; 너비 : 100 %; 높이 : 100 %; border : 0; 패딩 : 0; margin : 0; z- 색인 : 6; 표시 : 없음;  / * Slider의 슬라이스와 상자 * / .nivo-slice display : block; 위치 : 절대; z- 색인 : 5; 높이 : 100 %;  .nivo-box 디스플레이 : 블록; 위치 : 절대; z- 색인 : 5;  .nivo-directionNav display : none! important .nivo-html-caption display : none;  .nivo-caption 위치 : 절대; 오른쪽 : 20px; 텍스트 정렬 : 가운데; 상단 : 130px; 너비 : 192px; z- 색인 : 60;  .nivo-caption p margin : 0 .nivo-caption .title font-style : italic .nivo-controlNav 위치 : 절대; 하단 : 10px; 오른쪽 : 20px; 높이 : 15px; 너비 : 192px; 텍스트 정렬 : 가운데; 디스플레이 : 블록; z- 색인 : 51;  .nivo-controlNav a 배경 : 투명한 URL (img / button.png) 반복 없음 가운데 중심; 디스플레이 : 인라인 블록; 높이 : 14px; 너비 : 14px; 텍스트 들여 쓰기 : -9999px; 커서 : 포인터;  .nivo-controlNav .active background : 투명한 URL (img / button_active.png);

최종 결과 + 다운로드

이것이 우리의 최종 결과입니다. 여기를 클릭하면 작업 데모를 볼 수 있습니다..

특정 단계를 달성 할 수 없습니까? 다음은 PSD 파일 및 테스트 및 게임을위한 완벽한 프로젝트입니다..

이미지 슬라이더 자습서 PSD 파일
이미지 슬라이더 자습서 전체 프로젝트