How to Design a Landing Page in Photoshop – Kickstarter Product

안녕하세요, 제 이름은 Cosmin입니다 오늘의 비디오에서 저는 새롭게 출시 할 회사를 위해 Photoshop 내부의 방문 페이지 디자인 Xook이라고하는 Kickstarter의 제품

이 방문 페이지에서 그곳에 도착한 모든 방문자에 대해 세 가지 주요 질문에 답하십시오 이 제품은 왜 신경 써야하며 누가 사용 했습니까? 이제 Photoshop을 시작하십시오 새 문서를 만드는 것으로 시작하겠습니다 그러나 나는 또한이 16 열 레이아웃을 사용하여 온라인으로 얻게 될 것입니다 링크를 클릭하고 동영상의 너비가 새 문서는 1200 픽셀이며 충분한 공간이 있고에서의 높이를 추가하십시오

최소 5,000 픽셀, 괜찮아요 다음 단계는 새로운 열에서 16 열을 이동하는 것입니다 그룹 전체를 클릭하여 다른 문서로 드래그하면됩니다 Command + T를 눌러 전체 그룹을 변환하고 Alt 키를 누른 채로 나는 그것을 바닥으로 끌고있다 맨 아래 레이어의 잠금을 해제하고 이름을 변경하고 측면과 중심에 몇 가지 가이드를 추가하기 시작하십시오

내가 그것을 한 후에 나는 갈 것이다 이미지 – 캔버스 크기로 1920 픽셀로 설정합니다 나는 배경을 채울거야 흰색은 레이어를 선택하고 Command와 Backspace를 누르고 있습니다 악 확대하고, 확대하고 첫 번째 요소를 추가하십시오

시작하려면 16 열 가이드를 숨기고 새 그룹을 만들고 이름을 지정하십시오 머리글을 배치하고 첫 번째 레이어를 배치하고 내가 일반적으로 무엇을하는지 알 수 있습니다 이 요점은 내 사이에 간격을 유지하는 데 도움이 될 몇 가지 모양을 만드는 것입니다 페이지 전체에서 일관된 요소, 캔버스의 아무 곳이나 클릭하자 사각형의 크기를 설정할 수 있습니다

나는 60 세에 관심이있다 픽셀 높이를 지정하고 맨 위에 놓습니다 멋진 이미지를 얻기 위해 unsplashcom을 사용하고 있습니다 마우스 오른쪽 버튼을 클릭하십시오

이미지 레이어를 선택하고 클리핑 마스크 만들기를 선택합니다 이러한 이미지는 로열티가없고 상업용 프로젝트에서 사용할 수 있으므로 명령을 누른 상태에서 모양 레이어를 클릭합니다 빠른 선택을 만들기 위해 상단에 조절 레이어를 추가하고 그라디언트 맵을 만듭니다 이 기술을 사용하는 나의 목표는 낮은 대비를 얻는 것입니다 페이지의 전체 스타일과 혼합되어 사라지지 않는 이미지 너무 많은 관심을 복사 및 버튼에서

나는 몇 가지로 놀 것이다 내가 좋아하는 것을 발견 할 때까지 나는 파란색의 색조를 띠고 나는 정상을 좋아한다 파란색 요소를 더 많이 돋보이게하기 위해 색상을 적용한 색상으로 변경해 보겠습니다 단추 옆에 새로운 도형을 추가하고 싶지만 먼저 처음에는 가시적으로 만들고 모든 것을 맨 위로 옮기고 싶습니다

그것을 복제하고 초기 모양을 숨긴 후에 나는 기존의 이름을 shape-light로 바꿀 것입니다 Command + T를 치자 모양을 오른쪽 클릭하고 수평 뒤집기를 선택한다 장소는 여기 어딘가에 있고 또한 Shift 키와 왼쪽 하단 모서리를 드래그하십시오 모양 레이어에 특정 색상을 적용하려면 미리보기 이미지를 두 번 클릭하고 밝은 파란색 색상을 추가하고 OK를 누릅니다

이 색상을 저장하고 싶으므로 스포이드를 사용하여 샘플을 만들어 보겠습니다 도구와 견본 패널 안쪽에 새로운 아이콘을 치고 다른 아이콘 뒤에 끌기 요소들, 나는 그 위치에서 100 %가 아니지만, 지금 당장은 그대로 두겠습니다 다음 버튼으로 이동하여 모양을 선택하여 모든 변경 작업을 수행 할 수 있습니다 조금 확대하면, 레이어를 더블 클릭하면 레이어를 더블 클릭하면됩니다 일부 치수 버튼을 클릭하면 스타일이 추가됩니다

먼저 흰색 외부를 추가하겠습니다 글로우, 블렌드 모드가 보통으로 설정되어 있는지 확인하고 싶습니다 색상 드롭 섀도우 추가,이 버튼이 가능하다면이 페이지의 주된 목적은 방문자가 그것 바깥 쪽 광선과 매우 비슷하게 블렌딩 모드를 보통으로 설정합니다 그것의 거리와 크기를 조정하고 마음 속에 명심하십시오

나에게 좋게 보이는 것이 든, 너는이게 좋아 보인다는 것에 동의하지 않을지도 모르지만, 나 야 최선을 다하고 불투명도를 조금 낮추고 다른쪽으로 옮기자 그림자 패널을 선택하고 작은 크기를 선택하십시오 어쩌면 2 픽셀 같은 것을 가지고 불투명도를 증가시킬 수 있습니다 어쨌든 그것을 주목하십시오

내가 축소하고 가이드를 제거합니다 머리글을 볼 수있는 순간,보기 및 선택 해제로 이동할 수 있습니다 엑스트라, 나는 즉시 그 모양이 헤드 라인 위에 있다는 것을 알아 차렸다 그것 뒤에서 움직여 보자 이 섹션에서는 비디오 버튼이있어서 서클을 만들고 추가 할 것입니다

상단 버튼과 같은 스타일링을 클릭하고 레이어 스타일을 마우스 오른쪽 버튼으로 클릭하여 붙여 넣습니다 흰색을 위해 페이지 전체에서 일관된 모양을 유지하려고합니다 지원하는 텍스트 콘텐츠가있는 도형 위에 기울기를 추가해 보겠습니다 왼손쪽에는 펜 도구를 사용하여 우리가 똑같은 각도를 갖도록합니다 거의 똑같지 만 직접 말할 수는 없으며 직접적으로 선택 도구 흰색 모양을 선택하고 경로 모서리를 추가하고 3 개를 추가합니다

픽셀은 잘되어야하며 Shift 키를 누른 채로 아래쪽을 선택합니다 왼쪽 앵커를 드래그하여 오른쪽으로 드래그하면 셰이프가 제거됩니다 더 이상 필요로하고 이것들의 위치와 함께 약간의 조정을하십시오 집단 나는이 배치가 단지 가지고있는 것 이상을 좋아한다

동영상 미리보기 이미지가 더 동적 인 것처럼 보이지만 여전히 재생 아이콘이 필요합니다 확대하고 사각형 도구를 사용하고 Alt 키를 누른 상태에서 클릭하고 드래그하십시오 Shift 키를 누른 상태에서 Command + T를 사용하여 변환하고 45도 회전해야합니다 왼쪽 앵커를 제거하려면 펜 도구를 사용하여 회전하면됩니다 앵커를 클릭하여 제거하고 약간의 조정을하여 아이콘이 원 안에 들어 맞습니다

모양 레이어의 축소판을 두 번 클릭하고 흰색을 샘플링합니다 배경 색상을 선택하고 Command + T를 누르면 원 가운데에 배치됩니다 이 페이지에서 사용 된 모든 아이콘은 Envato 요소에서 다운로드되었으며, 많은 그래픽 애셋을 다운로드 할 수있는 구독권이 있습니다 당신이 원하고 그들이 가지고있는 것이 많아서 그만한 가치가있는 것,이 아이콘들을 배치하는 것 Illustrator에서 Photoshop으로 복사하여 붙여 넣기 만하면됩니다 처음에 나는 이 섹션을 어떻게 보이게 할 지에 대한 매우 거친 생각이지만 이 아이콘을 옆에 놓고 흰색 상자를 너비가 조금 작아 지도록 헤드 라인과 단락을 정렬해야합니다

모양의 내부에서 이제 흰색 모양을 변경할 수 있습니다 나는이 레이아웃을 적용하는 것이 즐겁지 않을지라도이 레이아웃으로 갈 것이라고 생각합니다 상자의 나머지 부분과 같은 간격, 지금은 선택하기 위해 조금 고심하고있다 자물쇠 아이콘으로 색상 오버레이를 적용한 다음 파란색을 사용합니다 내 색상 견본 패널에 저장하고 지문 아이콘입니다

그것을 선택합시다 아마 배경과 같은 색을 가질 것입니다 혼합 모드로 놀고, 곱하기를 선택하십시오 정직하게는하지 않습니다 좋아 보이네요

이전보다 더 좋아 보이지 않는다는 것을 의미합니다 컬러 오버레이 패널을 사용하고 조금 더 어두운 그늘을 찾습니다 나는 특별한 것을하지 않았다 나는 특별한 종류의 것을 사용했다 머리말 이미지와 같은 기법으로 이제는 계속 진행할 준비가되었습니다

마지막 섹션, 우리는 여전히 셰이프를 사용하여 요소들, 미래의 프로젝트에이 기술을 적용 해 주시길 바랍니다 이 행동 촉구에 너무 만족하지 않고 첫 번째 디자인 반복 I 추측은 괜찮아요, 우리는 언제든지 나중에 변경할 수 있습니다 지금은 좀 더 집중하고 있습니다 이를 통해 올바른 메시지를 얻을 수있는 깨끗한 레이아웃을 만들 수 있습니다 난 그냥 하단에 버튼이 있는지 확인하여 여기에 오는 방문자는 행동 할 수있는 방법이 있습니다

나는 또한 어떤 것을 포함시키는 것에 대해서 생각하고있다 공유 링크는 다음과 같은 이유로 관심 분야를 테스트하는 데 사용됩니다 방문객들과 어쩌면 사람들이 그것을 공유하도록함으로써 약간의 추진력을 얻을 수 있습니다 소셜 미디어 방문 페이지에는 추천하지 않으며, 일반적으로 추가하지 않습니다

주요 목표 이외의 종류의 외부 링크를 사용하면 방문자가이 페이지의 땅에주의를 산만하게하지는 않습니다 그것이 더 합리적인 것 같아요 방문 페이지의 최종 모습이 될 것입니다 프로세스와 만약 당신이 같은 버튼을 누르십시오에 가입하는 것을 잊지 마세요 더 궁금한 점이 있으시면 아래의 댓글 섹션에 남겨주세요 그리고 다음 번에 친구들을 돌봐야 할 때까지 도와 줘서 기쁘다

MAGAZINE LAYOUT IN ADOBE INDESIGN TUTORIAL – PHOTOSHOP & INDESIGN – Adobe InDesign Tutorial

오늘 나는 주위에 기초한 튜토리얼을 가지고있다 Adobe InDesign의 잡지 레이아웃 오는 인쇄 및 웹보기 용 바로 지금 어때 사람들은 어서 오세요? 그래픽을 저장하십시오

잘 지내기를 바랍니다 오늘 나는 6 명의 머리에서 움직여야했다 한 주에 간단히 말해서 업로드를 최대 5 회까지 6 일 동안 알맞은 콘텐츠를 만들 수 없다 일주일 거기 그래픽 디자이너 인하는 동안 낮에는 시간이 충분하지 않아서 언제든지 내가 가지 않을거야 오늘 토요일과 일요일에 떠 다니는 그러나 다른 가입자 덕분에 우리가 봤던 제안

기본 레이아웃 및 내보내기로 설계되었습니다 잡지를 사용하는 경우 긴 튜토리얼과 나는 나의 많은 것을 안다 구독자는 할 수 없을 가능성이 큽니다 우리가 자주 디자인 할 수있는 것을 사용하되 좋아한다 다양한 범위의 이 채널의 그래픽 디자인은 당신은 어도비 InDesign의 팬이 아니야

나는 더 많은 일러스트 레이터와 포토샵 튜토리얼뿐만 아니라 많이 파이프 라인에 더 많은 목록이 있습니다 원하는 경우 구석에 시간이 멈 춥니 다 이 튜토리얼의 특정 부분을 참조하십시오 이 튜토리얼이 도움이된다는 사실을 알게되었습니다 아래의 댓글 섹션에서 당신이하지 않은 보안 그래픽을 구독하십시오

이미 앉아서 레이아웃 완료 잡지 / 웹 사용은 천천히 당신이 다른 때 절판하고 선택할 수있는 문서 만들기 웹 사용을 위해 여기에서 생성하십시오 그러나 가장 최근의 웹처럼 설명에 게시 링크 아래에서 프린트 문서를 사용하고 이 잡지의 다음 이유를보아야합니다 나는 지불 할 전형적인 포드를 사용한다 이 경우 여러 연령대로 퍼뜨렸다 인쇄 프로젝트는 나중에 보게 될 것입니다

InDesign 자습서에서 나는 단지 디자인 저는 포토샵에서 일하면서 InDesign에서 텍스트를로드하고로드합니다 이것은 웹보기를위한 것이므로 보는 것은 아닙니다 본문에 대해 걱정해야한다 화면이 흐릿하게 인쇄 됨 리를 사용하여 그것을 염두에두고 만들었습니다 Photoshop의 모든 항목과 전송 된 항목 InDesign에 넘기는 파일 나는 a3 풍경을 만들었을뿐입니다

포토샵에서 300 PPI의 문서 그 다음에 반으로 나눠 줘 내가 한 번 잡지 페이지 크림에 나는 여기에서 일할 수 있었다 잡지 왼쪽 섹션보기 왼쪽 페이지와 오른쪽 보호가 한 번 행복했던 오른쪽 페이지 JPEG로 개별 저장 makanan 디자인 및 상자 도구 사용 파일로 이동하여 내 파일 배치 그 자리에 우리는 웹용 잡지를 내보내고 있습니다 너는 몇 가지 다른 선택이있다 당신이 뭘하고 싶은지에 따라 예를 들어 SWF 파일에는 h2가 있습니다

Sarah와 같은 애니메이션 그러나이 잡지의 클라이언트 대화 형 PDF 버전을 사용하고 싶었습니다 스프레드를 선택하고 모두 JPEG 손실 설정뿐 아니라 나를 위해 잘 작동하는 최대 알파 에있는 링크에서 잡지를 계산했습니다 아래에서 설명 할 내용은 다음과 같습니다 인쇄용 잡지를 만드는 방법 Adobe 조금 더 상세한 InDesign 이제 심층적으로 잡지 레이아웃 용 InDesign 문서 인쇄물은 파일로 이동하고 우리가 분명히 필요로하는 인쇄용 문서 인쇄 옵션을 선택하려면 여기를 클릭하십시오 너가 적합 할 필요가있는 페이지의 수 그러나 당신이되고 싶은 많은 페이지들 잡지는 또한 앞뒤 페이지 삭제를 추가 할 수 있습니다

페이지의 후기 단계에서 쉽게 각 개인의 크기로 넣을 수있다 4 페이지로 나갈거야 오늘과 오리엔테이션에서 나는 가로로 배치하거나 네 개의 열을 묘사 나는 종종 3 권이나 잡지사를 사용하지만 어떤 사람들은 2 개 또는 심지어는 4 개의 열은 완전히 디자이너를 사용하고 싶다면 추가되는 3mm 블리드 전체 문서 주변 측정 값이 9 밀리미터라면 리비아 디자인을 닫아야합니다 다시 열어 맨 위에있는 InDesign으로 이동하십시오 왼쪽 모서리 환경 설정 및 다음 측정 및 증분 InDesign 잡지 문서가 생성되었습니다

그것은 다음과 같이 보일 것입니다 안내하는 페이지의 줄 그들은 인쇄하지 않을거야 그래서 추가 못생긴 페이지는 레이아웃으로 이동 한 다음 여기에서 귀하의 옵션 잡지 디자인에 대한 내 방법 사용 print 나는 CD를 만들 것이다 Photoshop을 사용하거나 이전에 아트 워크를 릴리스하십시오 유형이 아닌 것은 무엇이든 추천합니다 탱크를 추가하려는 로고 및 로고를 Adobe InDesign에 직접 넣으십시오

그때 옛날 품질과하지 픽셀 화되고 인쇄된다 포토샵 나는 a3 문서를 만든 다음 우리는 그것을 90도 회전시킬 것입니다 조경 사건 나는 우리의 300 PPI를 생성했다 그런 다음 가이드를 중간에 추가합니다 하나씩 두 부분으로 나누어 라 VNA 용 그런 다음 가장자리에 가이드를 추가합니다

문서를 6 밀리미터 늘리십시오 각각을 보상 해 줄 것입니다 Adobe InDesign에서 3mm 블리드 프린터의 중앙 집중식 출혈 그들은 외부의 모든 것을 잘라 냈다 주요 콘텐츠 및 출혈 일단 행복하고 나서 각각 자른거야 그들을 평평하게하고 개별 JPEG로 네이티브 InDesign이 상자를 만듭니다

페이지를 가로 질러 이렇게 다음에 가라 제자리에있는 파일 KO 파일 및 그것을 떨어 뜨려 그것에 맞게 그렇게 완벽하게 이 아이콘이 보일 때까지 기다려라 상자 리드 이미지를 복제하려면 여기 다른 쪽 상자 안에 이제 텍스트를 추가 할 수 있습니다 상자 도구를 사용하여 이미지 및 로고 파일 가져 오기 모든 텍스트를 선택하고 너의 앞에 선을 만들기 위해 올라 가라 다른 방법으로 인쇄하려면 파일을 보내십시오

그대로두고 그것을 포장 할 수 있습니다 Adobe InDesign과 함께 글꼴 파일 파일을 내보내거나 인쇄 할 문서 선택한 Adobe PDF 인쇄 및 그런 다음 OK를 누르면 최신 버전 사용 애크로뱃과 이것들은 설정입니다 이 창에서 사용할 압축 나는이 설정을 여기에서 사용한다 고품질 친구를 위해 내가 선택한 자르기 표시를위한 모든 단일 옵션 여기 당신과 이야기하는 것이 가장 좋습니다 이전에 인쇄 회사에있을 수도 있습니다

특정 향수 설정 또는 인쇄 요약 섹션 (있는 경우) 잡지 문서에 관한 경고 완료되면 여기에 표시됩니다 내보내기 및 미리보기가 있어야합니다 그것은 어도비 아크로뱃에서 열립니다 그래서 어떻게 프로모션을 했니? Adobe에서 잡지 레이아웃 만들기 InDesign이 도움이된다면 알려주십시오 아래의 댓글 섹션과 같은 것을 삭제하십시오 이야기 구독하기

내 5 개의 업로드 동영상 중 그래픽이 모두 사라졌습니다 주당 및 다음 번에 디자인 할 때까지 오늘의 특징은

How to wireframe a website | CharliMarieTV

오늘 나는 평소와 다른 분위기를 가지고있다 왜냐하면 내가 너를 데려 가기를 원하기 때문이다

와이어 프레임 (wireframing) 인 웹 디자인 프로세스의 첫 단계 와이어 프레임의 목적 정말 최소한의 방법으로 정보를 구성하고 계산을 시작하는 것입니다 글꼴과 색상 같은 것에 대해 걱정하기 시작하기 전에 페이지의 흐름을 벗어나십시오 모든 픽셀을 완벽하게 만듭니다 와이어 프레임을 사용하면 실제로 작업 할 수 있습니다

신속하게 아이디어를 많이 생성하고 웹 디자인 기술이 확실히 향상되었습니다 나는 적절한 와이어 프레임 과정을 시작한 이래로 많은 것을 보았습니다 그래서 오늘 어떻게 당신에게 내가한다 나는 항상 펜과 종이를 사용하여 와이어 프레임을 시작합니다 너 시작 할 수있어

컴퓨터에서 많은 사람들이 회색 상자 만 사용하고 기본 글꼴을 사용합니다 그러나 두 번째로는 일을 적절하게 정렬 시키거나 상자를 얻으려고 노력하는 것을 발견하게됩니다 정확한 크기, 그 작은 세부 사항에 집중하고 흐름을 잃는 순간입니다 당신은 단지 빠른 아이디어를내는 것이 아닙니다 그래서 펜과 종이 만 있으면됩니다

나 자신이 정말 엉망이되어 내 생각을 풀어 버려라 시작하기 전에 디자인중인 페이지에서 어떤 내용이 진행되고 있는지 알아야합니다 충분히 강조하십시오 귀하의 업무는 정보를 설계하여 어떤 정보를 알아야하는지입니다 디자인을 시작하기 전에 먼저 알아야 할 페이지가 있습니다

그 꼭 필요한 정확한 사본이 필요하다는 의미는 아닙니다 단지 대략적인 아이디어가 필요합니다 페이지에 어떤 정보가 올라가고 있는지, 무엇에 관한 것인지, 얼마나 많은 정보가 있는지 등에 대한 정보를 제공합니다 이제이 비디오에서 블로그 디자인의 예를 사용하려고합니다 다시 디자인하고 싶기 때문입니다

내 블로그의 홈페이지 그래서 나는 그것에 헤더, 바이오 정보, 각 게시물에 대한 꼬리말, 사진 및 제목, 어쩌면 그와 함께가는 광고문 아니, 소셜 미디어 링크, 검색 창 및 뉴스 레터 가입 및 나는 또한 인기있는 것 같아요 게시물 섹션 나는 이런 목록을 써서 시작하기를 좋아한다 내 앞에서 내 페이지가 뭐니? 나는 아무것도 잊지 않고있어 내가 일하면 마케팅 디자인 사이트에서 일반적으로 내 컴퓨터에서 Google 문서를 열어 보겠습니다

카피라이터가 그걸 복사 해 줬어 아이디어를 창출하기 위해 나는 옛 동료가 가르쳐 준 기술을 사용한다 8 개의 다른 섹션으로 종이 조각을 접은 다음 8 개의 다른 섹션을 수행하는 '미친 8' 가능한 한 빨리 와이어 프레임 아이디어를 얻으십시오 원하는만큼 크게 또는 작게 그릴 수 있습니다 너에게 가장 좋은 것은 뭐든간에

때로는 4면에서 4면, 4면에서 이것을 할 수도 있습니다 특히 긴 페이지 인 경우 이것은 당신의 두뇌를위한 워밍업 기술로 작동하며, 그리고 나는 그것이 하나의 분명한 이유 만 생각하기 시작하기 때문에 항상 매력적입니다 나는 모든 것을 준비하고 싶지만, 자신이 더 많이 생각할 것을 강요 할 때 더 많은 개념은 당신이 당신의 마음 속에 숨어있는 모든 아이디어에 놀랄 것입니다 과 당신은 자신을 단지 8 명으로 제한해서는 안됩니다 너가 가면 너는 너를 찾았다

점점 더 많은 아이디어가 나오고, 계속 그려 내고 모든 것을 얻으십시오 언제 볼 수 있듯이 그리는 중이 야 나는 정말 지저분 해 그건별로 중요하지 않아 멋지게 그림 그리기는 포인트

더 많이할수록, 조금 더 키를 개발할 수 있습니다 나를 위해, 여기의 이것과 같은 직선은 헤드 라인을 의미하고, 그 다음 사람을 구불 거리게한다 본문 사본 십자가가있는 상자는 그림과 작은 원을 의미합니다 아이콘

아이가 다른 누군가에게 그려 본 것처럼 보이는지는 중요하지 않습니다 아이디어를 얻었고, 그것이 무엇을 의미하는지 알 수 있고, 얻을 수있는 곳이 있습니다 귀하의 디자인으로 시작되었습니다 이 단계가 끝나면 8 가지 개념을 살펴보고 조금씩 별의 옆에있는 스타가 더 탐구 할 가치가 있다고 생각합니다 가끔은 그럴 겁니다

가서 그 작은 조각들을 모아서 만든다 그러나 일반적으로 나는 이 시점에서 컴퓨터 주로 깔끔하게 그리기가 어려워서 이 단계에서는 누군가를 보여주고 내 디자인에 대한 피드백을 얻으려고합니다 그것을 이해할 수 있어야 할 것입니다 Sketch라는 프로그램을 사용하여 와이어 프레임을 조롱합니다

나는 전체 비디오를 끝냈다 실제로 내가 어떤 목적으로 사용하는 디자인 소프트웨어에 관한 것인가? 이하 비록 내가 지금 내 정보를 어떻게 배열하고 싶은지에 대한 생각이 있지만 페이지, 내가 컴퓨터를 놓을 때, 나는 여전히 평범한 것을 사용하려고한다 회색 상자와 기본 텍스트가 그 이유는 내가 그 사람을 원하지 않기 때문입니다 누가이 와이어 프레임을 비판하여 다른 구조에 대해 생각할 것인가? 사이트

색상이나 적절한 아이콘 또는 원격으로 보이는 것을 사용하여 완성 된 비주얼 디자인의 일부가되는 것은 모든 것을 혼란스럽게 할뿐입니다 나는 단지하지 않는다 Sketch에서 하나의 와이어 프레임 만들기, 내가 빗질 한 후에 아이디어를 가지고 있다고 느끼는만큼 많이 만들 것입니다 이 스케치 프로세스의 가장 좋아하는 부분을 통해 그 후에이 시점에서 잠을 자고 다음 단계로 돌아가는 것이 좋습니다 하루 전에 의견을 나누기 전에 또는 비공개 인 경우 시각 자료를보기 전에 계획

그런 식으로 당신은 신선한 마음과 그것으로 다시 돌아올 수있을 것입니다 당신이 다음 단계로 넘어 가기 전에 신선한 관점 그래서 내 와이어 프레이밍 프로세스이며 이것이 모든 웹 디자인 프로젝트의 시작입니다 내가 그것에 대해 어떤 질문이라도 있으면 그 의견에서 아래로 나를 알려주세요 제발 유용하다고 판단되면이 비디오에 엄지 손가락을 올려주세요

나는 절대적으로 사랑하고있다 이 순간에 디자인 비디오를 제작할 수 있습니다 이미 구독 신청을하면 다음에 보게 될 것입니다 안녕

Double Exposure Effect – Photoshop Tutorial

안녕하십니까? 오늘의 비디오에서 이 이중 노출 효과 이미지를 어떻게 만들 었는지 보여 드리겠습니다 여기에서 볼 수있는 어도비 포토샵 사용 좋아, 환상 그래서! IT에합시다! 좋아, 나는 어도비 포토샵을 열어 보겠습니다

내가 사용할 이미지를 가져다가 여기서 열어서 이제 모델을 선택해야합니다 그래서 빠른 선택 도구를 선택하겠습니다 모델 인물을 빠르게 선택하겠습니다 이렇게 그런 다음 빠른 선택을하는 동안 마우스 오른쪽 버튼을 클릭하여 깃털을 선택합니다 여기에 0

5px 깃털을 넣을거야 OK를 누릅니다 좋아, 이제 모델 이미지를 선택하고 CTRL + J를 누를 것이다 이제 새로운 레이어에 추가했습니다 나는 그것을 모델명으로 삼을 것이다

여기에서 이걸 지우겠습니다 좋아, 지금이 이미지의 배경을 더 크게 만들고 우리가 효과를 낼 수있는 충분한 공간을 갖길 원해 그래서 자르기 도구를 선택하겠습니다 여기에서 조금 더 확장 해 보겠습니다 여기도 이 체크 표시를 클릭하여 변경 사항을 적용합니다

좋아, 이제 여기서 조정할거야 솔리드 컬러를 선택하겠습니다 지금은 흰색을 유지하고 OK를 누르면됩니다 나는 그것을 가지고 모델 레이어 아래에 놓을 것이다 배경에 BG로 이름을 지정하겠습니다

좋아, 이제 모델 레이어를 선택하겠습니다 여기는 채도가 없으므로 CTRL + SHIFT + U를 누를 것입니다 또는 다음으로 갈 수 있습니다 : Image, Adjustment and Desaturate 이제, 내가 사용할 두 번째 이미지를 열어 보겠습니다 내가 가져 가서 새 탭에서 열고 여기에있는 다른 탭으로 드래그하겠습니다 나는 그것을 Mountain이라고 부를 것입니다

불투명도를 50 % 정도로 변경하겠습니다 이렇게하면 작업을 시작하기 전에 교체 할 위치를 볼 수 있습니다 이제 이 구름들이 다른 방향으로 있기를 원합니다 그래서 나는 CTRL + T를 누를 것이다 그런 다음 마우스 오른쪽 버튼을 클릭하고 가로로 뒤집기를 선택합니다

이제 나는 내가 원하는 곳에 구름이있습니다 또한 나는이 꼭대기에있는 산 꼭대기를 여기에두고 싶다 그래서 나는 이미지를 더 크게 만들기 위해 shift와 drag를 누를 것이다 그리고 내가 원하는 곳에 이미지를 대치하겠습니다 이 체크 표시를 한 번 클릭하겠습니다

불투명도를 다시 100 %로 변경하겠습니다 이제 모델 레이어를 선택하겠습니다 CTRL을 누르고 모델을 선택하기 위해 그것을 클릭합니다 이제 산 레이어를 선택하겠습니다 그런 다음이 레이어 마스크 아이콘을 한 번 클릭하겠습니다

당신이 볼 수 있듯이 이것은 모델의 실루엣을 생성 할 것입니다 좋아요, 이제이 모델 레이어의 복사본을 만들겠습니다 그래서 나는 ALT를 눌러 사본을 만들어 그것을 산 레이어 위에 올려 놓을 것입니다 Blending 모드를 Lighten으로 변경하겠습니다 우리는 여기에 멋진 효과를 얻을거야

하지만 나는 그것의 불투명도를 약 50 % 이제 레이어 마스크를 적용 해 보겠습니다 그래서 나는 가서이 레이어 마스크 아이콘을 한 번 클릭 할 것이다 여기서 레이어 마스크를 선택하겠습니다 그런 다음 브러시 도구를 선택하겠습니다 불투명도 40 % 검은 색은 내 전경색입니다

이 영역에서 삭제를 시작하겠습니다 좋아, 이제 산 레이어를 선택하겠습니다 그리고 내가 그 레이어 마스크에 있는지 확인하겠습니다 모델의 얼굴을 나타 내기 위해 여기에서 삭제를 시작하겠습니다 좋아요

이제 BG 레이어를 선택하겠습니다 나는 그것을 두 번 클릭하겠습니다 여기에서 색상을 샘플로 채 웁니다 확인을 누릅니다 이제 산 레이어를 선택하겠습니다

CTRL + J를 눌러 복제합니다 레이어 마스크를 가져다가 삭제하겠습니다 나는 그것을 혼합하여 Lighten에 바꿀 것이다 그리고 당신이 볼 수 있듯이 이것은 구름과 함께 멋진 효과를 창출 할 것입니다 이미지에서 볼 수있는 다른 부분이 아직 있습니다

그래서 블랙 레이어 마스크를 적용 해 보겠습니다 내 키보드에서 ALT를 누르고이 레이어 마스크 아이콘을 한 번 클릭하면 이제 내 브러쉬를 선택하겠습니다 내 전경색으로 흰색으로 구름의이 부분 만 볼 수 있도록 여기에서 솔질하기 시작합니다 좋아, 이제이 상단 레이어를 선택하겠습니다 조정하고 단색을 선택하겠습니다

나는 부드러운 핑크색을 고를거야 나는 Ok를 누를거야 블렌딩 모드를 곱하기로 바꿀 것입니다 불투명도를 약 20 %로 설정하겠습니다 이제 스탬프 표시 레이어를 만들겠습니다

그래서 나는 ALT + CTRL + SHIFT + E를 누를 것이다 나는 그것을 desaturate거야 그래서 나는 갈 것이다 : Image, Adjustment and Desaturate 블렌딩 모드를 Soft Light로 바꿀 것입니다 불투명도를 약 30 % 그리고 그게 다야 이 튜토리얼을 마음껏 즐기 셨으면 좋겠습니다 그리고 그것은 당신에게 조금 도움이되었습니다 구독 및 의견을 잊지 마세요

그것을 엄지 손가락으로 보여주고 공유하십시오 더 많은 튜토리얼이 올 때까지 기다린다 사실 다음 튜토리얼에서 여기서 내가 볼 수있는 다른 이중 노출 이미지를 어떻게 만들었는지 보여 드리겠습니다 다 좋아 시청 해주셔서 감사합니다 좋은 하루 되세요

Creating a wireframe in photoshop

일반적으로 내가 수업을 가르 칠 때마다 내가 가르치고 싶은 첫 번째 일 중 하나입니다 학생들은 일을 할 수있는 적절한 순서입니다

번역하는 방법 웹 디자인에 들어가기 위해서는 먼저 와이어 프레임을 작성한 다음 다음 단계로 넘어가 야합니다 우리가 스토리 보드에서 작업 할 단계 디지털 콤포넌트라고도합니다 스토리 보드 색상 및 기본 그래픽을 포함합니다 이것이 바로 와이어 프레임과 분리되는 이유입니다

와이어 프레임 일반적으로 회색조입니다 그런 다음 이미지와 사본을 포함하는 자산을 수집하고, 텍스트라고도합니다 마지막 단계는 페이지를 만드는 것입니다 그래서 그것은 조준 사격 준비 이제 학생들은 자주 페이지를 만들고 처음으로 이 다른 일을하기 위해 다시

그리고 그것은 전혀 말이되지 않습니다 이것이 올바른 주문입니다 페이지를 만들 수 있습니다 그래서 우리가 할 일은 우리가 가고 있다는 것입니다 이걸 죽여라, 나는 연습을 해왔다

와이어 프레임을 만든다 그리고 와이어 프레임은 청사진과 같습니다 집을 위해서 우리는 Photoshop에서이 작업을 수행 할 것입니다 내가 포토샵으로 녹슨 것 같아

일반적으로 Fireworks에서이 작업을 수행했습니다 그리고 이것이 선호되는 도구였습니다 그러나 어도비는 크리 에이 티브 클라우드에서 Fireworks로 전진하지 않으므로 새로운 도구를 배우게 될 것입니다 이 작업을 수행 그리고 우리는 새로운 와이어 프레임을 만들 것입니다

저는 이것을 "위젯"이라고 부를 것입니다 내 가짜 회사가 위젯을 판매 할 것입니다 그리고 나는 칠거야 승인 내 너비는 1024 x 768 픽셀입니다

그렇게 나쁜 시작은 아닙니다 그리고 대개 저는 이것을 설정할 것입니다 배경색을 흰색 또는 검은 색으로 바꾼 다음 상자를 그릴 것입니다 그리고 각 상자 div를 나타낼 것입니다 그래서 나는 모든 것을 그레이 스케일로 만들 예정입니다, 그래서 저는 가고 있습니다

회색 음영을 선택하고 OK를 누릅니다 그리고 직사각형 툴을 선택하려고합니다 960 픽셀 너비로 설정하려고합니다 이것은 컨테이너의 매우 일반적인 너비입니다 과 내 키가 750이 될거야

나는 괜찮을거야 그런 다음 드래그 정렬을 할 것입니다 그 자리에 그리고 내 통치자가 있다는 것을 알게 될 것입니다 저는 여기 픽셀에 있습니다

나는 기본적으로 일종의 센터에 노력하고 있습니다 나는 모두 밖으로 나가고 완벽하게 센터에 갈 수 있었다 그것은, 내가하고있는 일을 위해 정말로 필요하지 않습니다 그런 다음 레이어 이름을 지정하고 그 (것)들과 함께, 나는 전형적으로 그들을 잠글 것이다 좋아, 내 다음 단계는 헤더

그리고 당신은 컨테이너 주위를 조금만 보면서 그렇게 할 수 있습니다 그것 또는없이 일반적으로 어느 방향 으로든 갈 수 있습니다 나는 약 5 픽셀의 마진을 남길 것이다 당신이 그것이 다른 것을 볼 수 있도록

나는 밝은 회색 음영을 고를거야 여기서는 상자를 선택하겠습니다 높이를 120 픽셀로 950 너비로 만들 예정입니다 하락 그곳에 채우기가 정말 행복하지 않습니다 더 가볍게 만들어 봅시다

좋아, 꽤 예쁘다 좋은 헤더를 어디에 놓았는지 이동 한 다음, 화살표 키를 여기에 넣으세요 그래서 그것은 헤더를 나타낼 것입니다 그리고 다시 div가 가질 이름입니다

좋아요, 그리고 다시 잠글 수 있어요 그럼 내가 갈거야 새 사각형을 만들려면 다시 950으로 만들고 바닥 글을 작성해야합니다 짧게, 우리는 90 분에 그것을 만들 것입니다 나는 OK를 칠 것입니다

나는 그 색으로 괜찮아 그리고 이것은 다시 한번 나타납니다 이것은 내가 어떻게 필자의 헤더를 셋업 할 것인지, 내 꼬리말, 모든 다른 부분들 그래서 당신이 일을 할 때 div가 나타납니다 프로그램 작성

그래서 이것은 바닥 글이 될 것입니다 그리고 당신의 임무를 위해 당신은 첫 번째 것과 똑같은 것 당신은 당신을 창조하는 프로젝트를 가질 것입니다 자신의 와이어 프레임 그래서 이것은 단지 그것을하는 법을 배우는 것입니다

그래서 너는 똑같이 만들거야 내가하고있는 하나 따라서 머리글과 바닥 글을 사용하여 2 열로 디자인하고 있습니다 그래서 나는 갈거야 여기에 다른 것을 넣으려면 160 픽셀 너비로 만들어야합니다

그것을해라, 지금 나는 실제로 수학을하고, 내가 지금까지 골랐던 것을 기억하려고 노력해야한다 하자 600 픽셀을 말하십시오 아마 그럴 것 같지 않습니다 그러나 그것이 무엇인지 보자 보이는구나

일반적으로, 저는 이것을 종이로하고 실제로 알아낼 것입니다 수학 좋아요, 그래서 그것은 적당한 크기가 아닙니다 그래서 저는 변형 컨트롤을 보여주고 싶습니다 그리고 나는 그것을 일종의 장소로 밀어 넣을 것입니다

좋습니다 꽤 좋습니다 좋아, 그리고 나서 내 사이드 ​​바 또는 nav 섹션과 같을 것입니다 나는 그것을 벗을 것이다 대다 변환

그래서 저는 그 사이드 바를 호출 할 것이고, 나는 계속해서 그것을 잠글 것입니다 나는 계속 가서 바닥 글을 잠글 것이다 나는 그들 위에 더 많은 것들을 넣을 것이다 그러나 나는하지 않을 것이다 다시 그걸로 돌아 가라

그리고 나서 새로운 직사각형을 넣을 것입니다 820×570으로 시작하는 곳입니다 그것을 제자리에 옮기고 컨트롤을 변형 시키십시오 너가 그건 내 divs를 나타냅니다

그래서 저는 이것을 메인 컨텐츠 또는 메인이라고 부를 것입니다 그리고 그것들 내 div id 될 것이다 그리고이 모든 것을 집어 폴더에 넣는 것이 때로는 편리 할 때도 있습니다 그게 효과가있을 거라 생각 했어 나는 이것을 잘 조직하는 경향이 있습니다

그리고 그것들은 내 사업부 그래서 지금은 다양한 콘텐츠가 있습니다 좋아요 그래서 여기에서 나는 다른 것을 나타낼 것입니다 다른 방식으로 주로 선과 직사각형으로 주로 작업하겠습니다

이제 텍스트를 사용하십시오 헤더가 어떻게 될 것인지 또는 텍스트가 어떻게 될 것인지 알고있는 경우 나는이 시점에서 폰트에 대해 정말로 걱정하지 않는다 나는 Verdana에서 모든 일을한다 왜냐하면 그건 정상입니다 보통입니다

당신은 또한 잠재적으로 대담하게 할 수 있습니다 그래서 나는 이걸 월리 위젯이라고 불러 그것이 우리 회사의 이름입니다 이것은 실제로 배치에 관한 것입니다 이제 저는 기본 버튼을 넣기를 원할 것입니다

우리는 실제로 모양에 대해 걱정하지 않습니다 여기에 버튼이 있습니다 그래서 여기에 다른 직사각형을 넣을 수 있습니다 또는 좀 더 단추 모양으로 보이게하려면 둥근 사각형을 사용합니다 이것들은 버튼을 나타낼 것입니다

나는 사실 그걸로 괜찮습니다 그리고 나서 나는 내가 그곳에서 한 것은 Alt와 화살표 키를 사용하여 복제했습니다 Alt, 화살표 그래서 나는 네 여기 단추 그리고 나는 좀 더 많은 시간을 할애 할 것입니다

하지만 나는 그것들은 기본적으로 내가 원하는 곳입니다 그래서 나는 그들을 어디서 적절히 배치 할 것인가? 나는 그들을 원해 그리고 당신이 원한다면 당신은 더 많은 시간을 들여서 정말로 완벽하게 정렬 될 수 있습니다 슈퍼 중요하지 않습니다 나는 단지 기본 배치를 찾고있다

그러나 이것들은 버튼이 될 수 있습니다 그리고 실제 네비게이션을 위해서는 한 단계 더 나아가고 실제로 텍스트를 넣을 것입니다 이것들 중에서 12 포인트 글꼴을 사용해 봅시다 홈으로 말하면, 움직일 수 있습니다

승인 그리고 다시, 당신은 이것을 평평하게 할 것입니다, 우리는 실제로 이것을 취하지 않을 것입니다 이런 식으로 그래서 나는 텍스트를 포함시킬 것이다 그래서 여기서 주목할 것입니다

내가 그걸 멈추었 어 비디오로 전송하고 빨리 전달했습니다 내 버튼을 얻는 데 약간의 문제가있었습니다 일하다 우연히 버튼 심볼 뒤에 텍스트를 넣고있었습니다

당신은 무엇을 볼 수 있습니다 거기에 이 부분을 위해 내가 원하는 것은 4 개의 단추 모양을 만드는 것입니다 그 위에 레이블을 붙여 놓은 것과 같은 방법으로 레이블이 붙은 텍스트를 그 위에 놓습니다 홈, 제품, 연락처 등이 포함되어 있습니다

당신은 웹 페이지에서 가지고있을 것입니다 접촉 좋아, 그럼 그 사람들이 내 단추가되어야하고, 다시, 당신은 이것을 잠글 수 있지만 나쁜 생각은 아닙니다 폴더로 정렬 할 수 있습니다 도대체 무엇이 당신은해야합니다

그래서 당신은 이것들을 가질 것이고, 당신이 원한다면 조금 더 좋아 보이게 할 것입니다 나는 그냥 물건을 가져갈 곳을 보여 주려고 그래서 내가 할 다음 일은 이미지를 추가합니다 그리고 일반적으로 직사각형이나 정사각형을 넣어 이미지를 표현합니다 일반적으로 흰색 채우기가됩니다

나는 일반적으로 이것에 검은 획을 붙인다 3 점은 괜찮습니다 그리고 저는 일반적으로 사각형에 넣을 것이고, 저는 라인 도구를 사용할 것입니다 그것은 채움이 없어야합니다, 검은 색 스트로크, 3 점, 괜찮습니다 그리고 일반적으로 x와 그 이미지를 나타냅니다

나는 그것들을 그룹화하기 위해 G 명령을 사용할 것이다 Mac 그래서 표현과 이미지가 실제 단어입니다 자네가 알고 있다면 귀하의 링크, 로컬 링크가 있다면, 당신은 여기에 넣을 수 있습니다 또는 당신은 단지 링크를 말할 수 있습니다 그런 다음 조금 더 크게 만들 수 있습니다

그리고 Alt 키와 화살표 키를 사용하여 사본을 만든다 이제 당신은이 링크들이 실제로 될 것이라는 것을 안다면 실제 말 이것에 대해서 우리는 여기에 링크가있을 것만 큼 단순합니다 꼬리말 나는 보통 102 Main Street이라는 주소를 붙인다 어떤 마을, 일리노이 60000

그리고 당신은 사이트를 넣을 수도 있습니다 지도 또는 연락처, 여기에 무엇을 넣을 지, 연락처 정보, 전자 메일, 다양한 소지품 그리고 저는이 페이지의 주요 부분에서 대표자입니다 나는 이것을 취할 수도있다 여기에 그룹화하고 복사하십시오 그리고 나는 그것을 움직일 수 있고 그것은 페이지의 다른 곳에 이미지가 될 것입니다

그래서 당신은 귀하의 페이지에 게재 할 하나 이상의 이미지 그래서 나는 보통 내가 만들 때마다 다른 이미지, 나는 더 많은 것을 끌어 올 것이다 그래서 여기에 몇 장의 이미지가있을 수 있습니다 텍스트, 텍스트 나는 보통 선으로 만 나타내며 그저 선을 그릴 것이다 그리고 Shift 키를 누르면 도움이됩니다

랩톱의 터치 패드가 가장 쉽지는 않지만 그것은 잘 작동합니다 그리고 마지막에 가서 곧게 뻗을 시간을 조금 가져야합니다 이것들을 정렬하십시오 그러나 이것들은 단지 단락을 나타냅니다 어떤 사람들은 그리스 문자를 사용합니다

나는 심지어 내가이 지점에 들어가기를 좋아하지도 않는다 나는 단지 대표한다 텍스트가 어디로 갈지를 나타냅니다 이 선을 선택하고 모두를 만드는 것은 나쁜 생각이 아닙니다 하나의 모양

나는 그걸로 괜찮아 당신이 원한다면 당신은 이것을 깔끔하게 할 수 있습니다 이 지점에서 그러나 그것은 나의 단락을 대표합니다 그래서 나는 기본적으로 너를 보여주는 와이어 프레임을 가지고있다

이것은 텍스트, 이미지는 여기에, 이미지는 여기로, 이미지는 일반적으로 아이콘이 여기로 갈 것입니다 귀하의 버튼이 여기에 적절한 텍스트와 함께있을 것입니다 꼬리말에 적절한 텍스트 링크가 여기에 있습니다 그리고 이것이 당신이 취할 것입니다

너의 클라이언트와 너는 이것에 서명하는 그들을 얻을 텐데 이 페이지에 그리고 당신은 당신이 가지고있는 페이지의 각 유형에 대해 보통 하나를 할 것입니다 따라서 15 개의 제품 페이지가있을 수 있습니다 모두 동일한 방식으로 레이아웃됩니다

제품 페이지를 대표하는 하나의 와이어 프레임을 만든 다음 각 제품 페이지를 대표하는 와이어 프레임을 만듭니다 같은 기초 그래서 나는 이것을 구할 것이다 그리고 괜찮습니다 저는 그것을 위젯으로 저장할 것입니다

[한글자막]웹퍼블리셔를 위한 포토샵 이미지 자르기, 이미지 슬라이스 방법을 알려드립니다.

안녕하세요 리베하얀입니다

오늘은 구독자분께서 질문을 해주셨습니다 이미지 슬라이스 할때 간단하게 잘라서 휙휙 저장하는것 같은데 어떻게 하시는건가요? 라고 올려주셨습니다 제가 댓글로 답변을 드릴려고 했는데 글로 하기에는 변수가 많아서 영상으로 직접 알려드리는것이 좋을것 같고 다른 분들도 궁금해 하실것 같아서 이미지 슬라이스 할때 어떻게 제가 슬라이스 하고 이미지 병합을 하고 자르는지 보여드리도록 하겠습니다 우선 이미지 슬라이스 하기전에 원하는 레이어를 선택을 할 줄 알아야 슬라이스를 할 수 있겠죠? 레이어 선택하는 것은 오른쪽 레이어 패널에서 선택할 수도 있구요

원하는 디자인을 바로 선택하기 위해서는 무브툴 -> 단축키 v 를 누르시고 Ctrl키를 누른상태에서 원하는 이미지를 클릭 원하는 디자인을 마우스 좌측 버튼을 클릭 하시면 오른쪽 레이어 패널이 선택된 레이어로 변화되는 것을 볼 수 있습니다 로고를 선택하길 원한다면 로고를 클릭하고 바로 움직여보면 선택이 잘 되었는지 알수 있겠죠? 잘 선택되었다고 생각이 들 경우에는 Ctrl +Z 누르셔서 원래의 위치로 되돌리기 해줍니다 그리고 그 이미지를 복사 붙이기를 해야겠죠 복사 붙이기 만으로 안되는 레이어도 있습니다

이 쪽을 보시면 레이어 스타일이 있습니다 fx라고 써있는 것은 전부다 레이어 스타일이 적용된 레이어입니다 레이어 스타일은 단순 복사 붙이기가 되지 않습니다 레이어 스타일이 적용된 레이어는 일반 레이어로 바꿔줘야 합니다 원하는 레이어에서 마우스 우측 버튼을 누르시고 Rasterize Layer Style를 선택하면 효과가 적용된 일반 레이어가 됩니다

이 레이어 안에는 로고 하나밖에 없잖아요? 이 로고를 선택할 때에는 확대를 해서 마퀴툴(M)로 정확히 맞춰서 잡는것이 아니에요 왜냐하면 이 레이어 안에 있는 디자인 요소는 로고 하나밖에 없어서 입니다 마퀴툴(M)로 여유있게 선택하고 Ctrl + C (복사하기) >> Ctrl + N (새문서) >> Enter(확인) >> Ctrl + V (붙이기) 그러면 안에 있는 디자인 크기 그대로 복사 붙이기가 됩니다 굳이 마퀴툴로 딱 맞게 자르겠다고 1px씩 신경써서 작업하지 않고 어짜피 이 레이어 공간에는 이 로고 하나밖에 없기 때문에 임의의 크기로 선택을 해도 상관이 없습니다 그 주위에 있는 디자인 영역이 선택이 안되겠죠? 당연히 레이어에는 이 이미지 하나밖에 없으니깐 Ctrl + C (복사하기) >> Ctrl + N (새문서) >> Enter(확인) >> Ctrl + V (붙이기) Ctrl + S(저장하기)를 눌러서 저장을 하는 것이죠 이런 것을 제가 빠르게 움직이다 보니깐

간단하게 하는것처럼 보여질 수 있습니다 단축키를 한꺼번에 많이 써서 그렇습니다 자 그러면 다음으로 넘어가서 이 이미지를 한번 해볼까요? 이 배경과 흰색 아이콘 두개를 같이 저장하고 싶을때 하는 방법을 알려드리기 전에 주의 할점은 아이콘을 선택할때 중간 부분을 선택하게 되면 뒤에 레이어가 선택이 되어저요 텍스트 같은경우 텍스트 레이어(Type Layer)자체가 빈 공간을 클릭하더라도 텍스트의 영역으로 (클릭 : 무브툴 상태에서 Ctrl+마우스좌측버튼) 지정이 되거든요 텍스트 중간 빈공간을 클릭해도 텍스트 안에 빈 영역 아무곳이나 클릭해도 선택이 되지만 (클릭 : 무브툴 상태에서 Ctrl+마우스좌측버튼) 다른 레이어 같은경우에는 빈 공간을 클릭하면 그 뒤가 클릭이 되요 (클릭 : 무브툴 상태에서 Ctrl+마우스좌측버튼) 그래서 정확하게 디자인을 클릭해야 합니다

선이 있는 부분을 정확하게 선택을 해주셔야 합니다 아이콘 플러스 뒤에 배경까지 두개 레이어를 선택하려면 Ctrl키 누른상태에서 클릭 선택하신다음에 Ctrl + Shift 누르고 배경 이미지를 클릭하면 같이 잡아 집니다 Ctrl + Shift는 계속 추가로 선택되는 단축키 입니다 다시 이 두개만 잡아 보겠습니다 무브툴(V)상태에서 Ctrl키클릭 > Ctrl + Shift원하는 디자인 클릭하면 같이 잡히죠 이상태에서 레이어 합치기 합니다

Ctrl + E를 누르시면 일반레이어로 합처지게 됩니다 그리고 이상태에서 마퀴툴(M)로 임의의 크기로 선택하신다음에 Ctrl + C (복사하기) >> Ctrl + N (새문서) >> Enter(확인) >> Ctrl + V (붙이기) 하시게 되면 원하는 영역 그대로 저장할 수 있습니다 다시 초기화 시키겠습니다 만약에 나는 이 6가지를 전부다 한 이미지로 저장하고 싶다 한개 파일로 저장하고 싶다 할때에는 이 6가지 레이어를 다 잡아야겠죠? 무브툴(V)상태에서 Ctrl+마우스좌측버튼 클릭 >> Ctrl + Shift + 마우스 좌측버튼 클릭 Ctrl + Shift + 마우스 좌측버튼 클릭해서 다 잡아줍니다

만약에 안잡혔으면 Ctrl + Shift + 마우스 좌측버튼 클릭해서 추가로 잡아주고 움직여주고 잡힌것이 확인되면 Ctrl + Z 그리고 다시 Ctrl + Shift + 마우스 좌측버튼 클릭 한후에 마우스 움직여 주고 잡힌것이 확인되면 추가로 또 잡아줍니다 방금 잡히지 않은 이유는 이미 잡았던 레이어를 Ctrl + Shift + 클릭해서 잡은것을 해제했기 때문입니다 이 상태에서 다시 Ctrl + E로 선택된 레이어 모두 합치기를 합니다 마퀴툴(M)로 임의의 영역을 선택하고 Ctrl + C (복사하기) >> Ctrl + N (새문서) >> Enter(확인) >> Ctrl + V (붙이기) 한번에 선택 복사, 붙이기가 되고 저장할 수 있습니다 그리고 이렇게 레이어를 합첬다고 해서 바로 PSD를 저장하시면 안됩니다

그 이유는 원본 디자인이 손상이 가기 때문입니다 디자이너에게 PSD파일을 받는데 슬라이스 작업 할때에는 절때 PSD저장을 하면 안됩니다 PSD파일을 끌때 저장안함으로 하셔야 합니다 그래야 레이어 병합이 되었던 부분을 저장하지 않고 원본 그대로 유지할수 있기 때문입니다 원본파일을 잘 보존하고 있어야 합니다

그리고 일반 텍스트 예를들어 나는 CSV라는 텍스트를 이미지로 저장하고 싶을때 텍스트 레이어는 마퀴툴(M)을 선택하고 복사, 붙이기를 하면 복사가 다 안됩니다 레이어 스타일까지 복사가 안됩니다 이 부분을 작업할때에는 일반 레이어로 바꿔주셔야 합니다 원하는 레이어에서 마우스 우측 버튼을 누르시고 Rasterize Layer Style를 선택해서 텍스트와 그림자가 함께 있는 일반 레이어로 변환을 시키던가 Ctrl + Shift + N을 눌러서 새레이어를 만들고 새레이어와 합칠 레이어를 같이 잡고 Ctrl + E를 눌러 레이어를 병합시키는 방법을 하셔도 됩니다 그 뒤 마퀴툴(M)로 임의의 영역을 지정한후 Ctrl + C (복사하기) >> Ctrl + N (새문서) >> Enter(확인) >> Ctrl + V (붙이기) 그림자까지 있는 이미지 텍스트로 저장합니다

자 이렇게 해서 여러가지 이미지를 한번에 선택하기 위해서는 무브툴(V)상태에서 Ctrl+마우스좌측버튼 클릭하고 Ctrl + Shift + 마우스 좌측버튼 클릭으로 추가 선택합니다 선택한 뒤에 한번씩 움직여 주는것이 좋아요 Ctrl + 클릭하고 움직여보고 Ctrl + Z Ctrl + Shift +클릭하고 움직여보고 잘 선택이 되었는지 알아야 되니깐 Ctrl + Z하고 다시 Ctrl + Shift + 클릭해서 움직여보고 다 선택이 되었을때 레이어 병합하기 Ctrl + E누르시고 마퀴툴(M)로 여유있게 선택합니다 마퀴툴로 드래그 하지 않고 선택할 수 있는 방법도 있습니다 Ctrl + A(전체선택) 하는 방법입니다 전체선택을 하고 Ctrl + C (복사하기) >> Ctrl + N (새문서) >> Enter(확인) >> Ctrl + V (붙이기) 4개만 복사되서 붙여집니다

선택된 레이어에서 작업하는 것이기 때문에 그 안에 있는 모든 요소를 선택하는 Ctrl + A > Ctrl + C > Ctrl + N > Enter > Ctrl + V 단축키 하나만으로 작업을 할 수 있습니다 이런 단축키 들은 왼손으로 컨트롤이 가능하기 때문에 포토샵 하실때 기본자세가 마우스는 오른손 키보드는 왼손으로 왼손 검지는 F키에 올려저 있는 상태에서 엄지손가락은 스페이스 키 이 자세에서 작업하시는게 좋습니다 프로게이머 분들이 게임을 할때의 자세처럼 자세를 취하시면 됩니다 특히 FPS 게임하듯이 예를들어 배틀그라운드라던지 오버워치같은 게임을 하는것을 보면 오른손은 마우스 컨트롤 하고 왼손은 키보드로 새끼손가락은 Ctrl or Shift를 제어하고 왼쪽 손가락 같은경우에는 a,s,d를 a는 약지 s는 중지 d는 검지 그리고 엄지 손가락은 스페이스 키를 올려놓으신 다음에 포토샵에서 작업하시면 훨씬더 빠른속도로 할 수 있습니다 다만 단축키를 많이 아셔야 겠죠 단축키를 모르시면 마우스로만 계속 작업하게 되는데 처음에는 마우스가 편할지 모르지만 작업이 많이 반복되면 단축키가 훨씬더 빠릅니다

꼭 단축키를 많이 활용하셔야 합니다 좌측에 있는 툴바영역에는 마우스로 가지 않는게 좋습니다 물론 색상을 지정하는것을 제외하고는 마우스를 가지 않은 상태에서 최대한 작업하려고 노력해야 합니다 그렇게 익숙해지다 보면 저처럼 이렇게 빠른 작업을 할 수가 있습니다 이렇게해서 오늘은 간단한 팁이긴 하지만 많은분들이 슬라이스를 할때 어떻게 사용하는지 저랑 한번 비교해 볼 수도 있고 제가 여러분보다 작업하는것이 유용하셨다면 제 방법으로 하셔도 좋을것 같아요 자 그러면 오늘은 여기까지 하겠습니다

감사합니다

Web Design Tutorial For Beginners Using Photoshop

안녕 얘야, 내 이름은 Cosmin이고 오늘의 비디오에서 나는 내가 어떻게 보여줄지 방문 페이지를 재 디자인했습니다 이 프로젝트는 SEO 대행사를 위해 완료되었습니다

그것은 꽤 큰 고객들과 함께 일했고 그들에게 몇 가지 새로운 단서를 얻으십시오 그들이 가진 것과는 완전히 다른, 여기에 몇 가지 비트와 조각이 있습니다 요약하면 방문 페이지는 매우 인상적이며 더 자세하고 자세하게 보입니다 사람들이 그것에 착륙 할 때 우리가 Google의 1 페이지에 귀하의 브랜드가 있으므로 새로운 색상을 시도해보기로했습니다 자신의 브랜드에 맞는 독특한 스타일을 개발하십시오

Photoshop으로 건너 뜁니다 이미 초기 디자인을로드 한 상태이며 방문 페이지이므로 외부 링크를 제거하고 방문자가 더 쉽게 몇 가지 양식 필드를 제거하여 정보를 제출하십시오 이제는 한 번 방문객이 정보를 입력하면 나머지 정보가 수집되는 두 번째 페이지로 리디렉션됩니다 이것은 약간의 마찰을 줄이기위한 것입니다 끝 부분에 단추 만 보관합니다

클릭하면 페이지 상단으로 돌아가고 선택 도구 나는 원했던 내용 만 보관하고 일을 시작했습니다 콘텐츠의 느낌을 얻기 위해 저 충실도 와이어 프레임 나는 조금 봤어 흥미로운 색 구성표를 찾고이 두 색과 글꼴을 선택하십시오 페이지에 대한 액막이

당신이 말할 수 있듯이 나는 그 색상을 적용하고 콘텐츠에 대한 스타일을 변경하고 모든 텍스트 요소를 바꿔서 이제 가야합니다 각 섹션에서이 디자인을 작동시키기 위해 내가 한 일을 보여 드리겠습니다 헤더 영역에서 나는 내 아이디어와 일치하는 그래픽을 디자인했습니다 독특한 시각적 스타일을 가지고 있으며,이 작은 화살표를 통합했습니다 여기에서 Illustrator 내부에서 열고 구조를 확인해 봅시다

보시다시피 저는 오른쪽과 왼쪽에 두 개의 기본 도형이 채워져 있습니다 그들 위에 나는 블렌드를 사용하여 완성 된 이러한 물결 모양의 패턴을 가지고 있습니다 수단 좀 더 재미있게 만들기 위해 작은 둥근 모양도 추가했습니다 어떤 성격을 부여

그 파도를 만들려면 펜 도구를 선택하십시오 캔버스 바닥에 작은 모양을 만들면 모든 종류의 임의가 될 수 있습니다 모양과 우리는 우리가 위에 놓을 더 큰 것을 위해 같은 것을 할 필요가있을 것이다 그만큼 펜 도구를 사용하여 똑같은 작업을하고 몇 개의 앵커 포인트를 드래그하면됩니다 우리는 그 들판이 비어 있는지 확인해야하고 색깔이있다

개요, Object – Blend – Blend Options로 이동하여 원하는 단계 수, 확인을 누르고 다시 돌아가서 "만들기"옵션을 선택하면 물결 모양이됩니다 모양과 그것이 직접적으로 살고있는 한 그것은 완전히 조절 가능합니다 선택 도구를 사용하면 앵커를 선택하고 이동할 수 있습니다 결과 그것을 선택하고 삭제하고 Photoshop으로 다시 이동하십시오

이 섹션의 경우 나는 방금 Spotify 로고의 일부를 지키고 그 밑에 렌더링 모양을 추가했다 텍스트, 모든 것을 일관되게 유지하기 위해 동일한 색상을 사용하십시오 물론 당신은 당신이 좋아하는 모든 변경을 할 수 있습니다 이제 다음 단계로 넘어 갑니 다 팀 섹션에서는 다시 같은 스타일을 유지하는 거대한 모양을 만들었습니다

이제 레이어를 찾고 여기 어딘가에 있어야하고 클리핑 마스크를 만들어 이미지가 다른 이미지 위에 쏟아지지 않도록하십시오 섹션을 만들었지 만 먼저 표시해야합니다 상단의 이미지가로 설정됩니다 오버레이가 매우 낮고 불투명도가 낮습니다 방문 페이지의이 부분에 대해 거의 두 번째 섹션에서했던 것처럼 반복되었습니다

실시간으로 조정하거나 애니메이션을 적용 할 수있는 자유형의 아이디어 버전의 디자인 마지막 섹션에서는 다시 비슷한 모양의 사용자 정의 모양을 만들었습니다 팀 섹션, 이번에는 파란색 만, 옆에 웨이브 패턴과 커플 이 방문 페이지를 끝내기위한 둥근 모양의 결국이 프로젝트는 꽤 흥미로운 점은 클라이언트가 뭔가 다른 것을 원했기 때문입니다 이전에 사용하고 있었기 때문에 나에게 많은 창조적 인 자유를주었습니다 이것이 디자인의 최종 모습, 만약 당신이 좋아하는 비디오를 좋아하는 것을 잊지 마세요 버튼을 클릭하고 더 많은 것을 구독하십시오! 소스를 다운로드하려는 경우 Photoshop 파일의 경우 다음 설명에서 다운로드 링크를 찾을 수 있습니다

시간 보내라, 얘들 아, 안녕!

(Photoshop)Time Machine Make your grandmother look beautiful ^^포토샵 타임머신 귀여운 할머니 미인만들기

안녕하세요^^ 이번 시간엔 세월에 무게가 느껴지는 할머니를 미소짖는 중년여성으로 수정해 보겠습니다^^ 피부먼저 수정하고 쌍꺼플을 맞추겟습니다 세월을 거슬러 점점 변화하는 모습을 보시죠^^ 점에 흰 털이 계속 눈에 거슬리네요^^ 얼굴에 살을 조금 붙이고 머리 볼륨을 넣어주고 점점 인자한 미소로 변해 갑니다 눈화장과 립스틱을 바르고 이제 수정전 과 수정후를 비교해 볼까요? 할머니가 인자한 미소를 가진 여성으로 수정 되였습니다^^ 감사합니다^^

[포토샵 1분강좌] 패치툴을 이용한 무지티 만들기

패치툴을 이용한 이미지복제 by 고은희강사 툴박스에서 패치툴을 선택합니다 힐링브러쉬툴을 꾹 누르면 오른쪽메뉴에 있습니다 티셔츠위에 대체할부분을 클릭한 상태에서 손을떼지않고 잘 선택하여 영역을 만듭니다

영역안에 커서를 위치하고 무지티로 만들도록 드래그하여 움직여서 맞춰보세요 감쪽같이 티셔츠의 무늬가 사라졌습니다 ^^

Photoshop Responsive Web Design Tutorial – Understanding Mobile & Tablet Design 7/48

안녕, 유튜브! 내 이름은 댄이고 이것은 무료 동영상 중 하나입니다 그것은 내가 가르치는 코스의 일부입니다

그래서 당신이 좋아하면 설명에 링크가 있습니다 그러나 지금은 우리가 가진 것을 무료로 보자 적응 형 웹 디자인은 웹을 변경하는 방법입니다 브라우저의 크기에 따라 여기 당신은 Smashing Magazine을보고 있습니다

Smashing Magazine은 자주 읽는 웹 사이트입니다 나는 그들이 다른 페이지를 재 설계하려고 노력한 것을 좋아한다 브라우저의 크기에 따라 다릅니다 이제는 iMac과 같이 매우 큰 화면을 보게 될 것입니다 또는 매우 높은 정의를 지닌 매우 큰 모니터 인 4K 모니터입니다

왼쪽에는 메뉴와 탐색 하위 메뉴가 있으며, 주요 내용 및 광고, 하지만 정상적인 데스크톱에서 볼 때 줄어들면 당신은 그들이이 탐색 바를 바꾸는 것을 볼 것입니다, 주요 내용 및 광고 그러나 작아지면 타블렛을 보자 조금 변경 : 광고를 제거, 탐색 모음이 작아집니다 모바일 용 뷰로 축소하면 다시 변경됩니다 Photoshop에서 디자인 할 때 고려해야 할 사항은 무엇입니까? 그것은 정적 매체이며, 확장 가능하거나 신축 적이 지 않다는 것입니다

당신이 웹 페이지에서 얻는 것과 같습니다 Photoshop에서 프로토 타입을 요약 할 때 디자이너가 수행하는 작업 다른 시각을 디자인하는 것입니다 그래서 개발자에게 넘겨줌으로써 모바일로 바뀌면 사이트가하는 일을 알고, 메뉴가 태블릿보기에있을 때 어떤 일이 발생합니까? 모든 질문은 스케치에서 대답해야합니다 우리는 많은 의심들이오고가는 것을 원하지 않습니다 개발자와 사용자간에 문제 해결을 시도합니다

개념화 단계에서 해결되었을 것입니다 그리고 이것은 적응 형 웹 디자인에 대한 빠른 소개였습니다 공유하고 싶기 때문에이 무료 동영상을 만들었습니다 비록 내가 당신이 풀코스 과정을 계속하기를 원한다면, 50 개 이상의 동영상이 있습니다 설명에 할인 코드가 있습니다

제발, "좋아"하고 구독하십시오 나중에 YouTube에서 멋진 사람들과 만나십시오 나는 내 손으로 작별 인사를하고 있지만, 너는 그것을 보지 못했다 그렇지?