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 % 할인되었습니다 에서 링크를 확인하십시오 자세한 내용은 설명을 참조하십시오

나는 다음에 너를 볼거야!

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 위험하다, 다시 너희들을 만난다 🙂

Basic HTML for Web Design : Web Design Alt Text

나는 이미지를위한 대체 텍스트에 대해 이야기하기 위해 약간의 시간을 갖고 싶다 그리고 이것들은 정말로 중요하다

많은 브라우저가 사람들이 설정할 수없는 이미지 나 설정을 표시하지 않기 때문에 이미지를 표시하고 이미지에 텍스트가 있으면 그들에게 우리가 바로 여기에이 로고 살펴 보겠습니다 것을 놓칠 수 있기를 원하고 나는이 없습니다 죄송합니다 샘플 로고입니다 이미지 파일과 비슷하지 않습니다 당신이 알고있는보고있는 장애인은 그곳에 이미지가 있다는 것을 볼 수 없었습니다 샘플 로고는 대체 텍스트 또는 대체 텍스트를 추가하려고합니다

그래서 우리는 간다 여기서 이미지가 바로 여기에 jpeg와 같은 샘플을 가진 이미지 소스가 있습니다 그리고 우리 대체 텍스트를 추가하고 싶습니다 그래서 우리는 단어 alt를 문자 alt equals에 입력 한 다음 인용문을 입력합니다 마크를 추가하고 샘플 로고를 추가하고 싶습니다

그래서 그들은 그 이미지가 실제로 샘플이라는 것을 압니다 심벌 마크 그리고 그들이 독서와 같은 것을 가지고 있다면, 당신은 그것을 알고 있습니다 로고와 함께 시작한다고 말할 수있는 페이지가 있습니다 샘플 로고를 입력 한 다음 텍스트로 이동하십시오

그리고 당신은 텍스트가 거기에 있음을 볼 수는 없지만 if 우리는 빈 공간 대신 ​​이미지를 숨기려고했습니다 html 텍스트 샘플 로고