자신의 손으로 Photoshop에서 포트폴리오를 만드는 방법. 간단하고 명확한 포트폴리오 레이아웃을 만듭니다.

22.07.2019

포트폴리오는 원래 예술 작품 모음으로 구상되었습니다. 작가의 예술적 발전을 강조하기 위해 최고의 작품이 선정되었습니다. 교육 포트폴리오에는 학습의 대표성과 진행 상황을 반영하는 두 가지 목적이 있습니다. 1학년 학생을 위한 포트폴리오를 만드는 방법을 알아봅시다.

학생의 포트폴리오는 무엇입니까?

효과적으로 사용되고 있는 새로운 수행 평가 도구는 학생 포트폴리오입니다. 올바르게 생성하려면 먼저 목표를 결정해야 합니다. 그리고 포트폴리오를 어떻게 사용할 계획인지와도 관련이 있어야 합니다. 예를 들어, 장기간에 걸쳐 학생의 성과와 특정 기술 숙달을 진단합니다.

포트폴리오를 만드는 과정에는 학생의 참여가 꼭 필요합니다. 귀하와 귀하의 자녀가 그 안에 무엇이 포함될 것인지 선택하는 것이 중요합니다. 물론 포트폴리오에는 필수 항목이 여러 개 있어야 하지만, 학생이 마음대로 2~3개 부분을 선택할 수 있습니다.

학생을 위한 포트폴리오를 올바르게 만드는 방법은 무엇입니까? 원칙적으로 의무적인 공식 모델은 없습니다. 우리의 경우에는 추구하는 목표에 따라 포트폴리오를 두 부분으로 나눌 수 있습니다.

첫 번째는 형식적인 구조의 섹션입니다. 여기에는 학생에 대한 일반적인 정보가 포함되며, 해당 평가와 함께 교육 과정에 관한 모든 의견과 지침도 수집할 수 있습니다. 여기에는 추가 교육 활동에 대한 제안을 나타내는 교사와 학부모 간의 상호 작용 결과를 표시할 수도 있습니다. 이 섹션에는 학생의 과외 활동 경험에서 얻은 중요한 결과도 기록될 수 있습니다.

비공식 부분에서는 학생의 개별 작업이나 그룹 수업 결과, 중요한 학교 시험에서 자료를 수집할 수 있습니다.

포트폴리오 구성은 일회성 과정이 아닌 누적 과정입니다. 이는 투명한 구조의 폴더가 많이 포함된 바인더일 수 있습니다. 초등학교의 포트폴리오는 4년 전체에 걸쳐 통일되거나 4권(학년도용 1권)으로 구성됩니다.

1학년을 위한 포트폴리오를 직접 만드는 방법을 알아보려면 계속 읽어보세요.

Photoshop에서 포트폴리오 만들기에 대한 마스터 클래스

Photoshop을 사용하여 자신의 손으로 학생용 포트폴리오를 만드는 방법을 살펴 보겠습니다.

우리는 그것을 만들 기회가 많습니다. 첫째, 서점에서 기성 템플릿을 간단히 구입할 수 있습니다. 그런데 자료를 저장하기 위한 투명 파일이 포함된 폴더도 구입해야 합니다. 둘째, 인터넷에는 모든 취향과 색상에 맞는 매우 다양한 포트폴리오 템플릿이 있습니다. 당신이 해야 할 일은 그것을 컴퓨터에 다운로드하고 인쇄하는 것뿐입니다.

세 번째 옵션은 창의적입니다. 잘 알려진 포토샵을 사용하면 상상한 대로 나만의 포트폴리오를 만들 수 있습니다. 이렇게 하려면 먼저 Word에서 포트폴리오를 준비해야 합니다. 즉, 필요한 모든 섹션과 하위 섹션을 만든 다음 레이아웃으로 전송해야 합니다.

절차:

이전에 인터넷에서 다운로드했거나 직접 만든 빈 포트폴리오 페이지 템플릿을 Photoshop에서 엽니다.
레이아웃의 "직선 올가미" 도구를 사용하여 텍스트를 입력할 영역을 선택하고 작업 경로를 형성합니다.
가로 텍스트 도구를 사용하여 원하는 대로 글꼴을 사용자 정의합니다. 그런 다음 Word 문서에서 관심 있는 텍스트를 복사하여 레이아웃에 붙여넣습니다. 다음으로, 글꼴 메뉴를 사용하여 제목을 편집하고 텍스트 서식을 아름답게 지정하세요.
레이아웃의 다음 페이지에 디지털 사진을 삽입합니다. "배치" 메뉴를 사용하여 필요한 사진을 선택하고 원하는 크기로 래스터화한 다음 레이아웃 페이지에 삽입합니다. 옆에 있는 사진을 둘러싸는 텍스트를 배치하려면 2단계와 3단계를 반복해야 합니다.
완성된 페이지는 포트폴리오를 생성한 폴더에 '다른 이름으로 저장' 메뉴를 사용하여 저장합니다.

성공적인 포트폴리오의 비밀

포트폴리오 작성을 시작하기 전에 자녀에게 소개 브리핑을 주고 다음 사항을 설명해야 합니다.

포트폴리오를 유지한다는 것은 성취를 추구하고 실패에 실망한다는 것을 의미하지 않습니다. 여기에서도 스포츠와 마찬가지로 가장 중요한 것은 참여입니다. 결과를 얻으려면 노력해야하지만.
포트폴리오를 유지하는 데 있어서 친구를 모방해서는 안 됩니다. 창의적인 접근 방식, 상상력, 정확성이 필요합니다. 개성을 키워야 합니다.
작은 성공이라 할지라도 성공을 즐기는 법을 배우는 것이 중요합니다.
기분이 좋지 않은 상태에서 포트폴리오를 작성해서는 안됩니다.

완성된 초등학생 포트폴리오: 샘플 작성

포트폴리오는 제목 페이지와 함께 열립니다. 여기에는 개인 정보가 표시되고 1학년의 사진이 배치됩니다. 이제 각 섹션을 자세히 살펴보겠습니다.

"내 주변의 세계". 이 섹션에서는 다음 정보를 배치할 수 있습니다.

자신과 이름, 가족에 대한 이야기
친한 친구에 대해;
취미의 세계;
귀하의 인상과 모험에 대해;
집과 학교에 대해.

"나의 임무와 목표":

미래 지향적인 커리큘럼;
과외 활동 - 스포츠, 클럽, 섹션.
"사회 사업":
완료된 주문에 대한 정보
학교 공동체 생활 참여에 관한 정보.

"업적". 이 섹션에서는 개인 성취의 진행 상황을 더 쉽게 추적할 수 있도록 자료를 시간순으로 배치해야 합니다.

최고의 창작물;
교사로부터의 긍정적인 피드백;
졸업장 및 상;
학교 올림피아드 및 대회 참가.

“학습 자료”:

저작물(주제별로 배포 가능)
중요한 테스트 결과.
“선생님과 학부모의 상호작용”:
추가 교육 활동에 대한 제안;
행동 규율에 관한 정보.

자신의 손으로 포트폴리오를 만들겠다는 목표를 설정했다면 Photoshop, Gimp 등의 그래픽 편집기를 사용해야 할 필요성에 직면하게 될 것입니다. 모든 사람이 이러한 프로그램을 사용하는 방법을 아는 것은 아닙니다. 이 문제로 인해 이 기사를 작성하게 되었습니다.

일할 때 학교의 요구 사항을 고려해야 하며 동시에 학생(미취학 아동)이 원하는 문서를 작성해야 한다는 점은 언급할 가치가 없을 것입니다.

미리 만들어진 템플릿을 받으면 자녀를 위해 직접 디자인할 수 있습니다. 이를 위해서는 아래에 제공할 정보만으로 충분합니다.

물론 그래픽 편집자와 처음 작업하는 경우 작업을 완료하는 데 시간과 인내가 필요합니다. 또한, 최종 결과는 원래 계획했던 것과 약간 다를 수 있지만, 아이의 개성이 반영된 포트폴리오를 직접 만들어 볼 수 있는 기회도 있습니다.

물론 기성 템플릿은 개별 접근 방식을 다소 제한하지만 이를 통해 독특한 작업을 만들 수 있으며 처음부터 포트폴리오를 만드는 것보다 시간과 노력이 훨씬 적게 듭니다.

시작하기 전에 반드시 선생님에게 포트폴리오 내용에 대해 문의하세요. 그런 다음 작업할 템플릿을 선택합니다.

그럼 알아봅시다...

자신의 손으로 포트폴리오를 만드는 방법

업무를 위해서는 여기에서 "Sea Expanses" 템플릿을 사용하세요.

동일한 방식으로 다른 템플릿으로도 작업할 수 있습니다. 제목 페이지 작성을 예로 사용하겠습니다.

1. Photoshop에서 제목 페이지를 엽니다. 그 위에 놓을 사진을 엽니다. 작업 중인 사진과 시트를 눈앞에서 볼 때 가장 편리합니다. Photoshop에서 "이동" 도구(빨간색 원으로 강조 표시됨)를 선택하고 사진을 마우스 왼쪽 버튼으로 클릭한 다음 마우스 버튼을 놓지 않은 채 사진을 템플릿으로 드래그합니다(이미지 1과 2 참조, 사진을 클릭하면 확대됩니다). ).

그것은 당신에게도 효과가 있을 것입니다. 사진이 프레임 안에 들어가려면 사진을 프레임 아래로 이동해야 합니다. 이렇게 하려면 첫 번째 레이어(빨간색 원으로 강조 표시됨)를 마우스 왼쪽 버튼으로 클릭하고 마우스 버튼을 누른 상태에서 이 레이어를 제목 페이지가 있는 레이어 아래로 드래그합니다. 다음과 같아야 합니다.

프레임 아래의 사진을 이동하여 가장 적합한 위치를 얻을 수 있습니다.

사진이 프레임 크기에 맞지 않을 수 있습니다. 이 상황을 해결하기 위해 Photoshop 그래픽 편집기에는 크기 조정 도구가 있습니다. 나는 다음과 같은 간단한 기술을 사용합니다.

사진을 확대하거나 축소하려면 해당 레이어가 활성화되어 있는지 확인한 다음 키보드 단축키 Ctrl + T를 누르십시오. 또는 "편집" 메뉴에서 "자유 변형" 기능을 찾아 선택하십시오. 그런 다음 키보드의 Shift 버튼을 누른 상태에서 사진 모서리를 끌어 확대하거나 축소합니다. "Shift"를 잊지 마세요. 그렇지 않으면 이미지가 왜곡됩니다.

2. 그래서 사진을 삽입했습니다. 이제 텍스트를 삽입해야 합니다. 이 경우 제목 페이지에 서명하십시오. 이렇게 하려면 그래픽 편집기에서 "텍스트" 도구(빨간색으로 강조 표시됨)를 선택하고 템플릿 줄에 마우스 커서를 놓고 학생의 성, 이름 및 부칭을 작성합니다. 이 경우에는 Times New Roman 기울임체 글꼴을 사용하고 있습니다. 색상과 글꼴을 선택할 수 있습니다. 레이어가 올바르게 배치되었는지 확인하세요. 이는 텍스트가 제목 페이지가 있는 레이어 위에 위치해야 한다는 점에서 중요합니다.

시트가 준비되면 jpg 형식으로 저장하는 것을 잊지 마십시오. 이는 시트 인쇄에 필요한 형식입니다.

포트폴리오를 작성할 때 Photoshop에 새 글꼴을 설치해야 하는 경우 설치 방법을 읽어보세요.

이렇게 하면 완성된 포트폴리오 템플릿의 모든 시트를 채울 수 있습니다. 궁금하신 점은 댓글로 남겨주시면 확실히 답변해드리겠습니다.

집에서 컬러 프린터로 초등학생(미취학 아동)을 위해 완성된 포트폴리오를 인쇄할 수 있습니다. 이를 위해서는 인화지를 사용하는 것이 좋습니다. 그러나 가장 좋은 방법은 사진관이나 인쇄소에서 인쇄물을 주문하는 것입니다. 품질이 더 좋고 가격도 저렴합니다.

사진관에 가느라 시간을 낭비하고 싶지 않은 사람들에게는 Netprint 서비스가 유용할 것입니다. 적절한 A4 형식을 선택하면 포트폴리오 인쇄를 주문하고 완성된 시트를 우편으로 기다리거나 픽업할 수 있습니다. 가장 가까운 픽업 지점에서.

웹사이트에서 찾을 수 있는 템플릿은 해상도와 형식이 A4 용지 인쇄에 이상적이므로 품질을 확인할 필요가 없습니다.

최종 결과:

이 튜토리얼에서는 간단하고 미니멀한 Instagram 기반 포트폴리오를 만드는 방법을 배웁니다. 눈에 띄는 효과, 깔끔한 색상 팔레트, 부드러운 글꼴을 사용하겠습니다. 먼저, 이 강의에서는 웹 버전을 만드는 방법을 설명한 후 모바일 장치에 맞게 포트폴리오를 빠르게 조정할 수 있습니다.

수업자료

수업 내용을 따라가려면 다음 자료가 필요합니다(모두 무료).

Unsplash의 산 사진
Font Squirrel이 포함된 Kaushan 스크립트 글꼴
Font Squirrel이 포함된 Lato 글꼴
Iconfinder의 소셜 미디어 아이콘
Unsplash의 사진
레페의 사진

문서 준비

1 단계

메뉴를 통해 새 Photoshop 문서를 만드는 것부터 시작해 보겠습니다. 파일 > 새로 만들기...(파일 > 새로 만들기...) 아래 설정을 사용합니다. 인터넷에는 고정된 너비가 없기 때문에 원하는 크기를 설정할 수 있습니다.

해상도가 다음으로 설정되어 있는지 확인하세요. 72픽셀/인치.

2 단계

이제 문서에 충분한 공간이 있고 균형 있게 보이도록 몇 가지 안내선을 추가해 보겠습니다. 저는 항상 그리드를 사용하지는 않지만 몇 가지 가이드를 사용하면 작업을 깔끔하게 유지하고 사이트의 너비를 정의하는 데 도움이 될 것입니다. 메뉴로 이동 보기 > 새 가이드...(보기 > 새 가이드...) 그리고 몇 줄을 만듭니다. 나는 보통 사용한다 1000px사이트의 너비와 모서리에 가이드를 추가하여 사이트에 여유 공간을 확보합니다.

메모: 이 튜토리얼의 가이드 - 수직 100px, 600px그리고 1100px.

조언: Photoshop 플러그인을 사용할 수도 있습니다. 가이드가이드프로세스 속도를 더욱 높이기 위해.

3단계

Photoshop Etiquette에 따르면 모든 것이 정리되어 있어야 하며 보고 편집할 수 있도록 쉽게 접근할 수 있어야 합니다. 다음과 같은 세 개의 레이어 그룹을 만들어 보겠습니다. 표제, 사진그리고 콘택트 렌즈. 그룹을 만들려면 다음으로 이동하세요. 레이어 > 새로 만들기 > 그룹...(레이어 > 새로 만들기 > 그룹...) 각 그룹에 위에 표시된 이름을 지정합니다. 특정 그룹으로 빠르게 이동하려면 아이콘을 클릭하기만 하면 됩니다.

제목 작업중

헤더 영역은 사용자를 나머지 콘텐츠로 끌어들이고 필요한 조치를 취하지 않고 페이지를 떠나지 않도록 하는 데 매우 중요한 역할을 합니다. 이 포트폴리오에서는 멋진 산 사진과 간단한 메시지를 사용하여 모험과 도전을 묘사할 것입니다.

1 단계

먼저 사이트의 배경을 만들어 보겠습니다. 헤더 폴더에서 원하는 색상의 직사각형을 그립니다. 내 경우에는 크기가 있는 직사각형을 그렸습니다. 1200x600px그리고 문서 상단에 배치합니다.

이제 산 사진을 다운로드하여 Photoshop 문서에 배치하고 직사각형 레이어 위에 배치합니다. 레이어 이름을 IMG와 같이 의미 있는 이름으로 바꿉니다. 그 후 계속 버튼을 눌러주세요 Alt을 클릭하고 아래쪽 화살표가 있는 포인터가 나타날 때까지 포인터를 IMG 레이어 아래쪽으로 이동한 다음 마우스 왼쪽 버튼을 클릭합니다. 방금 생성하셨습니다. 클리핑 마스크. 이제 클릭하세요 Ctrl+T필요에 맞게 사진 크기를 조정하세요.

조언: 버튼을 누르고 있어 옮기다이면 변환은 비례하게 됩니다.

2 단계

사진을 더욱 생생하고 기억에 남도록 만들기 위해 몇 가지 조정을 추가해 보겠습니다. 새 레이어를 만들고 이름을 지정하세요. 그림자, 만들다 클리핑 마스크(클리핑 마스크) 산 사진의 마지막 단계와 같습니다. 그 후 도구를 선택하십시오 구배(그라디언트 도구), 검정색에서 그라디언트 색상을 설정합니다. #000000 에게 투명한. 버튼을 누른 상태에서 옮기다,이미지 하단에서 가운데로 그라디언트를 드래그합니다. 이제 줄이세요 불투명(불투명도) 그라데이션 업 60% .

저는 보통 이 기술을 사용하여 밝은 이미지를 어둡게 한 다음 그 위에 흰색 텍스트를 배치합니다.

3단계

이제 머리글에 색상을 조금 더 추가하여 눈에 띄게 만들 수 있습니다. 새 레이어를 만들고 이름을 지정하세요. 구배을 누른 다음 도구를 선택하세요. 구배(그라디언트 도구). 그 후 마젠타 색상을 설정 #37056b분홍색으로 #ff01fc(원하는 색상을 사용할 수 있습니다.) 이미지 왼쪽 상단에서 오른쪽 하단으로 그라디언트를 드래그하세요. 마지막으로 줄인다 불투명(불투명도) 최대 20% .

4단계

이제 포트폴리오 로고를 배치할 시간입니다. 도구 선택 가로 텍스트(가로 문자 도구) 사이트 이름을 적습니다. 이름이나 별명이 될 수 있습니다. 이 튜토리얼에서는 매우 세련된 글꼴을 사용했습니다. 카우샨 스크립트크기 21px. 첫 번째 세로 안내선 옆 문서 왼쪽 상단에 로고를 배치하세요. 놔둬 50px전문성과 깔끔함을 더해줍니다.

5단계

웹사이트 방문자가 귀하의 소셜 미디어 계정을 읽을 수 있도록 하는 몇 가지 소셜 아이콘을 추가해 보겠습니다. Iconfinder에서 Facebook, Twitter 및 Instagram 아이콘을 문서로 드래그하고 쉽게 알아볼 수 있도록 레이어 이름을 바꾼 다음 마지막 수직선 옆 오른쪽 상단에 배치합니다. 그런 다음 아이콘이 있는 레이어 중 하나를 마우스 오른쪽 버튼으로 클릭하고 혼합 옵션(혼합 옵션...)을 누른 다음 적용합니다. 컬러 오버레이(컬러 오버레이), 흰색 선택 #ffffff. 다른 아이콘에도 동일한 작업을 수행합니다.

아이콘 사이에 충분한 공간이 있고 로고와 수평으로 정렬되어 있는지 확인하세요.

6단계

이제 헤더 영역을 마무리하겠습니다. 우리는 아름다운 그림과 충분한 공간을 가지고 있습니다. 사용자가 사이트의 내용을 이해할 수 있도록 여기에 간단한 환영 메시지를 넣어 보겠습니다.

도구 선택 가로 텍스트 라토(블랙)크기 36px, 몇 마디 쓰세요. 이 경우에는 "HELLO! I"M JONATHAN"이라는 텍스트를 사용했습니다. 그 직후 새 줄에 자신이나 작업에 대한 다른 내용을 더 작은 글꼴로 작성합니다. 이 튜토리얼에서는 글꼴을 사용했습니다. 라토(일반)~의 크기 16px. 예시 텍스트: 저는 전 세계를 여행하며 아름다운 것을 디자인하는 것을 좋아합니다.

텍스트가 숨 쉴 수 있을 만큼 줄 높이가 충분한지 확인하세요. 마지막으로 제목 영역 중앙에 텍스트를 배치합니다.

포토존 작업중입니다

이 영역에서는 Instagram의 사진을 게시하여 작업 예를 보여주고 예술가나 디자이너의 전문성 수준을 보여줍니다.

1 단계

이 영역의 배경을 변경해 보겠습니다. 폴더 축소 표제그룹 이름 왼쪽에 있는 작은 화살표를 클릭한 다음 폴더를 엽니다. 사진. 이제 도구를 선택합니다 직사각형(사각형 도구), 밝은 회색 직사각형을 그립니다. 내 경우에는 색상을 사용했습니다. #에에에에에, 직사각형의 크기는 다음과 같습니다. 1200x880px.

2 단계

이제 작업을 설명하는 텍스트를 추가할 차례입니다. 이 예에서와 같이 "최신 작품" 또는 "최근 사진"과 같은 것일 수 있습니다. 텍스트를 읽을 수 있어야 하므로 색상을 사용했습니다. #9b9b9b글꼴 포함 라토(굵게)크기 12px. 글자 사이의 거리가 상당히 멀다는 점에 유의하세요( 270 ). 이는 영역 헤더의 스타일을 지정하는 데 사용되며 일반 텍스트에는 작동하지 않습니다. 원하는 거리를 설정한 후 텍스트를 다음 위치로 이동하세요. 80px사진에서 아래로.

3단계

엄청난! 이 단계에서 우리는 포트폴리오에 사진 몇 장을 추가할 것입니다. 새 그룹을 만들고 이름을 지정하세요. 사진. 그런 다음 각 행에 몇 장의 사진을 넣을지 결정해야 합니다. 나는 4개를 사용하기로 결정했기 때문에 표시하기 전에 계산을 좀 해야 합니다.

우리 사이트의 너비 1000px, 나누자그녀의 4 - 그것은 밝혀 250px각 사진마다 측면에 약간의 공간을 남겨두어야 합니다. 20px. 따라서 최종 이미지 너비는 (1000px-60px)/4=입니다. 235px.

도구 선택 직사각형(사각형 도구) 그런 다음 Shift 버튼을 누른 상태에서 치수가 포함된 정사각형을 그립니다. 235x235px. 그런 다음 Instagram 피드에서 사진을 선택하거나 다음에서 여러 장을 촬영하세요. unsplash.com그리고 getrefe.tumblr.com, Photoshop 문서로 드래그하여 직사각형 위에 배치합니다. 그런 다음 버튼을 누른 상태에서 Alt, 만들다 클리핑 마스크(클리핑 마스크) 및 사용 Ctrl+T, 사진 크기를 조정하고 원하는 대로 배치하세요.

4단계

이제 좋아요 수(이렇게 하면 포트폴리오가 더욱 사회화됨)와 간단한 설명을 추가할 수 있습니다. 새 레이어를 만들고 이름을 지정하세요. 그림자, 이미지 위에 배치한 다음 생성합니다. 클리핑 마스크(클리핑 마스크). 그 후 도구를 이용하여 구배(그라디언트 도구)에서 그라디언트 만들기 검은색에게 투명한이미 수업에서 했던 것처럼요. 이 모든 것을 줄이고 불투명(불투명도) 최대 60% .

도구 선택 가로 텍스트(가로 문자 도구) 글꼴 포함 몬세라트크기 15px. 출발 기한 15px이미지를 가리지 않고 텍스트가 "호흡"할 수 있도록 왼쪽과 아래쪽에 여유 공간을 둡니다.

그런 다음 도구를 선택하세요. 직사각형(사각형 도구)를 선택하고 사진 아래에 흰색 직사각형을 그립니다. 그 후 도구를 다시 선택하십시오. 가로 텍스트(가로 문자 도구)를 사용하고 해시태그와 날짜를 포함하여 Instagram에 사용된 사진에 대한 간단한 설명을 새 줄에 작성합니다. 이 블록의 글꼴은 다음과 같습니다. 몬세라트12px회색 #808080 그림 물감.

메모: 사용한 경우 들여쓰기가 일치하는지 확인하세요. 15px좋아요 옆에 설명을 위해 동일한 들여쓰기를 합니다.

5단계

사진 한 블록을 마쳤습니다. 이제 포트폴리오에 더 많은 사진을 추가할 차례입니다. 폴더 축소 사진를 눌러 복제하세요. Ctrl+J, 또는 폴더를 마우스 오른쪽 버튼으로 클릭하고 " 중복된 그룹" (그룹 복제). 그런 다음 필요한 수의 사진을 복제하여 그리드로 구성합니다. 제 경우에는 서로 다른 사진 블록 사이의 거리가 20px. 사진은 다음에서 촬영되었습니다. unsplash.com그리고 getrefe.tumblr.com.

우리는 접촉 영역을 작업 중입니다

여기에는 저작권 정보와 함께 간단한 메시지와 연락처 버튼을 넣어보겠습니다.

1 단계

폴더 축소 사진그룹 옆에 있는 작은 화살표를 클릭한 다음 폴더를 엽니다. 콘택트 렌즈. 그 후 도구를 선택하십시오 가로 텍스트(가로 문자 도구) 큰 글꼴을 사용하여 섹션 이름을 입력합니다(예: "GET IN TOUCH"). 상단에 충분한 공간을 확보한 다음 방문자의 행동을 유도하는 짧은 설명을 추가하세요. 색상을 사용했어요 #565d64폰트와 함께 라토(검은색)~의 크기 36px제목과 글꼴에 대해 라토(일반)16px설명을 위해 가져왔습니다.

2 단계

이제 클릭하면 특정 작업을 수행하는 버튼을 만들어야 합니다. 이 튜토리얼에서는 간단한 연락 버튼을 사용하겠습니다. 도구를 가져갔어 직사각형(사각형 도구)를 사용하여 간단한 도형을 그리고 그 위에 텍스트를 배치했습니다. 깔끔하고 균형있게 보이도록 버튼 위에 충분한 공간이 있는지 확인하세요.

3단계

마지막으로 포트폴리오 하단에 일반 저작권 라인을 만들어 보겠습니다. 이 작업을 수행하기 전에 도구를 선택하세요. 선(선 도구) 및 회색을 그립니다. #e0e0e0수평선 두께 1px전체 문서를 통해 90px아래 좌석. 줄 바로 뒤에 저작권 정보를 입력하세요. 이 경우에는 글꼴을 사용했습니다. 라토(굵게) 12px그림 물감 #9b9b9b글자 사이에 공백이 있는 270 .

이제 포트폴리오의 웹 버전 작업이 완료되었습니다! 이제 웹 버전을 모바일 버전으로 빠르게 전환하여 반응형 웹사이트 디자인을 만드는 방법을 배우게 됩니다.

우리는 모바일 버전으로 작업합니다

1 단계

새 문서를 만들고 권한을 다음으로 설정해 보겠습니다. 320x2100px. 3개의 수직 안내선을 만듭니다. 20px, 150px, 300px가장자리 주위에 약간의 공간을 남겨두고 베어링을 확보하십시오. 그런 다음 웹 버전 포트폴리오의 모든 그룹을 선택하고 새 문서의 탭으로 끌어다 놓습니다.

2 단계

이제 폴더를 열어보세요 표제, 로고를 찾은 다음 도구를 사용하여 움직이는(이동 도구)를 오른쪽 끝의 왼쪽 가장자리로 드래그합니다. 첫 번째 세로 안내선 옆에 로고를 그대로 둡니다. 다음으로 소셜 아이콘을 찾아 오른쪽으로 이동하세요.

3단계

이제 주요 부분을 조정할 차례입니다. 도구 선택 가로 텍스트(가로 문자 도구) 설명을 분할하고 기본 메시지의 글꼴 크기를 줄여 첫 번째 가이드와 세 번째 가이드 사이에 맞춥니다. 줄 높이 설정을 변경하면 계속할 수 있습니다.

4단계

그룹 열기 사진, 모바일 보기에서는 그다지 많은 공간이 필요하지 않으므로 "LATEST PHOTOS" 헤더를 맨 위로 이동하세요. 다시 그룹으로 이동 사진, 두 개의 수직 가이드 사이에 배치합니다. 그런 다음 그룹을 열고 직사각형 모양-배경 설명을 클릭하고 Ctrl+D크기를 다음으로 줄입니다. 280px. 사진의 모양에도 동일하게 수행하십시오. 완료되면 사진을 하나의 열로 구성하고 안내선 사이에 정렬하는 것을 잊지 마세요.

5단계

사진 섹션이 데스크톱 버전보다 훨씬 길기 때문에 배경을 조정해야 합니다. 사진 블록 배경이 있는 레이어를 선택하고 Ctrl+T크기를 변경하려면 하단에 공간을 남겨두고 길이를 길게 만드세요.

6단계

이제 텍스트가 안내선 사이에 깔끔하게 정렬되도록 핀 블록을 재구성해야 합니다. 그룹 열기 콘택트 렌즈, 도구를 사용하여 가로 텍스트(가로 문자 도구)는 이 블록의 텍스트를 나누어 안내선에 맞춥니다. 모바일 버전에서는 빈 공간이 많이 필요하지 않으므로 요소 위와 아래의 크기를 줄여야 합니다. 또한 텍스트의 줄 높이를 줄여 깔끔하고 전문적으로 보이도록 만드세요.

마지막 작업은 가이드 사이에 맞도록 저작권 텍스트를 분할하는 것입니다.

잘 했어! 최신 Instagram 기반 포트폴리오의 웹 및 모바일 버전을 만드셨습니다. 나는 당신이 새로운 것을 배웠기를 바라며, 당신이 배운 기술이 미래에 놀라운 디자인을 만드는 데 도움이 되기를 바랍니다.

이 기사에서는 작업을 선보일 간단하고 명확한 포트폴리오를 만드는 방법을 보여 드리겠습니다. 기본적인 Photoshop 도구와 기술을 사용하여 전문적인 느낌과 최적의 구조를 갖춘 레이아웃을 만들어 보겠습니다.

최종 이미지

소프트웨어:포토샵 CS3 이상.

자원

무료 Montserrat 글꼴

1 단계

먼저 Photoshop에서 새 문서를 만들어 보겠습니다. CMD/CTRL+N을 누르고 문서 너비를 1400px, 높이를 1630px로 설정합니다.

이제 레이아웃이 완벽하게 정렬되도록 안내선을 만들어 보겠습니다. 이동 보기 > 새 가이드 200px, 450px, 700px, 950px 및 1200px의 수직 지침을 설정하십시오.

2 단계

가이드를 설치하고 나면 레이아웃 개발을 시작할 수 있습니다. Top Nav라는 새 레이어 그룹을 만듭니다. 이렇게 하려면 다음으로 이동하세요. 레이어 > 새로 만들기 > 그룹또는 레이어 팔레트 하단에 있는 빠른 그룹 아이콘을 클릭하세요.

도구를 선택하세요 " 가로 텍스트” (T), 글꼴 Montserrat, 글꼴 크기 20px, 색상 파란색 #075dfb를 사용하고 포트폴리오 제목을 입력하세요. 첫 번째 수직 안내선 바로 뒤에 문자를 배치하고 상단에 약간의 공백을 남겨 둡니다. 제 경우에는 40px입니다.

그 후 레이어를 복제합니다( CMD/CTRL+J) 사본을 문서의 오른쪽으로 이동합니다. 동일한 도구를 사용하여 캡션을 입력하여 포트폴리오 섹션에 대한 링크를 나타냅니다. 아래 그림은 내가 이 작업을 수행한 방법을 보여줍니다.

3단계

그룹 이름 옆에 있는 화살표 아이콘을 클릭하여 상단 탐색 그룹을 축소하고 추천이라는 새 그룹을 만듭니다.

이동 레이어 > 새로 만들기 > 그룹또는 레이어 팔레트 하단에 있는 그룹 빨리 만들기 아이콘을 클릭하세요. 그런 다음 "직사각형" 도구(U)를 선택하고 첫 번째 안내선과 마지막 안내선 사이에 1000x574px 직사각형을 그립니다. 이동 도구(V)를 사용하여 이 모양을 탐색 링크 아래로 40픽셀 이동하여 요소 사이에 충분한 공간을 확보하고 깔끔하게 보이도록 합니다.

이제 직사각형을 채워야 합니다. 이를 위해 나는 내 사진 중 하나를 사용했습니다. 포트폴리오 배경으로 사용할 이미지를 선택하고 Photoshop으로 드래그하세요. 크기 조정 없이 직사각형의 전체 공간을 채울 수 있을 만큼 충분히 큰지 확인하세요.

이미지를 Photoshop으로 드래그한 후 직사각형 레이어 위에 놓고 Alt 키를 누른 채 이미지 레이어의 축소판을 클릭하세요. 결과적으로 아래쪽 화살표 아이콘이 나타납니다. 클릭하면 클리핑 마스크가 생성됩니다. 클리핑 마스크 내부의 모든 내용은 직사각형에 배치됩니다.

엄청난! 이제 이미지의 텍스트를 쉽게 읽을 수 있도록 이미지를 약간 어둡게 해야 합니다.

Shadow라는 새 레이어를 만들고 조금 더 일찍 했던 것처럼 마스크를 추가합니다. 그런 다음 "그라디언트" 도구(G)를 선택하고 그라디언트 전환을 검정색에서 투명으로 설정합니다. 아래 이미지에 표시된 값으로 그라디언트 옵션을 설정하십시오.

그런 다음 Shift 키를 누른 채 이미지 하단에서 상단까지 마우스로 선을 그리고 레이어 불투명도를 65%로 줄입니다.

새로 생성된 영역에 대한 제목을 만들어야 합니다. 도구를 선택하세요 " 가로 텍스트" (T), 다시 Montserrat 글꼴을 사용합니다. 글꼴 크기를 40픽셀, 색상 #FFFFFF로 설정하고 제공하는 서비스 범위를 설명하는 텍스트(3~5단어)를 입력하세요.

깔끔하게 보이도록 텍스트 주위에 공백을 두십시오. 일반적인 디자인 원칙을 따르기 위해 왼쪽과 아래쪽에 40픽셀의 공백을 남겨 두었습니다.

이제 방문자가 제공되는 서비스의 본질을 더 깊이 탐구하도록 유도하는 클릭 유도 버튼을 만들어야 합니다. "사각형" 도구(T)를 선택하고 212 x 46픽셀 크기의 직사각형을 그립니다.

직사각형의 각 측면에 40픽셀의 여유 공간을 남겨두고 이미지 오른쪽에 배치합니다( 하단에는 버튼을 제목과 수평으로 정렬해야 하므로 30픽셀의 패딩이 있습니다.):

도구를 다시 선택하세요. 가로 텍스트" (T), 글꼴 색상을 검정색 - #000000, 크기 - 14px로 설정하고 버튼 레이블을 입력합니다. 흰색 직사각형 안에 텍스트를 배치하고 중앙에 배치합니다.

4단계

이제 방문자가 귀하의 스타일에 대한 아이디어를 얻을 수 있도록 몇 가지 작업 예를 추가해 보겠습니다. 추천 그룹( 그룹 이름 옆에 있는 화살표 아이콘을 클릭하여) Work 라는 새 그룹을 만듭니다.

작업 예시 섹션에는 내 사진 몇 장을 사용했습니다. 사진을 Photoshop으로 드래그하고 이미지를 마우스 오른쪽 버튼으로 클릭하고 "를 선택하여 스마트 개체로 변환합니다. 스마트 개체로 변환" 그런 다음 CMD/Ctrl + T를 눌러 이미지 크기를 조정하세요.

사진의 크기를 313 x 235 픽셀로 설정하고 각각 두 장의 사진으로 구성된 세 열에 배치합니다. 상단과 하단에 40픽셀의 패딩을 남겨두고 이미지 사이와 측면에 30픽셀을 남겨두세요.

5단계

이것이 작업 예제 섹션의 전부입니다. 작업 그룹을 축소하고 바닥글이라는 새 그룹을 만듭니다. 직사각형 도구(U)를 선택하고 이미 사용한 채우기 색상으로 설정합니다( #075dfb) 문서 하단 부분의 대부분을 덮는 직사각형을 그립니다. 이것이 지하실의 배경이 될 것입니다.

그런 다음 이동 도구(V)를 사용하여 직사각형을 작업 예 아래로 40픽셀 이동합니다.

이제 바닥글에 대한 콘텐츠를 추가해야 합니다. 도구를 선택하십시오 " 가로 텍스트" (T), 글꼴 색상을 #FFFFFF, 크기를 16픽셀로 설정하고 대문자 BLOG로 작성하고 블로그 섹션의 제목을 나타내는 캡션도 입력합니다. 이 영역을 구분하려면 상단 패딩을 70px로 지정하세요.

그런 다음 방문자에게 필요할 수 있는 정보를 더 추가하세요. 여기에 소셜 미디어 링크와 이메일 주소를 포함했습니다. 모든 것이 깔끔하게 보이도록 측면에 충분한 공간을 남겨 두십시오.

또한 방문자에게 다음에 수행할 작업을 다시 안내하기 위해 클릭 유도 버튼을 다시 추가해야 합니다. 추천 그룹을 열고 버튼과 관련된 레이어를 찾으세요. CMD/CTRL을 누른 상태에서 직사각형과 텍스트 레이어를 선택한 다음 Cmd/Ctrl + J를 눌러 복제합니다. 이 레이어를 바닥글 그룹으로 이동하고 배경 위에 배치합니다.

최종 결과:

수업자료

수업 내용을 따라가려면 다음 자료가 필요합니다(모두 무료).

Unsplash의 산 사진
Font Squirrel이 포함된 Kaushan 스크립트 글꼴
Font Squirrel이 포함된 Lato 글꼴
Iconfinder의 소셜 미디어 아이콘
Unsplash의 사진
레페의 사진

문서 준비

1 단계

해상도가 다음으로 설정되어 있는지 확인하세요. 72픽셀/인치.

2 단계

메모: 이 튜토리얼의 가이드 - 수직 100px, 600px그리고 1100px.

조언: Photoshop 플러그인을 사용할 수도 있습니다. 가이드가이드프로세스 속도를 더욱 높이기 위해.

3단계

제목 작업중

1 단계

조언: 버튼을 누르고 있어 옮기다이면 변환은 비례하게 됩니다.

2 단계

저는 보통 이 기술을 사용하여 밝은 이미지를 어둡게 한 다음 그 위에 흰색 텍스트를 배치합니다.

3단계

4단계

5단계

아이콘 사이에 충분한 공간이 있고 로고와 수평으로 정렬되어 있는지 확인하세요.

6단계

텍스트가 숨 쉴 수 있을 만큼 줄 높이가 충분한지 확인하세요. 마지막으로 제목 영역 중앙에 텍스트를 배치합니다.

포토존 작업중입니다

이 영역에서는 Instagram의 사진을 게시하여 작업 예를 보여주고 예술가나 디자이너의 전문성 수준을 보여줍니다.

1 단계

2 단계

3단계

4단계

메모: 사용한 경우 들여쓰기가 일치하는지 확인하세요. 15px좋아요 옆에 설명을 위해 동일한 들여쓰기를 합니다.

5단계

우리는 접촉 영역을 작업 중입니다

1 단계

2 단계

3단계

우리는 모바일 버전으로 작업합니다

1 단계

2 단계

3단계

4단계

5단계

6단계

자신의 손으로 Photoshop에서 포트폴리오를 만드는 방법. 간단하고 명확한 포트폴리오 레이아웃을 만듭니다.

학생의 포트폴리오는 무엇입니까?

Photoshop에서 포트폴리오 만들기에 대한 마스터 클래스

절차:

성공적인 포트폴리오의 비밀

완성된 초등학생 포트폴리오: 샘플 작성

문서 준비

제목 작업중

포토존 작업중입니다

우리는 접촉 영역을 작업 중입니다

우리는 모바일 버전으로 작업합니다

최종 이미지

자원

1 단계

2 단계

3단계

4단계

5단계

문서 준비

제목 작업중

포토존 작업중입니다

우리는 접촉 영역을 작업 중입니다

우리는 모바일 버전으로 작업합니다

오타 신고

편집자에게 전송될 텍스트:

귀하의 의견(선택사항):