Sketch Web Design Course: E-commerce Checkout Page Design Part 2 of 2

저는 Skillthrive의 Hunter이고 두 부분으로 구성된 Sketch 과정의 두 번째 수업에 오신 것을 환영합니다 이번 강의에서는 체크 아웃 디자인 개념의 장바구니 섹션을 만드는 방법을 알려 드리겠습니다

또한 아직 작성하지 않았다면 다음과 같이 최종 Sketch 파일을 다운로드하십시오 Skillthrivecom의 무료 회원 설명에 참여할 수있는 링크가 있습니다 시작하려면 'T'를 눌러 텍스트 레이어를 만들고 '장바구니'를 입력하십시오

이 텍스트가 수업 1에서 만든이 텍스트 스타일로 설정되어 있는지 확인하겠습니다 텍스트 레이어를 왼쪽에서 95 픽셀, 위쪽에서 110 픽셀 이동합니다 하단은 오른쪽에있는 'Card Details (카드 세부 정보)'레이어의 하단에 맞춰져 있습니다 타원형 도구에 액세스하려면 'O'를 누르고 만들려면 드래그하는 동안 Shift 키를 누릅니다 150 픽셀의 원입니다

나는 경계를 끈 다음 무료 코스 파일로 돌아가서 하나를 드래그합니다 포함 된 시계 이미지의 여기에 와서 높이를 150 픽셀로 조정하고 원 위에 이미지를 맞 춥니 다 두 레이어를 모두 선택하고 마스크를 만듭니다 이 새 그룹의 이름을 '시청'이라고하겠습니다 위의 텍스트 레이어에서 그룹을 80 픽셀 이동합니다

텍스트 도구로 돌아가서 'Trendy Bamboo'를 제품 이름으로 입력하겠습니다 텍스트를 선택하고이 텍스트 스타일을 선택합니다 텍스트 레이어의 중심을 이미지 위에 놓고 65 픽셀 떨어진 곳으로 옮깁니다 레이어를 선택하고 Option 키를 누른 상태에서 드래그하여 복제합니다 텍스트를 선택하고 'Large'를 입력하여 시계 크기를 나타냅니다

그러면 텍스트를 다시 선택하고 가중치를 중간, 크기를 15, 문자 간격은 05입니다 또한이 텍스트 스타일을 저장 한 다음 레이어가 레이어의 맨 위가 제목의 맨 아래에 닿아 있다고 가정합니다 이제 수량 선택기로 이동합니다 먼저 가로 9 픽셀, 세로 3 픽셀의 사각형을 만듭니다

국경을 끄고 채우기가 순수한 흰색인지 확인하겠습니다 이 사각형의 이름을 '마이너스'로 지정하겠습니다 나는 사각형을 복제하여 11 픽셀 너비로 만들 것입니다 이 직사각형을 복제하여 여기에 올리면 90도 회전합니다 그런 다음 두 직사각형을 모두 선택하고 'Union'을 클릭하여 도형을 결합합니다

나는이 새로운 모양을 '플러스'라고 부를 것이다 'U'를 치면 둥근 사각형 도구로 바뀌고 둥근 사각형을 만들겠습니다 가로 60 픽셀, 세로 40 픽셀입니다 채우기를 해제하고 테두리 색상을 순수한 흰색, 두께를 1, 반지름을 8로 설정합니다 텍스트 도구로 가서 '1'을 입력합니다

텍스트는 'Large'텍스트의 글꼴과 동일해야하지만, 그렇지 않은 경우에는 저장된 텍스트 스타일을 선택하십시오 이제 숫자를 사각형 내부에 놓고 숫자와 사각형을 그룹화하고, 그룹의 이름을 '수량'으로 지정하십시오 그런 다음 둥근 직사각형의 왼쪽에 20 픽셀을 마이너스 기호로 가운데 맞추어 놓습니다 그 다음에는 더하기 기호를 반대로하십시오 마이너스, 플러스 및 수량을 그룹화하고 그룹의 '수량 선택기'이름을 지정하겠습니다

새 그룹을 제품 제목에 상대적으로 배치하고 간격을 240 픽셀 추가합니다 다음으로, 가격을 입력하고 텍스트 스타일을 제품 제목과 동일하게 변경하겠습니다 저는 텍스트를 중심에두고 그 양을 130 픽셀만큼 움직일 것입니다 22 픽셀 너비와 2 픽셀 높이의 새 사각형을 만들고, 테두리를 채우고 채우기가 순수한 흰색인지 확인하십시오 도형을 45도 회전시킨 다음 Command-D로 복제합니다

중복 된 이 아이콘을 클릭하면 가로로 뒤집습니다 그런 다음 두 직사각형을 모두 선택하고 'Union'을 클릭하여 모양을 결합합니다 모양을 '삭제'라고 이름을 정하고 가격 레이어에 가운데 놓고 110 픽셀 떨어진 곳으로 옮깁니다 마지막으로 키보드에서 'L'을 눌러 라인을 만듭니다 나는 교대를 잡고 완벽하게 직선을 만들기 위해 끌고 갈 것이다

색상이 순수한 흰색인지, 두께가 하나인지, 길이가 1,095 픽셀인지를 확인합니다 시계 이미지에 맞춰 왼쪽으로 45 픽셀 이동하고 이름을 '디바이더'로 바꿉니다 제품 섹션의 모든 레이어와 그룹을 선택하고 Command-G로 그룹화합니다 이 그룹의 이름을 '장바구니 항목'으로 지정하고 기호로 바꿀 것입니다 나는 심볼을 복제하고 각 새로운 섹션을 서로 45 픽셀 씩 간격을두기 위해 옵션을 잡을 것입니다

재정의를 사용하면 제품 제목, 이미지, 가격 등을 동적으로 변경할 수 있습니다 원본 Symbol에 영향을주지 않고 텍스트 도구로 돌아가서 '쇼핑 계속'을 입력하겠습니다 레이어를 왼쪽 정렬하고 마지막 장바구니 항목의 아래쪽에서 45 픽셀 이동합니다 옵션을 잡고 오른쪽으로 드래그하여 텍스트 레이어를 복제하고 텍스트 레이어를 변경합니다 text to 'Subtotal :'텍스트 레이어를 다시 복제하고 총 가격을 입력합니다

이 경우에는 '$ 10797'이며 텍스트 스타일을 변경합니다 부분합 위에 레이어를 배치하고 10 픽셀 간격으로 배치합니다 부분합 및 가격 레이어를 그룹화하고 이름을 '소계'로 지정합니다 바로 정렬합니다

카트 항목으로 이동하고 하단에서 40 픽셀 이동합니다 장바구니 섹션으로 만든 모든 레이어를 그룹화하고 장바구니 이름을 지정하겠습니다 그리고 그게 다야! 우리는 프로젝트를 수출하고 세계와 공유 할 준비가되었습니다 이 Sketch 튜토리얼이 마음에 들면, 여기에서 확인하십시오 그리고이 비디오가 마음에 들면, 그것을 엄지 손가락으로 올려 구독하고 친구와 공유하십시오

나는 다음에 너를 볼거야

Sketch Web Design Course: E-commerce Checkout Page Design – Lesson One

나는 Skillthrive의 Hunter이고이 두 편의 Sketch 튜토리얼의 첫 번째 수업에 오신 것을 환영합니다 이 수업에서는 프로젝트를 시작하고 색상 팔레트의 심볼을 만들고 체크 아웃 디자인 컨셉에 대한 구매 모달

오늘 내가 만들고있는 마지막 스케치 파일을 다운로드하려면 가입 할 수 있습니다 아래의 링크에서 Skillthrive를 무료로 이용하십시오 그렇게 말하면 시작합시다 Sketch를 연 다음 키보드에서 'A'를 클릭하여 대지를 만들어 봅시다 그런 다음 대지 보드를 클릭하고 드래그하여 1920×1080 크기로 설정하십시오

아트 보드의 장바구니 이름을 지정하십시오 다음으로,이 디자인에서 사용할 색상을 보유 할 Artboards를 몇 개 만듭니다 그 후에 프로젝트에서 색상을 쉽게 제어 할 수있는 기호로 변환 할 것입니다 아트 보드 도구에 액세스하려면 'A'를 다시 누른 다음 드래그하는 동안 Shift 키를 누릅니다 180 픽셀의 사각형을 만듭니다

그런 다음 'R'을 눌러 사각형 도구에 액세스하고 직사각형을 대지로 채 웁니다 나는 경계선을 끄고 16 진수 코드 F2B632로 채우기를 설정합니다 나는 그 색상을 내 문서 색상으로 저장할 것입니다 이 대지에 'color /'라는 이름을 붙이고 그 뒤에 16 진수 코드를 붙입니다 나는 다른 Artboards와 유사한 프로세스를 수행 할 것인데, Sketch to group 이 상징들은 함께

그런 다음 화면의 16 진수 코드를 사용하여이 과정을 5 번 더 반복합니다 대지 만들기가 끝나면 레이어 목록에서 선택합니다 그런 다음 레이어 중 하나를 마우스 오른쪽 버튼으로 클릭하고 '심볼 만들기'를 선택합니다 모든 프로젝트 기호를 저장할 새 페이지를 작성하십시오 아트 보드에 직사각형을 채워 배경을 만들고 테두리를 끕니다

직사각형의 채우기를 선택하는 대신 직사각형을 색상 Symbol의 마스크로 사용합니다 따라서 '문서'로 '삽입', '색상'으로 이동하여이 색상을 선택하겠습니다 내 마우스를 직사각형 위에 놓고 클릭하여 심볼을 배치합니다 이제 배경을 채우기 위해 기호의 크기를 조정할 수 있습니다 레이어 목록에서 심볼과 사각형을 선택하고 '마스크'를 클릭합니다

그런 다음이 그룹의 이름을 '배경'으로 바꿉니다 이 배경의 색상을 변경하려면 레이어를 선택하고 여기로 올 수 있습니다 색상 중 하나를 선택하십시오 다음으로 폭이 637 픽셀, 높이가 1,080 픽셀 인 직사각형을 만듭니다 그것은 대지의 오른쪽에 있습니다

나는 경계선을 끄고 직사각형 꼭대기에 색 기호를 놓을 것이다 크기를 조정하고 직사각형을 마스크로 사용하십시오 이 레이어의 이름을 'Modal Background'로 바꿉니다 내 키보드에서 'T'를 눌러 텍스트 도구에 액세스합니다 직사각형 상단을 클릭하고 '카드 세부 사항'을 입력하기 시작합니다

텍스트를 선택하고 텍스트 설정으로 이동합니다 나는 서체를 몬트 세 라트 (Montserrat), 체중을 세미 볼드, 크기를 40, 문자 간격을 23으로 설정할 것입니다 '텍스트 스타일 없음'이라는 텍스트 설정 위에있는 상자를 클릭하고 '새 텍스트 스타일 만들기'를 클릭하겠습니다 이제는이를 참조하여 일관성을 유지하고 일관되게 유지할 수 있습니다

내 프로젝트 전체에서 텍스트 스타일 다음 섹션으로 이동하기 전에 이동 도구로이 텍스트 레이어를 선택하겠습니다 위쪽에서 120 픽셀, 왼쪽에서 95 픽셀을 배치하십시오 Option을 누르고있는 동안 레이어를 이동하여 다른 요소와의 간격을 확인합니다 다른 텍스트 레이어를 만들고 '카드 유형'을 입력하겠습니다

이 글꼴을 선택하고 텍스트 크기를 20 및 문자 간격으로 변경합니다 17로 설정하고 새 텍스트 스타일을 만듭니다 이 레이어를 '카드 세부 정보'레이어의 왼쪽에 정렬하고 하단에서 85 픽셀 이동합니다 그런 다음 코스 파일로 이동하여 세 개의 신용 카드 이미지를 가져 와서 Sketch로 드래그합니다

세 개의 레이어가 모두 선택된 상태에서 커맨드 + K를 눌러 스케일을 조정합니다 모든 세 개의 레이어는 60 픽셀에 비례합니다 첫 번째 레이어를 왼쪽 정렬하고 섹션 제목 맨 아래에서 25 픽셀 이동합니다 다음 두 레이어를 서로 60 픽셀 씩 중앙에 배치합니다 Command + G를 눌러 네 개의 레이어를 모두 그룹화하고 '카드 유형'그룹을 호출합니다

텍스트 도구로 돌아가서 '카드에 이름'을 입력하겠습니다 이 레이어를 왼쪽 정렬하고 첫 번째 그룹의 아래쪽에서 60 픽셀 이동합니다 라인 도구에 액세스하려면 'L'을 누르고 직선을 생성하려면 Shift 키를 누른 상태로 드래그합니다 라인의 길이가 365 픽셀이고 두께가 1 픽셀이고 순수한 흰색으로 설정되었는지 확인하겠습니다 또한 섹션 제목과 60 픽셀을 맞 춥니 다

그런 다음 두 레이어를 그룹화하고 그룹의 이름을 카드에 이름을 지정합니다 다음 섹션을 만들려면 '카드의 이름'그룹을 선택하고 Option 키를 누른다 60 픽셀을 드래그하여 그룹을 복제했습니다 그룹 이름을 '카드 번호'로 변경하고 일치시킬 제목을 변경하겠습니다 나는 다음 섹션을 같은 방식으로 복제 할 것이고 나는이 그룹을 'Expiry Date'라고 부를 것이다

섹션 제목을 변경하십시오 선을 53 픽셀로 단축합니다 이제 선 도구로 20 픽셀 수직선을 만들고, 이번에는 Shift 키 나는 아래로 끌고 간다 그런 다음 만료 날짜 그룹에서 해당 줄을 이동합니다 Shift-Command-R을 누르고 마우스를 사용하여 20도 회전시킵니다

그런 다음 선을 왼쪽 선의 맨 아래에 정렬하고 5 픽셀 떨어져 있는지 확인합니다 두 레이어를 선택하고 Option 키를 누른 채로 오른쪽으로 드래그합니다 또한 Shift 키를 누른 채로 선을 위아래로 움직이지 않도록 할 수 있습니다 이번에는 새로운 수익을 왼쪽의 회전 된 선의 위쪽 가장자리 자, 이제 단 하나의 추가 수익이 필요합니다

따라서이 옵션을 선택하고 Option과 이것을 같은 방법으로 정렬하십시오 5 줄 레이어를 그룹화하고 '만료 정보'그룹을 호출합니다 이 레이어를 섹션 제목의 하단에서 43 픽셀 이동합니다 다음 섹션에서는 만료 그룹의 옵션을 잡고 오른쪽으로 드래그합니다 이 그룹 및 섹션 제목을 'CVV'로 지정하겠습니다

나는 'Expiry Info'그룹에 들어가서 가장 왼쪽 하단 라인을 그룹 밖으로 끌어 올 것이다 그런 다음 그룹을 선택하고 삭제합니다 그런 다음 그룹을 위아래로 이동하지 않도록 그룹을 정렬합니다 이 모든 레이어를 선택하고 그룹화하여 '카드 세부 정보'라고합니다 폭이 638 픽셀이고 높이가 152 픽셀 인 새 사각형을 만듭니다

나는 경계선을 끄고 노란색 심벌 컬러를 사용할 것이다 레이어 이름을 '버튼 배경'으로 지정하겠습니다 텍스트 도구로 가서 'Complete Purchase'를 입력하겠습니다 텍스트를 선택하고 크기를 30으로 변경합니다 이 텍스트 레이어와 버튼 배경을 선택하고 함께 그룹화 한 다음 새 그룹 'Purchase Button'

텍스트 레이어를 가운데에 배치하고이 레이어에서 새 텍스트 스타일을 만듭니다 모달 배경, 구입 단추 및 카드 정보 그룹을 선택하고 이름을 지정합니다 'Checkout Modal'그룹 그런 다음이 그룹에서 심볼을 만들어 심볼 페이지로 보냅니다 그리고이 수업을 위해서입니다! 다음 단원에서는 장바구니를 만들 것입니다

나는 다음에 너를 볼거야!

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

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

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

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

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

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

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

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

Responsive web design | css media query | html viewport

이것은 html 웹 페이지입니다 응답하는 이제 내가 어떻게 반응하는지 보여 줄거야

이렇게 더 작은 장치에서 완벽하게 작동합니다 화면 너비 변경시 atomaticalley 변경 요소의 스타일링 이제 스타일 시트에서 미디어 쿼리 코드를 삭제했습니다 이제 기본 스타일로 표시되는 웹 페이지 더 작은 장치에서는 읽을 수 없다 더 작고 더 큰 장치에서 읽을 수 있도록하기 위해 미디어 쿼리를 사용합니다 이제는 휴대 전화 및 안드로이드 기기와 같은 기기에서 읽을 수 있도록 해 드리겠습니다

이것은 태블릿의 화면 크기입니다 ibrowser inspector에서 view-port를 확인할 수도 있습니다 (ctrl + shift + I) 이것은 모바일 화면 너비입니다 이제 코드로 되돌아갑니다 이것은 스타일 시트이다

내가 사용한 수업에 대한 설명은 이전 비디오 링크를 확인하십시오 이제는 미디어 쿼리를 사용하여 더 작은 장치에서 웹 페이지를 읽을 수있게했습니다 미디어 쿼리는 @media 화면으로 시작합니다 최대 또는 최소 미디어 장치 너비 또는 높이 사용을 피하십시오; 값 다음에 표시하다 중괄호 사용 이 중괄호 안의 요소를 정의하기 시작합니다 우선 부모의 모든 너비 설정 집단 내지 100 %; 그런 다음 하위 요소의 스타일을 변경합니다 이제는 평소와 같이 요소를 정의하십시오

지금 이것은 읽을 수있다 사이드 바, 메인 컨텐츠 및 오른쪽 사이드 바 모두 100 % 너비로 설정됩니다 이제 링크, 로고 및 사이트 제목을 정의 할 수 있습니다 헤더 부분에 4 개의 div 엘리먼트가있다 그래서 그것을 읽기가 어렵게 만드는 것은 어렵다

링크 엘리먼트가 바닥에 고정된다

Timeline by Anima: Web Design Animation & Export Code from Sketch

Sketch 내에서 코드로 디자인, 애니메이트 및 내보내기 나는 스킬 라이벌 (Skillthrive)의 헌터 (Hunter)이고, 이것이 가능한 방법을 보여줄 것입니다

Anima Plugin 여기에서는 새로운 전자 상거래를위한 체크 아웃 페이지를 디자인했습니다 저장 타임 라인을 사용하면 구매 버튼을 사용할 수 있습니다 정적 인 디자인, 웹에 적합한 대화 형 요소 만들기 등이 포함됩니다

먼저, 나는에 갈 것이다 내 심볼 페이지에서 체크 아웃 버튼 아트 보드를 선택하십시오 그럼 나는 Anima 패널에서이 아이콘을 클릭하면 타임 라인 옵션이 표시됩니다 와 더불어 아트 보드를 선택하면 '상호 작용 디자인'을 클릭하여 애니메이션을 시작할 수 있습니다 첫 번째 상태에서 사용자가 클릭 할 때 전환을 트리거하는 액션을 설정합니다

요소들 그런 다음 상태 2에서 '어두워지는'레이어를 오른쪽으로 이동합니다 대지를 채울 때까지 전환 기간을 늘릴 것입니다 1 초로 설정하고 곡선 유형을 선형으로 변경합니다 즉, 전환이 하나 인 경우, 일정한 속도

'Play'를 클릭하여이 전환을 미리 볼 수 있습니다 전환 (Transition) '을 클릭하십시오 다음으로 세 번째 상태와 최종 상태를 추가하고 상태 2를 상태 3에 연결하는 동작, 이번에는 '타이머 설정'을 my 행사 현재 이벤트는 0으로 설정됩니다 즉, 다음 전환을 의미합니다

그것이 끝나기 바로 전에 상태로 시작하십시오 이제 상태 3을 수정하고 체크 아웃 텍스트, 노란색 배경 및 어둡기에 대한 가시성 해제 배경을 표시하고 녹색 배경에 대한 표시 여부를 성공 텍스트 두 텍스트 레이어의 애니메이션 지속 시간을 04로 연장하겠습니다 초

이 텍스트 레이어가 끝나면이 텍스트 레이어가 희미 해지기를 바랍니다 페이딩 아웃, 그래서이 곳의 시작 부분을이 곳으로 옮깁니다 끝내라 이제이 대화 형 디자인을 코드로 내보내겠습니다 하기 위해서, '코드 내보내기'를 클릭하기 만하면 타임 라인에서이 링크를 만듭니다

링크에서 요소와 상호 작용하거나 개발자에게 넘기거나 심지어 JS Fiddle 또는 CodePen에서 코드를 호스팅하십시오 그리고 그게 다야! 몇 분만에 나는 타임 라인을 사용하여 대화 형 디자인을 생성하고 코드없이 모두 내보낼 수 있습니다 스케치를 떠난다! Anima Plugin에게 기회를 줄 준비가되어 있다면, 그들은 Skillthrive 회원은 처음 3 개월 동안 15 % 할인되었습니다 에서 링크를 확인하십시오 자세한 내용은 설명을 참조하십시오

나는 다음에 너를 볼거야!

making website with html & css from Photoshop design pt1

이 그래픽을 웹 사이트로 만들 예정입니다 나는 웹 사이트가 될 부분을 이미 만들었습니다

이것들이 사업부가 될거야,이게 머리가 될거야 이것은 네비게이션이 될 것입니다, 이것이 배너가 될 것입니다 이것은 스페이서 하나, 기사, 섹션, 바닥 글, 스페이서 2가 될 것입니다 그래서 우리는 하나, 둘, 셋, 넷, 다섯, 여섯, 우리가 가질 일곱, 여덟 몫이야 우리가 갈 물건이 너무 많아서 저를 참아주십시오

각 div에 대해 작은 빨간색 사각형을 만들었습니다 HTML5에서는 헤더, 탐색, 배너를 수행합니다 이것들은 클래스가 아닙니다 헤더 HTML5는 새로운 일을하기 때문에 머리말이됩니다

그리고 그들은 머리말과 항법과 같은 낱말을 가지고 갔다 그것들을 HTML로 만들었 기 때문에 클래스에 CSS를 넣을 필요가 없습니다 하지만 우리는 클래스에서 CSS가 아닌 태그로 호출해야합니다 그래서 내가 바라는 첫 번째 사실은 오직 우리는 이것을 우리 고객을위한 이미지로 만들었고, 고객에게 보여주었습니다 웹 사이트가 어떻게 보이는지, 우리 웹 사이트를 만드는지도이기도합니다

그러나 우리는 웹 사이트의 그래픽에 많은 것을 사용하지 않을 것입니다 우리가자를 때 우리 웹 사이트에 사용할 유일한 조각이 될거야 로고, 페이스 북의 작은 로고, 배너 이미지 및 여기 두 가지가 녹색 원과 파란색 작은 버튼입니다 그리고 우리는 실제로 CSS에서도 그렇게 할 수 있습니다 그러나 우리는 그것들을 이미지로 만들어서 더 쉬울 것입니다

좋아,이 부서의 내부에서 우리는 하나, 둘, 셋, 네 개의 div를 할거야 나는 거기에 넣었어야했지만 우리가하는 것을 보게 될 것입니다 여기에 div를 두 개 넣을거야 그러면 여기에 div를 두 개 넣을거야 네비게이션에서는 두 개의 div를 여기에 넣을 것이고, 하나는 로고 용이고, 하나는 페이스 북과 텍스트를위한 것이고 여기는 모든 텍스트가 될 것입니다

당신이 텍스트로 보는 모든 것은 가정 서비스처럼 텍스트 일 ​​것입니다 탐색 파란색 배경은 파란색이 될 것입니다 이미지가 아닙니다 이 공간은 파란색이 될거야 이미지가 될 수 없어, 뒤에있는 초록색은 이미지가 아닌 색이 될 것이고, 뒤에있는 초록은 이미지가 아닌 색상이되고 바닥 글은 이미지가 아닌 색상이 될 것입니다 이제 우리가 그 일을 처리하게 되었으니, HTML 내부에 함께 넣어 보겠습니다

메모장에서 파일, 다른 이름으로 저장을 할 것입니다 우리의 데스크탑에 가서 Ohio Dental 폴더를 열어 보겠습니다 그리고이 indexhtml을 호출하고 저장을 클릭합니다 그리고 우리가 나의 오하이오 치과 폴더에 가서 당신이 그것을 열면, 여기에 몇 가지 자산이 있다는 것을 알게 될 것입니다

Indexhtml과 우리가 방금 포토샵에서보고 있던 indexpsd 로고가 있습니다 png 배너 이미지가 있습니다

우리는 의사의 이미지를 얻었고 그 다음에도 치과 스케치를 가지고있었습니다 그래서 제가하고 싶은 것은 제가 이것들을 조금 정리하고 싶습니다 새 폴더를 만들거야 이 사진을 하나의 이미지라고 부르면 모든 이미지를이 이미지에 넣을 것입니다 폴더가 웹 사이트와 연결될 것입니다

그럼 나는 새 폴더를 만들거야 이미지 사이트 또는 이미지 원본 이것들은 당신이 웹 사이트를 만드는데 사용했던 모든 이미지들입니다 스케치 일 수도 있고, 그냥 indexpsd 일 수 있습니다

그런 다음 CSS cuz라는 다른 폴더를 만들어야합니다 거기에 스타일 시트를 넣을거야 그래서 저는 이것을하고 파일> 다른 이름으로 저장을 해봅시다 Stylesheetcss를 CSS 폴더 안에 넣고 저장하십시오

그리고 지금 스타일 시트를 닫자 indexhtml을 작업 해 보자 페이지에서 CSS 폴더 안에 스타일 시트가있는 것을 보자 메모장으로 열어 보겠습니다

코드를 작성해 봅시다 html 쉘, html, 그리고 html을 닫는다 그리고 나서 우리는 타이틀 태그를 만들고 싶습니다 그 녀석들은 다 끝났어 제목, 오하이오 주 치과 의사 인데요

검색 엔진 최적화를 위해 오하이오주는 주 치과 의사입니다 누군가가 그 글을 쓰면 그걸 얻게 될거야 그럼 우리는 구매 꼬리표를 넣을거야 속물이 아니라 몸매 태그 그리고 나서 우리가 입을거야

우린 머리를 쓰는 걸 잊어 버렸어 너의 모든 것을 위해 머리를 넣어야 해 CSS 및 JavaScript 정보 좋아요, 우리는이 html을 준수 할 것입니다 그래서, 내가해야 할 일은 그 일을 시작하는 것입니다

그래서, 우리가 할 수있는 것은 느낌표입니다 DOCTYPE이라는 ​​단어를 대문자 그럼 우리는 제목 뒤에, 우리는 메타 태그를 할 필요가 있습니다 메타 문자 세트 = "UTF-8"및 그것은 대문자 UTF-8이어야합니다 일반적으로 HTML은 모두 소문자로 표기 할 수 있습니다

나는 물건을 철자하는 것이 더 쉽다 그리고 나서 우리는에 대한 링크를 넣을거야 CSS는 스타일 시트이며, 당신이 모든 것을 정확히 철자하는지 확인하십시오 그렇지 않으면 작동하지 않을 것입니다 이미 알고 있습니다

그리고 나서 우리는 stylesheetcss를 넣을 것입니다 내가 사물을 쓰고 있는지 확인 하겠어 나는 그들이 모두 철자가 맞는지 확인하는 것만은 아닙니다 다시 한번 살펴 보겠습니다

제목 메타 문자 세트 UTF-8 링크 상대 스타일 시트 href = stylesheetcss 안녕하세요? CSS 스타일 시트, 그래서 우리는 당신의 이름을 저장, 복사, 바로 여기에 붙여 넣으세요 그것은 내가하는 공통점입니다 이제는 CSS 폴더 안에 있으므로 CSS / 여기에서 오는거야

폴더에 넣고 스타일 시트에 넣습니다 좋아요, 저장하겠습니다 S를 저장하면 저장됩니다 다음은 PSD로 돌아가 보겠습니다 우리는 하나, 둘, 셋, 넷, 다섯, 여섯, 7, 8 divs, 헤더, nav

그럼 해보 죠 우리는 머리글을 먼저 가지고 있습니다 그런 다음 헤더를 닫습니다 그런 다음 탐색을 수행합니다 탐색을 닫습니다

그래서 이것을 복사, 붙여 넣기, 붙여 넣기, 붙여 넣기, 붙이기 등의 작업을 할 수 있습니다 nav가 배너 인 후에 그리고 nav가 말한 곳에 배너를 씁니다 그 다음 배너 뒤에, 보자 우리는 하나, 기사를위한 공간이 없다

죄송합니다, 나는 간다 spacer1, 우리는 기사를 가지고있다 그 단어를 철자하기가 어렵습니다 그런 다음 섹션, 바닥 글, 스페이서가있는 기사까지 섹션, 바닥 글, 그리고 나서 스페이서를 걸고 여기에 놓으십시오 그리고 저는 1을 2로 칠 것입니다

<spacer1> </ spacer1>, <spacer2> </ spacer2>에 1이 있어야합니다 좋습니다, 그래서 우리는 준비가되어 있습니다 이제 거래가 있습니다이 작업을 할 때 배경이 있습니다 여기에 흰색이 있고 여기에 파란색이 있고 여기에 흰색이 있습니다

그러면 밝은 녹색, 파란색, 녹색이 바닥에 있습니다 그럼 우리는 배경 색상으로 사용하기 위해이 스트립을 사용합니까? 그것에 대해 생각해보십시오 이 텍스트와 여기의 텍스트가 여기에 녹색을 밀었 을까요? 그게 맞지 않는 거지 그래서 평상시에하는 일은 데스크톱 용입니다 나는 지금 모바일에 대해서 생각조차하지 않는다

나는 모든 길을 가로 지르는 div를 가지고 있으며, 모든 길 건너편에 있습니다 그래서 우리는 2, 3 중 하나를 할 수 있습니다 이 모든 종류의 방법이 있습니다 내 머리말, 그냥 거기서 시작합시다 우리는 흰색 머리말을하고 싶습니다

우리는 충분히 높이 올리고 싶습니다 우리는 divs를 내부에 가지고 싶기 때문에 그것을 가져 오도록하겠습니다 먼저 머리글을 작업 해 보겠습니다 먼저 헤더를 CSS를 열어 보겠습니다 메모장으로 열어 봅시다

그래서 지금 나는 둘 다 열려 있습니다 좋아요, 머리글 앞에는 점이 필요 없어요 사촌 일 필요는 없습니다 우리는 이것을 980 픽셀 너비로 만들고 싶습니다 맞습니까? 내가 여기에 있다면, 내가 980 픽셀 너비로 만들었다 고 생각해

그렇지? 무슨 일이 일어 났는지 보자 제 시간에 돌아 가자 이미지 크기는 980입니다 좋아, 메모장, 스타일 시트, 우리는 {width : 980px;}, 우리는 이것을 자체 회선에 넣을 것입니다 그것을 자신의 라인에 넣으십시오

그럼 우리는 글을 쓸거야, 우리는 키즈를 넣을 필요가 없다 우리가 할 로고가 충분히 높을거야 그래서 우리는 중심에두고 싶습니다 그래서 나는 항상 잊어 버렸다 너무 많은 CSS 센터 div 않습니다

W3C 학교 예, 어떻게해야합니까? 저것 봐, 여백있어 그것은 마진입니다 나는 항상 잊는다, 나의 두뇌는 매우 잊기 쉽다 그럼 마진을 두자

위아래에 0 픽셀을 원합니다 그리고 우리는 왼쪽과 오른쪽에 자동을 원합니다, 자동은 오른쪽에 센터를 의미합니다 자, Ctrl + S를 저장해 봅시다 배경색을 만들어 보겠습니다 그래서 우리는 우리가 작업하고있는 것을 알고 있습니다

배경색, 그리고 빨간색으로 가자 지금 우리가 볼 수있게, 알았어 저장하십시오 이제 Chrome에서 Google 색인 페이지를 열어 보겠습니다 Google 크롬으로 열기

아직 거기 엔 아무것도 보이지 않을거야 거기에 이미지를 넣자 [COUGH] HTML로 돌아가 보겠습니다 헤더 안쪽에서 하나는 로고 또는 div 클래스라고합니다 나는 비행 녀석에 이것을 전부하고있다

우린 실수를 저지를거야 좋은거야 내가 어떻게 그들을 극복하고 가까운 문제를 해결하는지 보게 될테니까 이 div 안에는 img src =를 넣을 예정입니다 내 이미지 폴더 /logo

png로 이동하십시오 좋아요, 거기에 있어야합니다 우리 페이지를 다시 열고 새로 고침 해보자 봐, 그래, 지금은 다르다 좋아, 그 이미지를 그곳에 넣어야 했어

그래 이것은 로고입니다 그래서 저는 그것뿐 아니라 로고를 넣고 싶습니다 우리는 Photoshop에 나가서 수확 도구를 얻고 내가자를거야 오하이오 가정

좋습니다 맞아, 어디 보자 니스, Enter 키를 누르십시오 직접 할 수 있습니다 실제로 저는 이것을 자산에 넣을 것입니다

파일> 내보내기> 저장 웹, 죄송합니다, 무슨 일 이니? 파일> 내보내기> 웹용으로 저장을 선택합니다 이전 버전의 Photoshop을 사용하는 사용자는 File, Save for 웹, 내보내기가 아니며 이번에는 JPEG로 저장합니다 내가 볼 때 PNG로 해 그런 다음 오하이오 치과 이미지 폴더로 이동합니다 여기 안에 로고를 쓰려고합니다

이제 logopng가 있고 logojpg가 있습니다 내 logojpg, 사용하고 싶은 로고입니다

다시 여기로 가서 jpg를 집어 넣자 그걸 저장하고, 우리에게로 돌아 가자 이제 여기에 약간의 줄이 있습니다 그게 뭔지 궁금해? 그래서 내가하고 싶은 것은, 박쥐에서 벗어나기를 원한다는 것입니다 <a href = and 다음 index

html, 그래서이 로고는 모든 페이지에있을 것입니다 그것은 바로 홈페이지로 다시 연결됩니다 저장하고 Chrome으로 이동하여 새로 고침하고 내가 그 위에 마우스를 올리면, 이렇게 보입니다 나는 그것을 클릭 할 수 있습니다 그것은 인덱스 페이지로 돌아갑니다 좋습니다

자 이제 CSS를 더 해보겠습니다 나는 약간의 물건으로 놀고 싶다 나의 CSS는 어디에서? 알았어 머리글 앞에 내가 다시 가자

CSS와 여기에 왼쪽에 여백 CCS 여백이 있습니다 내가하려는 일은 내가하고있는 일에 대해 너에게 말하고 싶지 않아 제가하고있는 일은 div 위에있는 하얀색 부분을 보게 될까요? 나는 그 마진을 없애고 싶다 그래서 몇 가지 다른 방법이 있습니다 나는 시체를 쓸 수 있었다

이 부분을 바로 여기 복사해서 거기에 넣으십시오 그리고 여백 0 %를 쓴 다음, 배경색, 파란색으로하자 이제 우리는 무슨 일이 일어나고 있는지 알 수 있습니다 저장하고 새로 고치십시오, 거기 우리는 간다 당신은 그것이 위로 올라가고 푸른 색이 배경에 있다는 것을 보았습니까?

Shop Web Design – Adobe XD to HTML CSS Tutorial (Part 1/2)

안녕 모두들 인도네시아에서 Angga Risky에 오신 것을 환영합니다 어떻게 지내십니까? 이번에는 디자인을 공부하고 HTML 및 CSS에 디자인을 적용하는 법을 배웁니다 그래서 우리는 Adobe XD Software를 사용하여 처음 디자인 할 것입니다 그 다음엔 부트 스트랩으로 HTML과 CSS로 디자인을 만들 것입니다 좋아요

시작하기 전에 오늘의 질문이 있습니다) 어제 저는 채널 커뮤니티에서 많은 질문을 받았습니다 그리고 하나씩 대답하고 싶습니다 그래서 지금 질문은 그래픽 디자이너가 된 기분이 어떻습니까? 그래, 그게 내가 가진 질문이야 자이 디, 그 전에 2005 년에는 그래픽 디자이너로 일했습니다 그리고 저는 마케팅에 대해 많은 것을 배웠습니다 그리고 인터페이스와 비주얼 디자인에 대해서도 마찬가지입니다 그래서 나는 내 자신의 디자인 기술을 향상시킬 수있는 것들로부터 또한 관계 및 네트워크 기술 향상 (관계 속) 또한 마케팅에서의 카피 라이팅 기술에 대한 전문성을 높입니다 그것은 어때? 나는 행복하고 매우 혼란 스럽다 때로는 관리자가 둘 이상 있기 때문에 때때로 디자인 A를하면 갑자기 매니저가 A 디자인을 변경하라고합니다 하지만, 다른 관리자 그는 그가 A 디자인을 좋아한다고 말한다 What and so ?? 어떻게하면이 프로젝트를 끝낼 수 있으며, 심지어 이것이 항상 불완전해진다 거기에 많은 관리자가 있다는 것을 알고 있습니다 하지만, 지금 내 제안은

최고 직책을 가진 관리자의 지시를 따르십시오 때로는 제품 또는 회사의 소유자이기 때문에 최고 관리자의 목소리를 따를 것입니다 가장 낮은 관리자가 아닙니다 예를 들어 관리자가 3 명이므로 가장 높은 방향을 따를 수 있습니다 그래서, 그는 너를 도울거야

회사 소유자에게 디자인을 확인하려면 결론은, 최고 관리자의 방향을 따르고 디자인은 제품 소유자가 확인합니다 좋아요

이번에는 비디오에 대해 계속하겠습니다 오늘은 Adobe XD 및 HTML CSS를 사용하여 디자인 할 것입니다 하지만 매우 길기를 원하지 않기 때문에 2 개의 비디오로 만들 것입니다 그래,이 비디오에서 우리는 첫 번째 비디오를 만들 것입니다 디자인을 HTML 및 CSS (Bootstrap)로 구현하려면 알았어, 그냥 가자

좋아, 내 데스크톱에 오신 것을 환영하며 디자인을 위해 1 개의 그림을 준비했습니다 전자 상거래 웹 사이트에서 가져온 것입니다 먼저 사진이나 제품 사진을 준비 할 수 있습니다 그래서 이것은 Adobe XD입니다 그래서 우리는 중간 크기의 아트 보드를 만들 것입니다

그런 다음 문서를 먼저 저장합니다 그 후 우리는 Adobe XD에서 그리드 시스템을 사용합니다 또한 사용하는 CSS 프레임 워크를 기반으로 사용자 정의 할 수 있습니다

그래서 Bootstrap 프레임 워크를 사용하여 더 쉽고 빠르게 만들 것입니다 메뉴의 왼쪽과 오른쪽에 로고가 있어야합니다 나중에 우리 제품에서 얻을 수있는 주요 색상은 나중에 더 적합합니다

Photoshop CC 2015 Tutorial: What is Technically Possible in Web Design | Adobe tutorial 2017 16/48

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

그래서 당신이 좋아하면 설명에 링크가 있습니다 그러나 지금은 우리가 가진 것을 무료로 보자 이 비디오에서 우리는 우리를 도울 수있는 것들을 볼 것입니다 우리가 Photoshop 후에 웹을 만들 때 Photoshop에는 무한한 가능성이 있습니다

우리는 음영이있는 그라디언트를 가질 수 있습니다 유니콘과 모든 종류의 물건을 날고 불에 태워라 우리는 포토샵에서 그렇게 할 수 있습니다 그것은 그러한 종류의 프로그램입니다 하지만 웹 디자인에 관해서는 꽤 제한되어 있습니다

코드에 의해 웹에 어떤 것들이 놓일 수 있는지에 관해서 무엇보다도 브라우저에 달려 있으며 브라우저의 나이는 얼마입니까? 그것이 견딜 수있는 것과 불가능한 것 유니콘 비행? 아니요, CSS 기능은 없습니다 그러나 그라데이션 및 평행 음영을위한 함수가 있습니다 우리는이 웹 사이트 "caniuse

com"을 사용할 수 있습니다 이 유형의 페이지가 더 있습니다 나는 이것을 좋아한다 그래디언트를 사용한다고 가정 해 봅시다 그라디언트를 쓸 때 CSS 그래디언트 Opera Mini를 제외한 모든 제품에서 작동합니다

Opera Mini와 호환되는 경우 그라디언트를 사용하여 재검토하십시오 그라디언트는 지금 스타일이 아니고, 평면 디자인이 수행되고, 그래디언트가 필요하다고 상상해보십시오 Opera Mini와 호환되어야하는 경우 당신은 CSS 그래디언트없이해야 할 것입니다 당신이 알아야 할 또 하나의 것은 이전 브라우저와 호환되어야하는 경우 웹 사이트를 만들고 표준이 호환 가능한 경우 적어도 Internet Explorer 9에서는 CSS 그래디언트가 없습니다

그것은 당신이 그들을 사용할 수 없다는 것을 의미하는 것이 아니라 단지 나타나지 않는다는 것을 의미합니다 그래디언트를 적용하지 않으면 평평한 배경을 만들 수 있습니다 일반 배경색과 아무런 일도 일어나지 않는다 그것은 배경에 있기 때문에 중요하지 않습니다 우리는 그림자를 찾을 것입니다

몇 가지 유형의 그림자가 있습니다 상자의 그림자 : <div> 태그의 측면에 매달려 있습니다 그들은 일률적으로 작동합니다 문자 그림자를 보자 IE 9와 호환되지 않습니다

결정할 수 있기 때문에 이것은 더 중요합니다 흰색 배경에 밝은 파란색 텍스트가, 그 뒤에 그림자가 있지 않으면 완전히 읽을 수 없습니다 당신은 그 그림자를 가지고있어서 당신은 텍스트를 읽을 수 있습니다 그리고 그것은 Internet Explorer 9에서 일어날 것입니다 흰색 배경에 흐리게 표시된 텍스트가 표시됩니다

이것은 더 중요합니다 이 사이트를 한번보세요 웹 사이트에서 무언가를 할 수 있는지 묻는 질문 : "사용할 수 있습니까?" 웹의 또 다른 특징은 다음과 같습니다 여기에서 나는 내가 아일랜드에 있다는 것을 발견한다 그것은 내가 지금 녹음하고있는 곳이다

가져 오기를 클릭하면 다음과 같은 메시지가 나타납니다 기본적으로이 데이터는 나에게 글로벌 데이터를 제공하며 현재는 아일랜드의 데이터를 제공합니다 전 세계적으로 90 % 호환되는 것을 볼 수 있습니다 아일랜드에서는 97 %가 호환됩니다 전 세계에는 모든 국가가 포함되며 아일랜드 최신, 기술적으로, 현재 브라우저 및 컴퓨터와 더 많은 호환성이 있습니다

개발 도상국을 위해 특별히 웹 사이트를 만드는 경우 당신은 여기서 매우 다른 비율을 가지게 될 것이고, 그것은 훨씬 더 작아 질 것입니다 이 기능 중 일부는 여기에서 사용할 수 없습니다 그리고 이것은 "사용할 수 있습니까?"웹 사이트였습니다 공유하고 싶기 때문에이 무료 동영상을 만들었습니다 비록 내가 당신이 풀코스 과정을 계속하기를 원한다면, 50 개 이상의 동영상이 있습니다

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

Shop Web Design – Adobe XD HTML CSS Tutorial Part (2/2)

안녕 모두 다시 돌아 왔고 이전 비디오의 비디오 연결입니다 이 비디오에서 우리는이 디자인을 계속할 것입니다

HTML 템플릿에 부트 스트랩 프레임 워크 사용 그리고 현재로서는 웹 사이트에서 사용할 자산의 일부부터 시작해야합니다 이번에는 Part 1에서 비디오까지 시청 해 주셔서 감사합니다 이제이 비디오에 대해 조언을 해주시기 바랍니다

그래서이 비디오가 당신에게 좋은 것이라고 생각한다면 나에게 말해줘 그리고 그것이 충분하지 않다면, 당신은 또한 나에게 그것을 향상시키는 방법을 말할 수있다 Ok, 인도네시아 인사, 나는 Angga 위험하다, 다시 너희들을 만난다 🙂