이것저것 다 하는 인하우스 디자이너~ 약간은 기분이 좋아지는 작업 영상?

거지 패션으로 하루를 시작합니다 토마토와 두유를 챙겨가고 있어요

아침 식사 대용 이 이미지 괜찮나? 아 이걸 어떻게 딸 것인가 고민중 구름을 따자! 펜툴로 한번 따보자! 핵 노가다

음 이건 아닌거 같아 패스 없앰 어떡하징? 지우개로 지우자 그냥~ 속이 다 시원ㅋ 기분 좋아~~~ 지우개는 블러가 들어있는 브러쉬로 선택해서 구름이 자연스럽게 분리될 수 있도록 카카오 채팅 무엇? 세심하게~ 그래도 나름 세심해야 돼요 구름 모양 몽실몽실 초 힘듬 구름이 왜이렇게 많은지 그리는게 더 빠를 뻔ㅋ 내가 원하는 톤으로 보정도~ 약간 그린 빛이 좋군 이미지 사이즈 살짝 줄이고~ 일러스트레이터에 가져옴 점심시간! 뭐 먹을지 메뉴 고심해서 선택중 먹는 것도 고민 선택 완료 자 다시 시작해볼까? 이번엔 보트를 따겠음 올가미 선택 툴로 대충 붙여넣기! 적당한 크기로 줄이기 어디다 둘까? 회전도 시키고 여기가 좋겠군 다시 지우개 툴로 지워준다 자연스럽게 이미지에 흡수되도록 배경에 비해 너무 밝은 것 같군 보트 뒤에 물이 넘 밝은듯 그 부분만 선택해서 어둡게 처리 살짝만~ 좋아 이정도면 됐어 자, 이제 패키지 디자인을 시작하자 이제껏 해놨던 디자인에서 소스 찾는 중 카페인도 섭취하고 택배 박스 디자인 하는 중 먹색만 가능하다고 함

칼 선에 맞춰서 상상하며 디자인 중 택배 박스에 취급 주의가 빠지면 안되지 여기저기 넘나들며 디자인 바닥면은 사선으로 열지 못하게 표시 제품 사이즈를 기재하기로 함 몇 mm냐? 음 지름은? 이런 씰링 테이프 장식도 넣기로 함 얘도 블랙으로 처리

C 0, M 0, Y 0, K 100으로 하면 블랙임 위치를 예쁘게 세심 그 자체 가로 선도 넣고 씰링 테이프 장식 넣으니까 옆에 로고랑 부딪치는 느낌 빼버리자 단위 변환 찾아보기 제품 사이즈를 기재중 펌프까지의 길이는? 원하는 폰트 찾기 이런 사이즈 기재도 디자인 요소로 활용될 수 있음 크기 비례 잘 봐야겠죠? 지름은 파이(Ø)도 기재하자! 부피도 쓰고~ 웰-메이드 로고~ 이게 낫나 저게 낫나 여긴 두 줄이 낫겠군 우리 브랜드의 메인 슬로건

Full of Goodness 지그재그 문양 추가 디자인은 이런 디테일이 중요하다 바쁨 바쁨~~~~ 한쪽 면은 이런걸 넣어볼까? 로고도 크게 넣어줘야지 슬로건도 크게 넣어줘야지 슬로건 서브 문구 기재중 디자이너는 영어도 잘해야 하나? 가끔은 궁금함

ㅋ 메인 슬로건 가로 길이에 딱 맞게 셋팅 갑자기 그림을 위에서 아래로 투시 있게 해달라는 요청 너무행 다했는뎅ㅠㅠ

하면 되지 뭐 ㅠㅠ 디자이너는 원래 이런 것임 하고, 엎고, 하고, 엎고 반복임 그래도 괜찮아 난 그림에 특화된 디자이너니까 뚝딱 뚝딱! 대고 그리세요 펌프 생성 완료 이제 몸통 까짓거 금방해 ㅋㅋㅋㅋㅋㅋ 테두리 블랙 로고도 넣어주고 세제가 담긴 경계선도 그려주기 펌프 장식 투시에 맞게 넣어줘야겠죠? 끝 이렇게 됐어요! 그럴듯합니까? 바뀐 부분이 조금 있음 이번엔 섬이다! 일을 아주 사서해요 ㅋㅋㅋ 교회 십자가 없애고 로고 넣기 입체여야겠죠? 흠 놀이동산으로 꾸미고 싶어서 서치 이게 좋겠군 예시로 한 번 넣어보기 괜찮나? 반전도 시켜보고 오케이, 이제 따자

핵 복잡하네? 펜툴로 하나하나 누끼 따는 중 노가다 뭐이리 많이 달렸어? 관람차 하하 내가 왜 이걸 선택했지? 시작했으면 끝을 봐야지 땄는데

안쪽이 문제로다 색깔 선택으로 지워봤지만 지저분하게 누끼가 따지는 상황

에라이 펜툴 들었다 까짓거 하면 돼

개고생중 와 이걸 언제 다 따나

? 절반 했음 그와중에 스티커 작업 들어옴 군대 무늬? 넣어달라는 요청 마구마구 그리기 흠

아닌 것 같아 무늬 다시 그려보기 색깔의 흐름도 생각하기 강약 조절은 색깔로부터 모양 다듬기 완성한 택배 박스 시안 디자인 괜찮나요? 관람차 다 따서 섬 하나 예쁘게 꾸밈 아르 랜드~~ 자동차도 있음 ㅋㅋㅋ 귀엽죠? 비행기가 날라다니고 간판?에 새도 앉아있음 아르랜드 섬

Designing a landing page in Sketch – Tutorial

– 새로운 웹 디자인 자습서 비디오에 오신 것을 환영합니다 이걸로, 너를 내 과정으로 데려다 줄거야

Sketch를 사용하여 방문 페이지 디자인 이미 익숙하지 않다면, 스케치는 Mac 용 디자인 소프트웨어입니다 디지털 디자인, 내가 디자인에 사용하는 것입니다 내가 일하고있는 모든 웹 사이트 이전에 Sketch 101이라고 부르는 비디오를 만들었습니다 그 비디오에서 나는 모든 기본 사항을 밟았다 도구가 작동하는 방법, 모든 다른 패널이 의미하는 것, 그리고 당신이 어떻게 모든 도구와 것을 사용하는지

이미 소프트웨어에 익숙하지 않다면, 먼저 동영상을 확인하는 것이 좋습니다 정말 좋은 소개가 될거야 그리고 익숙해 질 것입니다 그래서 당신은 어디에 물건을 클릭하는지 안다 이 비디오에서 나는 그것을 똑바로 다이빙하고 싶다

방문 페이지를 만드는 데 사용하는 것까지 Sketch를 열어 본 적이 없다면, 그런 다음 기본 비디오를 먼저 확인하십시오 그렇지 않으면 들어 가자 Sketch로 들어가기 전에, 나는 단지 주목하고 싶었다 내 웹 디자인 프로세스가 시작되지 않는다는 것 컴퓨터에서; Sketch에서 시작하지 않습니다 실제로 펜과 종이로 시작합니다

이런 식으로보고 나는 언제나 웹 사이트를 와이어 프레임하고 싶다 들어가서 컴퓨터에서 디자인하기 전에 일단 상자를 만들면 그리고 당신은 레이아웃 그리드에 물건을 정렬하고 있습니다 그런 것들, 당신은 일을 너무 완벽하게하는 것에 집중하는 경향이 있습니다 아이디어를 최우선으로 생각하는 것보다 그래서 보통 종이와 샤 키즈 조각 당신이 볼 수 있듯이 정말로 저에게 도움이됩니다

웹 사이트를 와이어 프레임하기 위해 드로잉을 잘 할 필요는 없습니다 이것은 오늘날 우리가 설계하게 될 것의 대략적인 개요입니다 글꼴의 방문 페이지를 디자인 할 예정입니다 내가 지금 만들고있는 것이고 결국 판매 될 것입니다 잘하면 나중에 올해

그래서 내가 와이어 프레임을 사용하여 어떤 정보를 생각했는지 내 글꼴에 대해 사람들에게 줄 필요가있다 그리고 제가 팔려고하는 다른 패키지들, 모든 방문 페이지에는 주요 목표가 있어야합니다 분명히이 방문 페이지에서 주요 목표는 사람들이 글꼴을 구입하도록하는 것입니다 따라서 여러분이 스케치에 뛰어 들기 전에 방문 페이지를 조롱하는 순간부터 그 페이지의 내용에 대해 먼저 생각하십시오 그리고 어떤 정보가 그것에 가야하는지, 실제로 와이어 프레임 형식으로 그렇게하는 데 도움이됩니다

좋아, 이제 그 말은 끝났어 Sketch로 들어가 봅시다 좋아요, 그래서 여기에 새 문서를 만들었습니다 그 안에 데스크탑 HD 아트 보드가 있습니다 대지를 만들려는 경우, 삽입하고 거기에 삽입하십시오

가장 먼저하고 싶은 일 어떤 형태의 디자인이라도 실제로 그리드가 설정됩니다 당신은 디자인을하기 때문에 일할 것입니다 당신은 규칙을 깨기 전에 규칙을 알고 싶습니다 특히 웹 디자인에서 그리드 작업 그것이 만들어 질 때 정말 유용합니다 내가 작업하는 대부분의 사이트는 부트 스트랩 그리드를 사용합니다

그래서 저는 Sketch에서 그 것을 흉내 내고 싶습니다 여기에서 control + l을 사용하여 레이아웃 격자를 켭니다 12 개의 열이있는 설정이 있음을 알 수 있습니다 이것은 부트 스트랩 그리드의 너비입니다 기본으로 설정했기 때문입니다

여기 내 그리드 설정입니다 스크린 샷을 찍어 복사하려는 경우 Sketch가 정말 편리합니다 특정 격자가있는 경우입니다 당신은 항상 당신 자신이 사용하는 것을 발견합니다 그런 다음이 기본 설정 버튼을 클릭하면됩니다

어떤 새로운 대지 에나있을거야 그리고 당신이 만드는 문서 좋아, 그럼 내가 먼저해야할 일 기본적으로이 모형의 디지털 버전을 만듭니다 그래서 나는 회색 상자를 본질적으로 만들거야 물건을 올바른 곳에두기

그 자리 표시 자 텍스트를 얻기 위해 방금 사용한 것 InVision이 만든 Craft라는 플러그인입니다 내가 좀 더 자세하게 들어갈거야 나중에, 그래도 걱정하지 마라 그래서 제가 조롱 한 것은 헤더 공간입니다 나는 내가 어떤 종류의 사진을 가질 것이라는 것을 알고있다

제목과 버튼을 아마 그것에 대한 행동 촉구와 함께 다음 섹션에서는 글꼴에 대한 약간의 배경 정보 몇 가지 특수 기능에 대한 세부 정보 아시다시피, 특별한 부분이 있습니다 그런 다음 페이지를 끝내고 섹션을 만들고 싶습니다 내가 제공 할 패키지가 다르기 때문에 나는이 카드들에 대해 어떻게 될지 잘 모르겠다 아직 여기에서 우리는 그것을 함께 해결할 것입니다 그리고 마지막 비트는 단지 작은 사진 일뿐입니다

내 웹 사이트와 그런 것들에 대한 몇 개의 링크가 있습니다 보시다시피, 저는이 와이어 프레임을 만들었습니다 기본적으로 직사각형과 텍스트 상자를 사용하여 이 와이어 프레임을 약간 깔끔하게 디지털 버전으로 만들 수 있습니다 당신이 또한 볼 수 있듯이, 그리드에 집착하려고 했어 내가 누워있는 모든 작은 것들에 대해서, 나중에 도움이 될 것 같아서 그래서 내가이 상자들을 만들 때, 여기에는 이미지 나 스크린 샷 등이 포함됩니다

그것을 전체 칼럼에 올렸습니다 이제 우리는 디지털 와이어 프레임 재미있는 부분에 들어갈 시간입니다 고 충실도 실물 크기 모형 만들기 나는 이것을 통해 걷고 싶었다 이것은 내 정확한 웹 디자인 프로세스이기 때문에 디자인은 단순한 비주얼이 아님을 기억해야합니다

그리고 그것이 어떻게 끝을 보는지 전체 과정입니다 계획과 사고에 들어가는 정보 구조와 그런 것들에 대해서, 이 와이어 프레임을위한 시간을 가져라 정보가 어디로 갈 것인지 정말로 생각해 정말 중요합니다

이 고 충실도 실물 크기 모형 실습을 할 때, 나는 위에서 아래로 일하는 경향이있다 그래서 그것이 우리가 할 일입니다 먼저이 헤더 섹션의 디자인을 다루겠습니다 그래서 내가 여기 일러스트 레이터로 오면, 내 글꼴 미리보기입니다 내가 계속 노력하고있어

그것은 분명히 끝나지 않았습니다 지금 당장은 그 이미지를 그려내는 모습입니다 내 iPad에서, 그리고 할 일이 많이있다 그것을 실제로 사용하게 될 실제 폰트로 바꾸려면, 하지만 그래,이게 내가 지금 부름을 생각하고있는거야 나는 아직 확실하지 않다

하지만 지금은 이걸로 갈거야 이 방문 페이지를 만들기 위해 그래서 내가 할 일은이 편지들을 복사하는 것 뿐이야 Sketch로 가져 오십시오 스케치에 대한 정말 좋은 점은 Illustrator에서 복사하여 붙여 넣을 수 있습니다 때로는 상황이 조금 좋아 지지만, janky가 좋은 단어와 같다고 말할거야

설명하기 위해, 솔직히 말해서, 이런 일을하고 클리핑 마스크에 넣습니다 때로는 그 모양이 보이지 않을 수도 있습니다 그래서 가끔은 그냥 들어가서 정리할 때가 있습니다 그 클리핑 마스크를 치워 버려 그래서이 사람은 본질적으로 페이지의 제목이 될 것입니다

나는 많은 공간을 차지하지 않기를 바란다 아마 밑에있는 텍스트 줄과 그 다음에 버튼이있을 것입니다 나는 Sketch 101 비디오에서 이것을 언급했다 하지만이 소프트웨어에 대해 내가 좋아하는 것은 여기에있는이 패널은 당신이 작업하고있는 어떤 것이라도 적응합니다 당신이 선택한 것은 무엇이든 마찬가지입니다

여기이 사람을 클릭하면 분명히이 글꼴을 바꿀 수는 없다 왜냐하면 그건 텍스트가 아니기 때문에 저에게 보여주지 않습니다 그리고 나는 그것을 정말로 좋아합니다 나는 그것이 가장 유용한 정보를 만든다고 생각한다 너에게 명백하게 편집 할 수있는 것들 쉽게 접근 할 수 있습니다

이 버튼을 약간 둥근 모서리에 여기에 붙이고 싶습니다 나는 그것이 보이는 방식을 정말로 좋아하기 때문에, 그리고 그렇게하기 위해서, 나는 사각형 안으로 들어갈 것입니다 여기서 반경을 5 픽셀로 변경하십시오 그리고 나는 사진을 배경으로하고 싶다 왜냐하면 나는 그것이 더 역동적이 될 것 같아서

사용하려는 정확한 사진이있는 경우, 이 사각형을 드래그하여 마스크로 사용할 수 있습니다 실제로 어떻게하는지 보여 드리죠 내가 여기이 이미지를 잡고 떨어 뜨렸다면 내 캔버스에, 분명히 그것은 초대형으로 나타납니다 사진이 그보다 훨씬 크기 때문입니다 이제 직사각형을 사용하려면 어떤 모양을 실제로 마스크로 사용하고, 너는 2 개의 품목을 선정하고 가면 가야한다

위의 그룹에서 편집 한 내용은 그 사각형 모양에 국한되어, 하지만 그걸 잠시 꺼두겠습니다 내가 너에게 다른 것을 보여주고 싶어서 여기에 다른 직사각형을 그 으시면 갈 수 있어요 그룹과 함께 가져와 우리는 거기에 갈

그래서 제가 전에 간략하게 언급 한이 Craft 플러그인 InVision에 의해 설계되었으며 이는 본질적으로 설계를 채우기위한 것입니다 콘텐츠가 포함 된 그게 내가 생각할 수있는 가장 좋은 설명이다 콘텐츠 복제와 같은 작업도 수행합니다 내가 실제로 사용하지 않는 다른 것들 그러나 이것은 제가 가장 많이 사용하는 부분입니다 기본적으로, 여기의 모든 섹션은 예제 컨텐츠를 가져옵니다

디자인에 넣으십시오 따라서 대개는 이것을 사용하지 마십시오 최종 결과 당신이 확실하지 않을 때 실물 크기의 무대에있는 것입니다 텍스트가 정확히 무엇일까요? 그것은 내가 여기와 여기에서 한 것입니다

그러나 당신이 할 수있는 것은 그것으로 웹을 탐색하는 것입니다 상자에 삽입 할 사진을 찾습니다 그래서 Unsplash로 향하게하고, 지금, 예를 들면, 나는이 이미지를 발견했다 내가해야 할 일은 클릭 만하면됩니다 공예품은 내 직사각형에 그 사진을 채울 것이고, 이제 채우기에있는 내용입니다

당신이 여기에서 볼 수 있습니다 그래서 당신이 일을 조롱 할 때 꽤 편리합니다 웹에서 이미지를 가져 오는 좋은 방법입니다 분명히 권한이 있는지 확인해야합니다 디자인에서 원하는 사진을 사용하는 방법 당신이 그들을 인터넷에 살고 있다면, 다행스럽게도 Unsplash는 크리 에이 티브 코 몬즈, 그래서 나는 그것을 많이 사용하는 경향이있다

나는 내 제목을 백인으로 만들거야 그래서 나는 모든 조각을 골라서 흰색으로 만듭니다 스케치 내에서 텍스트 스타일을 설정하고, 이것은 이것을 텍스트 스타일로 저장한다는 것을 의미합니다 그래서 나는 내려올 수 있었고, 이걸로 거의 사용하자 그래서 당신은 그것을보아야합니다

나는 그것을 여기에서 적용 할 수있다 그래서 제가 사용하는 경향이 있습니다 예를 들어 ConvertKit 웹 사이트에서 일할 때, 나는 세트 스타일을 많이 가지고있다 나는 이미 내가 사용해야한다는 것을 알고있다 나는이 버튼을 만들 것이라고 생각한다

나는 그것이 보라색이되기를 정말로 원한다 그래서 우린 사진을 바꿀거야 이것은 내가 당신과 공유 할 수있는 또 다른 좋은 팁을 가져옵니다 이 색상 표는 여기에 있습니다 이 전역 색상 및 문서 색상을 참조하십시오

처음 Sketch를 열면 Sketch가 열리지 않습니다 이 전역 색상은 ConvertKit 색상 팔레트입니다 그것은 내가 보통 일하는 것인데, 그래서 저는 그것들을 모든 새로운 스케치 파일에 나타나도록 설정했습니다 여기 내 YouTube 채널 브랜딩 색상, 그래서 저는이 문서에있는 바로 여기에 그들을 설정했습니다 나는 스케치 팔레트 (Scetch Palettes)라는 플러그인을 통해 그렇게했습니다

여기 팔레트를로드하면됩니다 색상 팔레트 관리에 대한 전체 비디오를 작성했습니다 하나를 만들고 파일을 저장하는 방법에 대해 설명합니다 그리고 다른 것들은 그래서 그것은 당신이 흔들릴 수 있도록 카드에 링크 될 것입니다 스케치는 벡터 기반 소프트웨어입니다

그러나 실제로 할 수있는 것에 얼마나 놀랐을까요? 그것에서 이미지 조작 그래서 나는이 짙은 보라색을 만들거야 그래서 저는 그 뒤에있는 사각형의 색깔을 바꾸고 있습니다 이제 이미지 자체에서 내가 할 수있는 일 색상 조정을 선택하고 채도를 낮추고, 그래서 이미지를 흑백으로 만들고, 이제 불투명도를 낮출 수 있습니다 보시다시피 그 뒤에있는 자주색입니다

내 레이아웃을 끄도록하면 더 잘 볼 수 있습니다 그게 컨트롤이고, 기억 해요 이것이 우리가 현재 향하고있는 것입니다 그 간격은 약간 벗어 났지, 그렇지? 그걸 정리 해보자 그리고 여기에 간격에 관한 약간의 비밀이 있습니다

나는 Sketch에서 완벽하게 그것을 얻는 것을 결코 성가 시게하지 않는다 실제로 사람들은 종종 저에게 묻습니다 Sketch를 가져 와서 모든 코드를 내보낼 수 있다면 갑자기 웹 사이트가 생겼습니다 내가 아는 한, 그것이 작동하는 방식이 아닙니다 특정 항목의 CSS를 내보낼 수 있습니다

내가 그것을하는 것이 아니라, 그래서 나는 그것이 어떻게 작동하는지 완전히 모릅니다 그러나 스케치의 요지는 끝나지 않습니다 작동하는 웹 페이지로; 그것은 디자인 도구입니다 웹 페이지를 설계 한 다음 나중에 작성하십시오 그것을 구축하는 것에 대해 생각할 때입니다

뭔가를 찾고 있다면 그것은 단지 하나의 모든 일을합니다 어쩌면 당신은 Webflow, 그러나 나는 확실히 시작하는 것이 좋습니다 첫 페이지 디자인하기 네가 좀 더 자유로울 수 있다고 생각하기 때문에 사물을 움직이고 창의력을 발휘하십시오 정확히 어떻게 구축 될지 걱정하기 전에

좋아, 우린 그걸로 지금 떠날거야 그것은 어떤 종류의 헤더입니다 이 섹션에서는 여기에 내가 할 일이 무엇인지 생각해 보겠습니다 내 글꼴 몇 조각 가져와 됐어

이 벡터 가져 오기 작업이 완료되었습니다 내가 말하고 있었던, 클립 루트에서 숨기는 경향이있는 경우, 그래서 내가 그 j를 끌어 내면 저기, 우리는 그것을 봅니다 나는이 직사각형을 약간 편집 할 것이다 그래서 저는 아주 창백한 회색을 사용하고 모서리를 둥글게 할 것입니다 다시 정렬 도구 만 사용하면됩니다

그들을 중간에 앉히기 Sketch에서 베끼고 붙이기를위한 팁 이 블록에 여기에 정기적으로 붙여 넣으려고하면 명령 + v로 이동하면 보시다시피, 스타일은 그대로 유지됩니다 자동으로 같은 스타일을 유지하기 때문에 텍스트 블록이 이미 있었기 때문입니다 따라서 스타일을 적용하여 텍스트를 복사하려는 경우, 나는 + alt + shift + v 명령을 써야한다

많은 캐릭터들, 그러나 그것은 일을 끝내게합니다 좋아요 여기 사진을 넣고 싶습니다 위와 똑같은 치료법을 사용할 것입니다 그래서 이미지를 빨리 대체 할 수있는 팁을 보여 드리겠습니다

만약 내가이 블록을 여기 복사해서 가져 오면, 우리는 그 회색 상자를 제거 할 것입니다 내가 이걸 줄이면 내가 할거야 그래서 그것은 실제로 당신을 화면에 보여줄 것입니다, 거기에 우리는갑니다, 이동 이미지 바꾸기, 거기에 우리가 간다 이제 그 이미지가 다른 이미지가 있었던 장소에 있습니다 그리고 그것은 내가 가지고있는 것과 똑같은 스타일링을 유지합니다

정말 편리합니다 분명히, 나는 아마 나의 진짜 글꼴을 더 사용할 것이다 이 디자인 내에서,하지만 지금은, 실제로는 제대로 존재하지 않습니다 그래서 저는 대신 다른 글꼴을 사용하고 있습니다 봐, 난 그냥 그것을 집어서 레이어를 정리 해요

그것을 주변에서 움직인다 당신은이 Move Forward / Move Backward를 가지고 갈 수도 있고, 그러나 나는 그들을 움직이는 것이 더 쉽다는 것을 안다 보시다시피, 저는 제가가는 것처럼 레이어의 이름을 지정하지 않습니다 많은 사람들이 확실히 물건을 쉽게 찾을 수 있기 때문에 솔직히 말해서, 내가 뭔가를 가지고 일하기를 원할 때, 나는 그것을 클릭하기 만하면 알 수있다 그것은 어떤 계층인가? 그러나 네, 만약 당신이 더 조직되기를 원한다면, 레이어 이름을 지정하는 것이 좋습니다

내가 만든 버튼을 복사 할거야 그것을이 그룹들로 가져와라 좋아, 이제 내가이 페이지의 맨 아래에있다 그리고 저는 아마도 버튼이 자주색이되기를 바라고 있습니다 바닥 글이 보라색이 아니길 바래요

왜냐하면 나는 이것들이 가장 눈길을 끄는 링크처럼 보이기를 원하기 때문에, 당신이 클릭하기를 바라는 것들, 그래서 저는 이것을 아마 검은 색으로 바꿀 것입니다 우리는 거기에 갈 버튼이 훨씬 더 돋보이는 것 같지 않니? 이 박스들은 여기 모서리를 둥글게하고 싶다 버튼과 일치하지만 둥근 싶지 않아 당신이 볼 수 있기 때문에 모퉁이의 모든, 이 두 사람이 합류했습니다

예를 들어,이 모든 것에 5 픽셀 반경을 넣으면, 나는이 이상한 노치를 여기에서 얻을 것이다 나는 그것을 원하지 않는다 그래서 그 대신에, 내가 뭘 할거야 이 직사각형을 더블 클릭하십시오 이 작은 앵커 포인트가 어떻게 생겨나는지 알겠습니까? 나는 교대를 잡고 그 세 명 모두를 클릭 할 것이다

나는 둥글게되고 싶다 그런 다음 5 픽셀을 입력합니다 클릭하면 클릭 수를 볼 수 있습니다 그 모서리는 둥글고, 이것도 똑같이있어 그것은 내가 원했던 바로 그 것이다

그리고이 한 모퉁이에 대해서도 똑같이 할 것입니다 이 상자와이 두 모서리에 이 세 가지는 내가 제공하는 주요 패키지입니다 내 폰트 용 그래서 나는 어떤 아이콘을 가지고 싶다 나는 생각한다

그들을 대표합니다 제 폰트의 경우, 실제 폰트 조각을 얻습니다 이건 내가 여분의 벡터를 제공 할거라고 생각해 그것으로, 당신의 디자인에 도움이 될 것입니다 그리고 나는 그들을 아직 만들지 않았습니다, 그래서 예로서, 나는 단지 가지고 간다

나는이 사람을 여기에서 추측하고 그것을 한쪽으로 돌릴 것이다 그리고 나는 이것을 여기에서 사용하고 작은 아이콘을 가정 할 것이다 둘 사이에, 그래서 나는 그것이 윤곽선이되고 싶다 그래서 내가 할 수있는 일은 그것을 오른쪽 클릭하는 것입니다 윤곽선으로 변환하고 거기로 이동하십시오

이제 그것은 모양입니다 이 마지막 도구는 명사 프로젝트라는 도구를 사용할 것입니다 명사 프로젝트는 아이콘을 갈 수있는 좋은 장소입니다 나는 그들과 이야기했다 그래서 여기에이 데스크탑 Mac 앱이 있습니다

나는 단지 뭔가를 찾고 그것을 조사 할 수 있습니다 클릭 만하면 Sketch로 드래그 할 수 있습니다 그리고 지금 그것은 벡터입니다 그러나 그들은 또한 웹 버전을 가지고있다 당신이 지불하지 않고 아이콘을 다운로드 할 수있는 곳, 당신은 디자이너에게 크레딧을 주어야합니다

여기에 이걸 추가하는 아이디어 이 패키지를 사용하면, 너는 물건을 더 얻을거야 그래서 상자가 더 크고, 그것이 더 많은 아이콘이있는 이유입니다 왜 그것이 더 높은 가격인지 사람들에게 설명 할 것입니다 가격에 관해서는, 나는 아직 내가 무엇을 청구하는지 모르겠다

에 자리 표시자를 추가하겠습니다 그리고 나는 가격을 자주색으로 만들거야 왜냐하면 그것은 그들의 마음 속에서 연결되기 때문입니다 지금 구매를 클릭하면 그들은 그 가격을 지불 할 것입니다 헤더가 있다는 것을 알 수 있습니다

슈퍼 눈길을 끄는 이미지와 멋진 큰 버튼이 있습니다 버튼이 너무 커서 정직하지 못할 수도 있습니다 하지만 이봐, 지금은 괜찮아 그리고 나는 그 물건에 관한 텍스트 블록을 가지고있다 몇 가지 추가 정보와 정보가 있습니다

그런 다음 부제목이 있습니다 다른 꾸러미에 대해 말할 것 인, 당신이 얻을 수있는 것 그리고 나는 여기에 나의 패키지를 가지고있다 마지막으로 내가하고 싶은 일은 그 스케이트 보드 이미지를 만드는 것입니다 백그라운드에서 조금 더 서서, 그래서 나는이 상자들을 선택할거야

제 패널을 다시 가져와 내가하는 일을 볼 수있게하십시오 Sketch에서 전체 상자의 불투명도를 변경할 수있었습니다 자주색 경계선의 불투명도가 변경됩니다 나는 그 위에있다 또는 채우기의 불투명도를 변경할 수 있습니다

그래서 저는 그것들을 90 %, 아마도 80 % 만들 것입니다 가자 85 이제 우리는 그들 뒤에있는 스케이트 보드를 조금 더 볼 수 있습니다 오는 동안, 그리고 그 질감의 좀 더 가져온다 마지막으로 내가 추가하고 싶은 것은 그림자입니다

여기에 내 제목에, 그냥 배경에서 조금 더 돋보이게하는 것입니다 그림자 옵션을 틱하십시오 그런 다음 여기에서 그걸 가지고 놀 수 있습니다 나는 일반적으로 내 그림자가 바로 뒤에서 오는 것을 좋아한다 그리고 조금 더 흐려집니다

그리고 만약 내가 이것을 토글하면, 당신은 그것을 추가하는 것이 정말로 도움이된다는 것을 알 수 있습니다 그 텍스트를 좀더 앞으로 가져 와서 돋보이게하십시오 그래서 나는 여기에서도 같은 것을 할 수 있다고 생각합니다 그래서 우리는 그것을 가지고 있습니다 그것은 꽤 간단합니다

아마 내가 지금까지 디자인 한 것 중 가장 좋은 것은 아니지만, 하지만 디자인 팁을 얻는 데 도움이되기를 바랍니다 도중에 Sketch에서 방문 페이지를 디자인하는 방법을 살펴 보겠습니다 만약 질문이 있다면 이 방문 페이지 디자인 과정에 대해 의견 아래에 그들을 아래로 두십시오 나는 물건을 매우 빨리 지나친 것 같습니다

그리고 몇 가지 물건을 훑어 보았습니다 그러니 제발, 두려워하지 말고 물어보십시오 Sketch에 대한 더 많은 동영상을 계획 중입니다 앞으로도 마찬가지입니다 벡터 도구로 할 일을 많이 보여주고 싶습니다

스케치에서 모양 만들기, 아이콘 만들기, 모바일 대응 레이아웃 및 이와 유사한 작업과 관련하여, 그게 너에게 관심이 있다면, 의견 아래에서 아래로 알려주세요 이 비디오에 엄지 손가락을 올려주세요 이 튜토리얼은에 투표했다 내 Patreon에 가입 한 사람들이 그것은 정말로 흥미 롭다 그들은 Sketch에 관한 튜토리얼을보고 싶었습니다

방문 페이지를 디자인하는 방법을 알고 싶어했습니다 그래서 그것이 제가 한 이유입니다 나는 스케치 파일을 보낼거야 Learning by Doing의 모든 후원자에게 또는 디자인 팀 멘토링 계층 그것은 보상 중 하나이기 때문입니다 자산에 액세스 할 수 있습니다

내 동영상에서 만드는 다행히도 파일을 열면 도움이 될 것입니다 그것을 살펴보고 내가 어떻게 물건을 세우는 지 지켜보십시오 자신을 위해 무언가를 디자인하기위한 기초로 사용하십시오 당신이 원한다면; 나는 상관하지 않는다 당신이 아직 Patreon이 아니고 당신이 하나가되고 싶다면, 그 링크는 patreon

com/charlimarie입니다 또한, 통보 받기를 원한다면 이 글꼴이 결국 판매를 위해 생방송으로 갈 때, 앞으로이 비디오를보고 있다면, 누가 알 겠어, 아마 이미, 나도 몰라 그러나 charlimariecom/font로 가면, 거기에 등록하면 등록 할 수 있습니다 또는 그것이 미래라면, 글꼴은 이미 판매용으로있을 수 있습니다

좋아, 모두들 나와 고착 해줘서 고마워 이 의심 할 여지없이 긴 비디오를 통해 보시다시피 가볍게 크게 바뀌 었습니다 내가 얘기하고있는 동안, 여기는 영국에서 밤이되었습니다

알았어 나는 일하러 가서 일할거야 지켜 줘서 고마워 다음에 너를 볼거야 안녕

드리블 탑 디자인 앱 만들기 Part #1 레이아웃 코딩

자 우리 첫 시리즈에서는 디자이너들의 성지라 불리는 드리블 닷컴에서 앱 컨셉으로 멋진 디자인을 하나 선정해서 디자인을 직접 앱으로 까지 구현에 보는 시리즈를 진행할 예정입니다 그러면 시작해 보겠습니다 우선 구글에서 Dribbblecom을 검색합니다 그리고 ui 로 검색을 하셔서 상단에 보이는 것 중에 네 번째 작품 아주 멋진앱이죠 정재성님이 제작하신 한국 분이신 것 같네요 제작하신 멋진 디자인을 직접 앱으로 구현을 해 보도록 하겠습니다 우선 GIF스크러버로 이미지를 따구요 첫번째 시간은 현재 보이는 이 화면 Html과 CSS로 우선 구성을 할 거구요 뒷 시리즈에서 자바스크립트와 프로그래밍을 이용해서 실제 앱으로 만드는 과정을 진행할 예정입니다 기본적인 개발은 크롬의 개발자 도구를 이용해서 진행이 될 예정이구요 깃 허브에서 무료로 제공하고 있는 아톰이란 에디터의 일부 도움을 좀 받을 예정이예요 atom

io 에 접속하셔서 무료로 다운로드 받아서 사용하실 수 있습니다 자 그럼 시작해 볼까요 우선 작업 폴더를 하나 만들어 보겠습니다 Dribbble Todo 라는 폴더를 만들고 일단 폴더엔 index html 아 이래서 계속해요 cml tel 써서 본 모양 잡으시구요 타이틀은 드리블 투두리스트 라고 정하고 그 다음에 스타일 파일을 하나 만들어 주겠습니다 스타일 점 CSS 그리고 링크 스타일 시트 stylecss 여기 세팅이 되었습니다 그럼 이번에는 만든 파일을 탐색기에서 열어 주시면 작업 준비 가 되었죠 F12를 눌러서 개발자 모드를 실행해 주시고 모바일 모드 아이폰X사이즈로 선택을 하셔서 작업 준비를 합니다 개발자 도구에 소스탭에서 애드 폴더를 추가 하시면 작업 한게 바로 적용이 되요 이렇게 선택을 하시고 권한을 승인 해주시면 이렇게 바로 들어왔죠 이렇게 되고 태그를 만들어 볼게요 div 컨테이너 를 먼저 만드시구요 상단에 헤더 영역 컨텐츠 영역, 카드 영역까지 총 3개의 div 를 만들게요 컨텐츠 카드 에어리어 세 가지 영역을 만들고 새로고침 보이시죠 영역이 그럼 이쪽에 소스를 추가해 놨기 때문에 이쪽에 스타일을 플러스 버튼을 누르고 계시면 스타일 시트를 고를 수가 있어요 그러면 스타일에 컨테이너가 추가됐고 소스에 확인를 해보시면 스타일의 추가된 게 보이시죠 이런식으로 작업은 계속 진행 될 예정 입니다 그러면 기본적으로 html , body 가로 세로 사이즈를 지정 해주시고요 마진은 0으로 기본을 잡아주면 됩니다 보이시죠 순서는 바꿀게요 컨테이너 컨테이너 싸이즈도 세로 사이즈를 지정해 줍니다 영역이 넓어진게 보이시죠 컨테이너에는 배경색을 이쪽에 개발자 도구를 띄워서 배경색을 캡쳐 합니다 실제 배경색은 아래쪽에 그라데이션이 들어가 있어서 아래쪽을 다시 복사를 해서 배경을 linear gradient 라고 해 주시고 이렇게 코마를 이용해서 직접 입력해주시면 이렇게 그라데이션이 배경이 똑같이 적용이 됩니다 그러면 일단은 준비가 됐어요 화면 크기를 좀 비슷하게 맞춰주시고 이번에는 전체 컨테이너에 이제 컬러를 포인트 컬러를 흰색으로 지정해주세요 헤더를 꾸며 보겠습니다 왼쪽 가운데 오른쪽 총 세개의 div를 만들어 줄게요 레프트, 타이틀, 라이트 가운데영역에는 투두라고 입력을 해주겠습니다 새로고침을 눌러보시면 글씨가 작죠 모바일 사이즈에 맞는 뷰 포트를 지정을 안해줘서 그런건데요 다른 사이트에 보시면 뷰 포트 샘플이 있어요 복사해서 메타 뷰포트 태그를 넣어주시면 커졌죠? 안쓰는 창은 닫아 주시고 화면에 보이는 아이콘은 폰트어썸 사이트에서 제공하는 폰트를 이용할 예정입니다 폰트어썸닷컴 이라고 입력을 하시고 폰트어썸을 사용하기 위해서는 스타트를 누르셔서 링크를 만들어 주셔야 되요 링크 주소가 나오죠 클릭해서 복사 네 준비가 됐습니다 그럼 바로 아이콘을 검색해서 사용하실 수 가 있어요 메뉴 이 부분을 클릭 에서 복사 하시면 되구요 복사해서 붙여놓고 이번엔 오른쪽에 써치 마찮가지로 이부분 클릭해서 붙여 넣으시고 F5를 눌러서 확인 아이콘이 나오는게 보이시죠 이번엔 아이콘이 나왔으니 스타일링을 해볼게요 패딩 20px 그리고 디스플레이 플렉스 가로배열로 만들어 주시구요 그다음 헤더 아래에 있는 div에는 공통적으로 torx 꼭 초 속성으로 예 안녕 을 해주시면 3개가 나란히 이렇게 가로배치 가 됐습니다 헤더에 레프트는 text-align left 그리고 타이틀은 text-align center 그리고 라이트는 text-align right 이렇게 붙여 주시면 구성이 됬죠 그러면 이번에는 글씨체를 먼저 초반에 맞춰줄게요 구글에서 구글폰트라고 검색 하시면 네 구글에서 제공하는 폰트를 사용할 수 있는데 이중에 가장 비슷한 모양의 roboto를 추가를 해주시면 사용할 수 있습니다 기본 폰트웨이트는 400 이고, 그담에 500을 추가로 이렇게 해주시면 링크 소스가 나오네요 링크 소스는 헤더에 붙여주시고 아래쪽에 폰트패밀리를 복사해서 사용하시면 폰트 패밀리는 html body 에 넣어줄게요 새로고침을 하시면 바뀐게 보이시죠 그러면 이번에는 하단에 컨텐츠 영역을 만들어 볼게요 컨텐츠 영역은 처음에 my image 이미지가 들어갈 자리구요 그리고 중간위치에 큰 글씨 영역이죠 h2 Hello Jane 그다음에 아랫쪽에 p 태그로 그리고 제일 아래 p 태그에는 투데이라는 클래스를 입력하겠습니다 모양이 나왔죠 우선 콘텐츠 영역부터 디자인 해줄게요 여백을 패딩 40픽셀을 주시고 마이 이미지 컨텐츠 안에 있죠 마이이미지는 백그라운드 흰색을 주시고 가로 50px, 세로 50px border-radius로 원형으로 만들어 주시고 그리고 그림자를 만들어 줍니다 10px 만큼 내려온 그림자를 이런 느낌으로 예 이정도 모양이 되겠네요 안의 이미지는 구글에서 iu 를 검색해서 이미지를 하나 골라볼게요 copy image adress background image url 복사한 것을 붙여 넣으시고 background-size : 100px background-position 이정도로 맞춰 주겠습니다 그리고 h2 h2는 폰트 사이즈를 좀 키우구요 30정도로 font weight 두께는 기본 400 이정도 해주시면 될 것 같아요 이번엔 p 태그 p 태그는 마진을 없애주시구요 컨텐츠의 p 태그만 따로 스타일링을 해줄게요 투명도를 05 정도 주시고요 이후에 배경 색에 계속 바뀔 거라 색상을 직접 지정하지 않고 반투명 주었어요 그리고 하단에 따로 투데이라고 클래스를 준 영역있죠? 그부분은 폰트 크기를 12px 정도 주시고 투명도를 다시 진하게 해주시구요 마진을 50 정도 좀 줄일게요 싸이즈를 45 정도로 해 주겠습니다 모양이 대충 나오죠 그리고 이번에는 하단에 카드영역 카드영역은 전체 영역과 그리고 카드 위치를 잡는 카드에이리어를 이렇게 카드라고 먼저 해주고요 그리고 실제 카드 안의 디자인 영역은 inner라고 지정을 해주겠습니다 그럼 inner안에 좌측에 카드아이콘 모양 만들어 주시고 오른쪽에 셋팅 버튼 만들어 주신 다음에 하단의 내용을 하나로 묶을게요 bottom 이라고 하나 묶고 그 안에 p 태그를 9 tasks h2 , personal 여기까지 준비가 됐고 이 아래 영역은 스테이터스 라고 하나로 묶어 주시구요 스테이터스에 오른쪽에 숫자 영역과 왼쪽에 실제 바영역 그려야겠죠 왼쪽은 트랙이라고 할까요 트랙과 트랙 안에 있는 바 그리고 오른쪽에 83 클래스를 'per'라고 따로 주겠습니다 html 은 준비가 됐어요 이제 그러면 카드 영역을 우선 크기를 잡아볼게요 어 크기 확인을 위해서 임시로 백그라운드를 반투명을 줘 보겠습니다 그러면 상단 여백에 있는게 보이실 상단 여백은 컨텐츠에서 만들어 준 거라 padding-bottom 만 좀 줄이구요 세로 사이즈를 잡아야 겠죠 세로 사이즈는 전체 영역의 100% 에서 상단 영역이요 빠진 만큼 딱 계산 할 거에요 그래야 나중에 이렇게 화면아 움직였을 때 틀어지지 않고 아래쪽 영역에 맞게 조절이 되기 때문에 칼큘레이터 ( calc )를 사용해서 100% 마이너스 300px 상단 영역에 맞게 조절을 해볼게요 345 정도가 적당 하겠네요 상단 영역을 제외한 나머지 영역을 꽉 채우겠단 뜻이에요 이정도로 잡아주시고 이번엔 카드 실제 안쪽 영역을 잡아줘 보겠습니다 카드도 마찬가지로 임시로 사이즈 확인을 위해서 임시 배경색을 반투명으로 지정을 하시구요 세로는~ 100% 마찮가지로 가로도 지정 해주세요 그 상단에 카드에어리어 영역에서 하단 여백을 만들어 줄 거에요 패딩을 상단은 0 그리고 좌우 양쪽에 40씩 주시구요 하단은~ 50 정도 하단 영역 이 위로 안 올라오죠 이거는 보더 박스(border-box) 설정을 안해서 그런건데요 박스사이징을 다시 소스를 돌아와서 스타일 제일 위에 별은 박스사이징(box-sizing) 보더 박스(border-box)로 지정을 해주시면 위에 올라온 게 보이시죠 보더 박스를 설정하면 사이즈 설정 된 안쪽으로 패딩 영역이 들어와서 전체 지정한 사이즈의 영향을 미치지 않고 스타일링을 할 수 있습니다 자 이번엔 카드는 배경색을 흰색으로 만들어주시고 아 죄송 합니다 카드의 inner 영역에 스타일링 해줄 거예요 카드

흰색으로 만들어 주시고, 세로 사이즈는 꽉 채워주시고 그리고 컬러는 회색으로 지정해 주겠습니다 여백을 위해서 패딩을 입력을 해주시고 border-radius를 이용해서 라운드를 만들어 주시면됩니다 이제 임시로 적용한 백그라운드 필요가 없으니까 두개 다 삭제를 할게요 이렇게 삭제를 하구요 이번에는 그림자도 만들어 줍시다 이런식으로 그림자를 만들어 주고요 모양이 만들어졌죠? 이번엔 아이콘을 만들어 줄게요 아까와 마찮지로 폰트 어썸에서 user라고 검색을 하시면 비슷한 모양의 아이콘이 나오죠 복사 해서 카드아이콘 영역 그리고 오른쪽에 dot 라고 입력을 해 주시고 마찮가지로 비슷한 아이콘을 복사 해주시면 됩니다 자 볼까요? 들어왔죠? 그럼 이번엔 카드 아이콘을 모양을 만들어 보겠습니다 카드 아이콘은 우선 테두리를 만들어 주시구요 좀 연하게 만들어 줄게요 가로사이즈 50, 세로 사이즈도 50px border-radius로 원형으로 만들어 주시고 텍스트를 가운데로 line-height를 이용해서 가운데로 만들어 주시구요 그리고 사이즈를 좀 키울게요 폰트사이즈를 키우구요 컬러는 배경색의 중간정도 색상으로 이렇게 지정 해주시면 모양이 만들어집니다 그리고 float left로 왼쪽으로 이번엔 셋팅 버튼 float right로 오른쪽으로 붙여주시고 양쪽으로 조절이 됐죠 그리구 이번엔 카드의 bottom 인데요 position absolute를 이용해서 바닦으로 붙여주세요 bottom zero 카드 바깥으로 빠져 나오는게 보이시죠 그거는 바로 상단에 있는 inner의 포지션 relative를 이용해서 이렇게 안쪽으로 모양을 잡아줄 수 있습니다 다시 bottom 으로 와서 가로 사이즈를 100%로 만들어 주시고 좌측으로 붙이고 여백을 만들어 주겠습니다 네 이제 모양 잡는건 준비가 됐어요 이번엔 카드안에 있는 h2는 마진을 줄여 볼게요 10으로 줄여 주시고 컬러도 좀 진하게 더 진하게 할까요 이 정도가 괜찮겠네요 스테이터스도 만들어 줍니다 스테이터스는 float right로 오른쪽으로 붙여주시고 그리고 폰트 크기는 20px 그리고 가상 엘리먼트를 추가를 해 줄거에요 단위가 % 이다 보니까 ::after 를 이용해서 content % 를 입력해주시면 예 나온 게 보이시죠 나중에 개발에서 스크립트로 숫자 만 바꿔줄 예정이라 이렇게 작업을 했습니다 이번엔 트랙 트랙은 background를 회색을 주시고 세로 사이즈는 4px 정도 오른쪽이 숫자 영역을 뺀 만큼 가로를 좀 조정을 할게요 calc 를 이용해서 30px 정도를 빼주시면 됩니다 자 그리고 다시 'per'로 와서 margin-top 마이너스 값을 이용해서 자리를 잡아줍니다 이번엔 바 영역인데 바의 길이는 따로 inline으로 입력을 해 줄게요 html에서 직접 이미 라인으로 스타일 width 83% 이렇게 해 주는 이유는 나중에 개발 적용할 때 보시면 카드마다 숫자에 따라서 바의 길이가 달라질거예요 그래서 감안을 해서 미리 인라인으로 이렇게 길이를 잡아 줬습니다 스타일은 스테이터스에 그리고 세로는 4 px 잡힌게 보이시죠 또 배경색은 전체 배경색을 이용할 겁니다 컨테이너에서 사용했던 배경색을 복사해서 붙여 넣으시고 그라데이션이 새로 방향인데 여기서는 가로 방향이죠? linear-gradient에 가로 방향으로 to left 라고 입력해주시면 준비가 됐습니다 이렇게 크기가 늘어나면 아래쪽으로 늘어나는게 보이시죠 완성된 카드를 두개를 더 만들 거에요 영상에 보시면 이렇게 총 3개가 보이죠 그래서 카드 영역을 복사를 해서 하나, 둘 그러면 아래쪽으로 구성이 된게 보이시죠 이것을 속성을 가로로 만들어 줄 거에요 이것 때문에 이렇게 만들어 놓은건데 카드에어리어에서 display 를 flex 바로 배치되는게 보이시죠 카드 고유의 사이즈를 이용 할 거라서 이렇게 정렬이 되면 안되잖아요 카드영역에서는 flex none 속성을 부여해 주면 네 고유의 사이즈로 지정됩니다 예 그림과 같이 여백이 좀 필요하겠죠 그래서 margin-right 15px 이정도 조절이 되면 비슷하게 나왔죠 실제 영역이 전체가 움직이기 때문에 영역을 좀 잡아 줄게요 overflow , auto 이렇게 일단 1차 준비가 완료가 됐습니다 다음 시간에는 이제 영상 에서와 같이 상세페이지와 이렇게 움직였을 때 액션들을 만들어야죠 자바 스크립트 강좌가 될 것 같네요 첫 번째 시간 여기까지입니다 감사합니다

Como hacer una Pagina Mobile First y Responsive Design 26 | Layout del video

다음으로 이동 한 후 와서 우리는 그들이 트위터 및 비디오 박스 공유 페이스 북을위한 버튼, 공유 가야이 부분을 만들 것입니다 다음은이 응답 종로가 나타납니다에 표시되지 않습니다해야, 가로 스크롤 것을 볼 수 있지만이 걱정하지 마세요 나는 사실, 여기에 비디오 태그를 사용하고 있기 때문에이기 때문에이 삭제 여기 와서 당신이 더 이상 나타나지 볼 업데이트 할 경우 그러나 결국 나는 다른 코드는 그게 유튜브 준다 삽입 않을 경우 그 비디오 태그가 사용되는 것이 아니다 당신에게 그 마지막으로 사용하지 않을 나타나기 때문에 내가 여부 줄을 상관하지 않기 때문에 그래서 당신은 여기에 플레이어를 볼 수 있습니다 그래서 어디 보자, 여기에이 권리는 우리가 개발해야 할 것입니다 단순히 모두 동일 넣어 가고 있기 때문에 음이 아니라, 우선 현재 코드를 공유 모두 동일한 배경 색상을 가지고 있지만 그들이 이해하기 때문에 어이가 문제가되지 않지만 잘 하나 어떤 다른 것입니다 하지만 이렇게 코드를 저장하고,이 부분은 매우 간단하기 때문에 지금은 비디오 공유, 괜찮아요을 공유하러 온 난 그냥 아니라, 오히려 내가 그렇게 할 것입니다, 여기에서 복사합니다

그리고 여기에 공유 수준의 비디오에서 난 단지 위치를 제공합니다 : 상대를 나는 그것이 내가하고 측면에 10px 아무것도 아래로 넣어 것 100 % 폭과 여백을 차지 말할 것이다, 지금 그래서 나는 이러한이 아무것도하지 않는 것입니다 만약 내가 코스를 할당 할 필요가 고정 된 높이로 볼 흰색으로 배경 여기를 넣어 경우 의 헤이, 250 픽셀을 상상하자! 아니, 많이 될 것 그래서 음이 나는이에 600PX을주지 헤더가 더 당신을 줄 것입니다 사실 헤더 나는 이미 만 수용 할 수 있기 때문에 제거하는거야

내가 좋아,이 공유의 일부가 될 것입니다, 잘 넣어 지금은 여기 와서 다음을 수행, 우리는 각각의 버튼을 놓을 게요, 그래서 나는 이것을 복사하여 여기에 나는 주 비디오 쓰기 페이스 북 버튼, 두 가지를 될 것입니다 내가 잘 걸었습니다와 트위터가 동일한 특성을 갖는 것, 그들은 폭을 모두 차지합니다 (100) 그래서 폭이 100 %가 될 것이고, 픽셀 (10)의 상하에 의해 서로 분리 될 넣어 배경이 파란색과 높이를 착용하는 것입니다, 당신은 100 픽셀 각각의 높이를 넣을 수 있습니다 업데이트를 여기가 나는 두 개의 막대가 이봐! 용서 만 100 픽셀 위아래로 내가 총 100 말했듯이 내가 떠날 이유가입니다 그러나 잘, 아마 (100)는 많은 수 있습니다 내가, 내가 좋아하는 경우에, 조금 더 합리적이라고, 잘, 60, 60 (120)보다 여백을 60 놓을 게요, 내가 넣어거야

물론, 이것과는 사실에 맞게 제거합니다 이봐, 왜 그녀는 간다? 우리는 여기에 (150)의 높이를 넣어 것입니다 저장, 보관하지 않습니다 그렇지 않은 경우, 음, 그 crazy'm는 한 나는 그것을 제거하기 위해 계속 당신을 당신이 무엇을하고 있는지 볼 수 있지만 싶은 호기심이있다 여기에 버튼이 이제 동영상 플레이어를 누락, 그래서 내용 비디오 것을 여기에 넣어 보자 이 내용 요소의 비디오는 여기에, 우리는 폭 100 %, 너비의 100 %를 차지주고 더 마진이없는 것 단지 위로 및 측면에 20 픽셀 0 아래로, 높이가 300 픽셀 예에 의한 할당합니다 그리고 우리는 배경을 넣을 예정 눈에 띄는 아니라 그 동영상입니다로서 배경이 그렇게 녹색 넣어 것입니다

죄송합니다, 여기에 비디오 거기에, 음, 다음이 그 것이다 지금, 응답 버전에서 내가 원하는 것은 다음 물론 서로이 두 개의 버튼을 배치하는 것입니다 이것이 가능하기 그때 디스플레이 인라인 블록과 수직 정렬 여기에 놓을 게요 나는 상단에 넣어 갈거야 지금은 여기에 와서 내가이 복사거야 미안, 나는이 두 가지 요소를 참조 할 필요 해요 무엇을 말해주지 내가 지금 여기 와서 나는이, 나는 이 그가 그렇게 추한 왜 그 열쇠를 닫습니다 것은 여기에서 말하는거야 말할 것이다, 나는 키를 닫습니다 나는 각각의 폭은 45 %가 될 것이라고합니다

다음은 업데이트 여기 저기 상승이 45 %를 가지고 있지만, 어떻게됩니까? 나는 중간에 여기에 공간을 유지하려고합니다 그래서 내가 무엇을 할 거 야하는 것은 이것이다 나는 여백 말할 것입니다 버튼 페이스 북 아래 왼쪽 10px의 0 픽셀에, 4 % ~ 4 %의 권리를 통해, 10 픽셀 이상입니다 그리고 지금 버튼 트위터 나는 같은 말을 하지만 공은 오른쪽에,이 측면에있을 것입니다, 그래서 완전히 붙어 권리 이동의 차이 0과 그리고 여기 왼쪽에 4 %를 줄 것이다 내가 업그레이드 할 때, 나는 그것을있다

글쎄, 나는 내가 좋아 좋아 좋아 사실, 나는 그것이 작동하지 않을 것입니다 알고 나는 그것이 작동하지 않습니다 생각, 내가 나쁜거야 난 5 %를주고 여기에 시도 할 것이다 그러나 당신이 머물 경우가 4 % 좋은보다 아직 설정합니다

그 때문에 확인 음, 즉, 모든 여러분의 비디오 부분에서 이미 반응이다 그리고 이제 코스 타이틀 정보의이 섹션, 이전, 다음 등 연습을 유지하기 위해 다시 이리와 여기에서 왼쪽으로

[자막ON] [프론트엔드 퍼블리싱 취업성공] [중급예제] 웹호스팅 서비스 가격표 (nth-of-type, befre, gradient, fontawesome)

이번 영상은 20분 완성이 아니라 50분 완성이 되었습니다 죄송

ㅠㅠ [정정] 폰트어썸 유니코드는 가상클래스 content 안에 넣을 경우에 필요합니다 이번 예제에는 유니코드 사용하지 않았습니다 [참고] 그라디언트 배경 아이콘에 쓰인 폰트어썸 아이콘 : paper-plane, plane, rocket [참고] 리스트에 쓰인 폰트어썸 아이콘 : check, times 나중에 지울거지만 가상의 보더를 꼭! 그리고 시작하세요

그래야 레이아웃 구조감이 생깁니다 [참고] height:auto 로 만들어진 코드를 보실 수 있습니다 auto 기본값이니 꼭 필요하지 않습니다 패딩 마진 모두 숫자 1개 적으면 상하좌우, 숫자 2개면 첫번째 상하, 두번째 좌우입니다 매우 중요해용~~ㅎ box-sizing:border-box를 주지 않으면, 실제 너비는 342px 가 됩니다 (300+20+20+1+1) 배경 그라디언트 3가지 값(방향, 시작색상, 종료색상) 공통적인 속성과 값은 항상 하나의 선택자에 담고, 변하는 속성만 따로 선택자를 만들어 지정합니다 nth-child : 출연하는 엘리먼트 순서만 체크(태그 타입 체그 안함) / nth-of-type : 해당 태그 타입 중에서만 출연하는 엘리먼트 순서만 체크 이것만 기억하시면 포지션 속성 오케이~!! 부모요소 relative / 자식요소 absolute 넘친(overflow) 부분 감춰(hidden) skew를 사용하는 방법입니다 이 방법 더 추천~!! transform: skewY(-10deg) transition은 hover가 아니라 항상 원본상태에 줍니다

z-index는 항사 position은 세트로 사용됩니다 복습만이 살길입니다 반드시 3번 복습하세요 1번) 실습없이 눈으로 그냥 부담없이 보기 2번) 실습으로 따라하면서 예제 만들기 3번) 영상 참고 없이 스스로 만들기 구독자 없어서 영상 제작 의욕 떨어지지 않게 '구독과 좋아요' 부탁해요~^^

웹에플리케이션 만들기 – html, css, js의 활용

그럼 지금 부터는 우리가 지금까지 배운 것들을 활용해서 여러분이 직접 어떤 것을 만드는 것이 아니라 다른 사람 또는 다른 회사에서 만든 이 거대한 기능들을 여러분이 몇 줄의 코드를 붙이는 것을 통해서 여러분의 서비스에 붙일 수 있는 그런 방법들에 대해서 살펴보겠습니다 우리가 진도를 나가는 것도 좋지만 지금까지 우리가 배운 것들을 아주 작게 사용해서 강력한 효과를 얻는 것을 여러분들이 확인하는 것도 공부의 재미를 높이는 중요한 요소라고 저는 생각하거든요

그래서 준비한 수업입니다 하지만 우리 수업의 흐름상에서는 이것은 있어도 좋고 없어도 좋은 것이기 때문에 급하시거나 시간이 없거나 재미없으면 넘어 가셔도 되는 부분입니다 우선 두 가지의 서비스를 붙여 볼 겁니다 첫 번째는 댓글 서비스인데요 지금 보고 계신 이 사이트에 여러분과 다르게 저는 댓글이 있네요

이것은 뭐냐면 DISQUS라고 하는 서비스를 쓰고 있고요 “자바스크립트를 알고 싶어요”라고 이렇게 방문자가 댓글을 달면, 댓글이 달리는 거죠 그렇게 댓글을 달면 그것이 관리자인 여러분에게 이메일로가서 여러분이 이메일로도 확인 할 수 있고 그 이메일에다가 직접 답글을 달면 여기에도 답글이 달리는 그런 기능을 제공을 합니다 특히나 스팸을 차단 한다든지 이런 여러가지 복합적이고 복잡한 기능을 우리가 직접 만드는 것은 대단히 어렵고 까다로운 일인데 그런 것들을 제공하는 기능입니다 또 하나는 여러분 사이트에 방문한 사람들과 채팅을 하고 싶을 수도 있잖아요

그런 경우에 이것을 직접 만드는 건 이것 역시도 엄청나게 힘든 일인데 우리는 몇 줄의 코드만 붙이면 이렇게 생긴 채팅창이 생겨납니다 그러면 여기에다가 여러분이 “안녕하세요? 또 질문이 있습니다“ 라고 입력하고 엔터를 치면 지금 소리 들리시죠 이 소리는 여기서 나는 겁니다 여기서 이것은 여러분이 방문자에게 응답할 수 있는 화면이에요

여기서 참여 버튼을 누르면 이렇게 화면이 뜨고, “말씀하세요” 라고 하고 엔터를 치면 이렇게 방문자에게 "말씀하세요" 라고 하는 문자가 가는 그런 채팅기능입니다 이것을 우리가 장착을 해 볼 것 입니다 채팅기능과 댓글기능 우선 댓글기능부터 살펴보겠습니다

댓글 기능은 저는 DISQUS라고 하는 회사에서 제공하는 서비스를 쓸 건데 이게 아무래도 외국에서 제작된 서비스이기 때문에 DISQUS 말고도 한국에 LiveRe라고하는 좋은 서비스가 있으니까요 이런 서비스도 한 번 살펴보시면 좋겠습니다 저는 DISQUS로 수업을 진행을 하겠습니다 DISQUS에 가셔서 일단은 회원가입을 하셔야 합니다 그리고 여기 보시면 GET STARTED 라고 되어있는 부분을 클릭하면 이 중에서, I want to Install Disqus on my site

라고 되어있는 부분을 클릭하면 이거는 뭐냐면 “DISQUS를 나의 사이트에 설치하고 싶습니다” 란 뜻 입니다 그럼 이렇게 나오죠 그럼 여기에서 웹 사이트 이름으로 "생코웹애플리케이션만들기수업"이라고 이렇게 하고 입력하면 여기 잘 보시면 주소가 자동으로 생성이 되는데 소리 나는 대로 읽어보세요 예 신기할 거예요

한국어죠 그리고 Category는 뭐 적당히 선택하시면 되고요 Language는 Korean으로 하면 한국어로 만들어집니다 Create Site 를 하면 이제 DISQUS에 여러분의 사이트 하나가 등록된 겁니다 무슨 말인지는 조금만 기다려보시면 이해가 됩니다 여기서 Yes, I understand 라고 되어있는 것을 클릭하시고 그리고 그 중에서 여러분이 지금 생성한 댓글을 여러분 사이트에 장착해야 되기 때문에 그 장착하기 위한 코드가 필요합니다

Universal Code 를 클릭합니다 그러면 이렇게 코드가 나오는데 바로 여기 있는 이 코드를 카피해서 (카피 작업 중) 우리의 코드에서 이 <article> 안쪽 즉 여러분이 댓글을 장착하고 싶은 그곳에다가 붙여넣기를 이렇게 합니다 그럼 여기 있는 코드를 잘 보면은 어때요 DISQUS가 우리한테 html코드를 주고 JavaScript코드를 이렇게 주는 것을 볼 수가 있습니다 여기 JavaScript코드가 어떻게 생겼고 어떻게 동작하는지는 중요하지 않습니다

그냥 DISQUS는 이렇게 생긴 코드를 우리의 웹사이트에 다가 붙이면 DISQUS의 기능이 우리 웹사이트에 붙을 것 입니다 라고 우리한테 사용설명서의 안내를 해 준거고 우리는 그 안내에 따라서 그렇게 하면 되는 겁니다 이렇게 한 다음에 그리고 제가 Reload를 해보면 보시는 것처럼 DISQUS에 댓글이 붙은 것을 볼 수가 있습니다 만약에 여기에 간격이 너무 떠 붙어있다 그러면 여러분이 CSS같은 걸을 통해서 이 간격을 조정하면 더 밑으로 내려와서 보기 좋은 형태가 되겠죠 이게 DISQUS입니다

어때요 이렇게 강력한 기능을 이렇게 간단하게 붙일 수 있다는 거 하지만 이게 아무리 간단하다고 하더라도 여러분이 우리가 앞에서 배웠던 html, CSS, JavaScript와 같은 것들에 대한 이해가 없다면 이것을 하는 것은 어려운 일이거나 아니면 이것을 하는 것을 여러분이 아예 엄두를 내지 못할 가능성이 큽니다 우리가 앞에 있는 것들을 배웠기 때문에 이렇게 가능하고 그것만으로도 이렇게 강력한 효과가 나온다 라는 것을 여러분들이 좀 즐거우셨으면 좋겠습니다 한 번 이것 저것 해보세요

그리고 하나만 더 해봅시다 여기다가 채팅기능을 제가 붙여 볼 건데요 tawk(착)이라고 하는 서비스입니다 tawk 이름이 되게 어렵죠 tawk

to 라는 서비스로 들어 가보시면 이렇게 생긴 서비스인데 이 서비스는 이 온라인으로 채팅으로 고객지원을 해주는 그런 기능을 제공하는 서비스이고 아주 강력한 기능을 완전히 무료로 제공하고 있는 그런 서비스입니다 회원가입을 하시면 되겠고요 회원가입이 끝난 다음에는 로그인 버튼을 클릭해서 이렇게 관리자 화면으로 들어가시면 됩니다 위에서 여기 위에 언어를 선택하는 부분에서 한국어를 선택하시면 저처럼 한국어를 볼 수가 있습니다 그리고 여기에 보시면 Admin이라고 되어있는 부분을 클릭해보시면 Property 라고 되어있는 부분의 추가 버튼을 눌러서 사이트를 추가 할 수가 있습니다

즉 여러분이 붙이고 싶은 채팅사이트를 추가하는 거죠 그리고 만들기 버튼을 누르면, 여기 만들기 전에 여기에다가 "생코웹애플리케이션만들기" 라고 적어주시고 사이트 URL은 여러분이 운영하는 사이트를 적으면 되는데 아무거나 적어도 잘 작동하더라구요 저는 o2org 라고 실제로는 없는 사이트죠 그리고 만들기를 누르면 되고 만약에 여러분이 사이트가 없다

그런 경우에는 그냥 페이지를 선택하시면 이 tawk에서 만들어 준 페이지의 채팅기능이 붙기 때문에 여러분이 특별히 웹사이트를 직접 운영하지 않아도 가능합니다 만들기 버튼을 누르겠습니다 그러면 이렇게 생긴 화면이 뜨고요 여기의 오른쪽에 보시면 Widget Code(위젯코드)라는 것이 나옵니다 저기 있는 저 Widget Code를 카피합니다

그리고 이 코드를 어디로 가져가냐 우리의 웹페이지의 <body> 위쪽에 다가 붙여주세요 이 <body> 코드위에 다가 붙여주는 거죠 그리고 사이트로 들어 간 다음에 Reload를 하면 여기에 어떤 변화가 생기는지를 한 번 봅시다 보시는 것처럼 이렇게 생기화면이 뜨죠 그럼 여기에서 클릭하면 상담원이랑 채팅을 할 수 있는 화면이 뜹니다

여기에다가 “안녕하세요? 질문이요” 하고서 엔터를 치면 잠시 후에 우리 관리자화면에서 전화가 걸려와요 그리고 여기 있는 이게 전화가 왔다는 뜻입니다 그걸 클릭하면 이런 화면이 뜨고요 여기에 참여버튼을 누르면 보시는 것처럼 전화를 받는 셈 인거죠 그럼 여기서 “말씀하세요

” 화면을 쪼개봤습니다 “말씀하세요”라고 엔터를 치면 보시는 것처럼 말씀하세요가 뜨고 여기에서 방문자가 “궁금한 건요”이렇게 하면은 보시는 것처럼 방문자가 한 말이 우리의 사이트에 들어오게 되는 것이죠 그럼 여기서 여러 가지 그 방문자들에게 이 도움을 줄 수 있는 그런 활동들을 여기서 하고 그 다음에 작업이 끝나면 여기 있는 끝 버튼을 누르시면 됩니다 그러면 끝나는 거죠 그리고 이렇게 커뮤니케이션했던 이력이나 이런 것들이 이제 우리 여러분의 관리자에 남게 되고 그리고 혼자서 그 뭐죠

응대를 하는 것이 아니라 여러분 사람들이 응대할 수 있는 그런 기능들도 제공하고 있는 아주 강력한 서비스입니다 지금 제가 두 가지의 사례를 보여드렸는데요 이 사례가 중요한 것이 아니고 여러분들이 좀 주목을 해야 될 점은 우리가 코딩을 하는 이유가 무엇인가라는 겁니다 지금 우리가 지금까지 html, CSS, JavaScript 와 같은 것들을 배웠고 그런 것들을 통해서 이것 저것을 만들어봤는데 우리가 만든 것 중에는 보시는 것처럼 이렇게 제목과 같이 어떻게 보면 작은 기능부터 시작해서 여기 있는 저기 뭐죠 DISQUS와 같은 댓글 그리고 tawk과 같은 이 채팅시스템과 같은 말하자면 거대한 기능을 여러분의 애플리케이션에 붙이는 거 까지 가능해 진 것은 바로 코드의 힘이라는 것 즉 코드는 여러분이 만들고자 하는 것에 필요한 것들 제목, 댓글, 채팅 이러한 부품들을 결합하는 결합방법 또는 접착제와 같은 것이다 라는 생각을 좀 가지시면 좋을 것 같습니다 이렇게 해서 조금 실용적인 예제를 좀 보여드리려고 했는데 이러한 예제들을 바탕으로 해서 여러분들이 실제로는 거대한 웹사이트를 성큼성큼 만들어가는 겁니다

여기까지 하겠습니다

Web Design – HTML Basic Class | Hello World

안녕하세요 안녕하세요

오늘의 수업 HTML 기본 수업 처음에는 PC 또는 Computer Setup에 대해 알 수 있습니다 우리는 폴더를 만들었습니다 자, 폴더 안에있는 상단보기를 클릭하십시오 그런 다음 옵션을 클릭하십시오 그런 다음 새 폴더 옵션 탭이 열립니다

다시보기를 클릭하십시오 이제 알려진 파일 형식의 확장명 숨기기 왼쪽에 똑딱 거리는 것은 제거되어야합니다 그런 다음 확인 버튼을 클릭하십시오 당신의 일이 끝났습니다 PC 설정이 완료되었습니다

텍스트 문서에서 새 파일을 만듭니다 이제 이름은 indexhtml입니다 우리의 확장은 이제 쉽게 볼 수 있습니다 왜냐하면, 우리는보기로 이동하기 때문에 확장 숨기기 옵션에서 확장이 제거되었습니다

웹 디자인이란 무엇입니까? 즉, 웹 디자인이란 무엇입니까? 즉, 웹 디자인, 웹 사이트는 어떻게 생겼습니까? 웹 디자이너로서의 당신의 직업 완벽한 웹 사이트 템플릿을 만드십시오 즉, 헤더가 메뉴를 가질 것인지, 사이드 바가 있어야하는지, 꼬리말은 무엇을 의미합니까? 코드 편집기 코드 편집기 란, 어디에서 어떤 코드를 작성해야합니다 즉, 웹 디자인을하기 위해서는 코드를 알고 배우거나 우리는 코드 편집기를 선택했다 비주얼 코드 스튜디오 할 수있는 일이 많이 있습니다

코드 편집기를 사용할 수 있습니다 예를 들면 : Notepad ++ 숭고한 코드 편집기 등 코드 편집기 다운로드 및 설치 HTML이란 무엇입니까? 즉, HTML이란 무엇입니까? HTML은 하이퍼 텍스트 마크 업 언어입니다

그렇지 않으면 웹 디자인을 할 수 없습니다 태그 열기 및 닫기 HTML을 우리에게 쓸 때 태그를 여는 것이 필요합니다 그리고 닫는 태그를 사용하십시오 태그 : 제목 및 단락 우리는 H1에서 H6으로 시작합니다

총 6 개의 표제 태그를 사용할 수 있습니다 첫 번째 태그부터 마지막 ​​태그까지의 제목 태그 연속 쓰기는 계속 작을 것입니다 즉, 내가 H1에서 내려 오 자마자, 텍스트가 작을수록 좋습니다 이 수업은 오늘 여기서 끝날 것입니다 다음 학급에서 다시보세요

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

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

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

원하는 디자인을 바로 선택하기 위해서는 무브툴 -> 단축키 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는 검지 그리고 엄지 손가락은 스페이스 키를 올려놓으신 다음에 포토샵에서 작업하시면 훨씬더 빠른속도로 할 수 있습니다 다만 단축키를 많이 아셔야 겠죠 단축키를 모르시면 마우스로만 계속 작업하게 되는데 처음에는 마우스가 편할지 모르지만 작업이 많이 반복되면 단축키가 훨씬더 빠릅니다

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

감사합니다

Text Animation | HTML and CSS Tutorial | Web Design Tutorial 2019

CSS와 HTML을 사용하여 우리의 비디오를보고 웹 디자인을 배우십시오

좋아, 시작하자 그것은 최고의 텍스트 애니메이션입니다 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서

텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션

웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019

HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션

웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019

HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

감사합니다 구독하십시오

MSIT, NwSSU: WIS HTML-CSS Responsive Web Design Tutorial

안녕 얘들 아이 튜토리얼에 대한 CSS를 사용한 반응 형 웹 디자인 너는 나에게서 배운다 지금부터 시작하자

그래서 왜 하나의 저장 웹 디자인은 중요한 목표는 반응 형 디자인은 불필요한 크기 조정 스크롤 확대 / 축소 또는 사이트에서 발생하는 패닝 다른 용도로 최적화되지 않았다 장치 웹 페이지는 다음을 사용하여 볼 수 있습니다 데스크톱과 같은 다양한 장치 태블릿 및 휴대 전화 웹 페이지가 있어야합니다 좋아 보이고 관계없이 사용하기 쉽다 웹 사이트가있을 때 장치의 반응 형 디자인으로 쉽고 빠르게 변경됩니다

변화를 걱정할 필요가있다 이러한 유연성은 웹 사이트에 큰 영향을 미칩니다 당신이 빨리하고 싶을 때 이점 당신의 편에 오타를 꼬집거나 수정하십시오 한 번 시작하면됩니다 다음을 포함하는 폴더를 만듭니다

HTML 파일을 색인화하고 CSS 스타일 지정 우리의 인덱스에서 HTML 파일을 추가하자 HTML 구조를 추가하면 제목은 이제 가장 중요한 것으로 반응 형 웹 사이트에 대한 추가는 메타 태그 html5가 메소드를 도입했습니다 웹 디자이너가 제어권을 갖도록 허용 메타 태그를 통해 뷰포트 메타 뷰포트 요소를 포함해야합니다 우리가 말할 때 모든 웹 페이지에서 뷰포트는 사용자가 볼 수있는 영역입니다 웹 페이지는 장치에 따라 다릅니다

더 작은 장치를 사용하는 경우 뷰포트가 컴퓨터보다 작다 width 속성이 화면을 제어합니다 뷰포트의 크기는 너비와 같은 특정 픽셀 수 600에 해당하는 특수 값 장치 CSS의 화면 너비입니다 100 % 스케일의 픽셀 initial-scale 속성은 페이지가 처음로드 될 때 줌 레벨 많은 웹 페이지가 그리드보기를 기반으로합니다 이는 페이지가 분할됨을 의미합니다 n 개의 반응 그리드보기를 컬럼으로 12 개의 열을 가지며 총 너비는 100 % 축소되고 확장 될 것입니다

브라우저 창 크기를 조정할 때 웹 디자인에 중요한 역할을한다 놓기가 더 쉽기 때문에 페이지를 페이지의 요소를 반응 형 그리드보기를 통해 모든 HTML 요소에는 상자 크기 조정 기능이 있습니다 속성은 테두리 상자 값을 설정합니다 패딩과 경계를 확인합니다 총 폭과 요소를 추가하는 높이 CSS를 만들어야합니다

스타일 시트를 찾아서 색인에 삽입하십시오 이제 해당 HTML 파일을 상자에 추가 할 수 있습니다 테두리 상자 볼륨으로 크기 조정 속성 내부에 두 개의 열을 추가해 봅시다 HTML 파일의 한 행 HTML 태그를 추가 한 후 반응 형 스타일 이 모든 항목이 표시되는 것처럼 이 때문에 왼쪽으로 떠있었습니다 열 안의 요소가 사용됩니다

페이지의 흐름을 방지하기 위해 우리가 스타일을 추가해야만하는 상황에서 애프터 셀렉터가있는 행에서 우리는 두 값이 모두 들어있는 clear 속성 새 행이 아래에 추가됩니다 첫 번째 행은 우리가 만든 예제를 보여줍니다 당신은 % value를 사용해야합니다 특별히 요소의 너비 이전에 언급 한 것처럼 지금 열 웹에 총 12 개의 열이 있습니다 12 열을 만들자

수업을하고 반응 형 웹에 사용 페이지 이 열은 모두 부동이어야합니다 왼쪽에는 15px의 패딩이 있어야합니다 국경도 간단한 웹 페이지를 만들어 보겠습니다 머리글과 바닥 글을 추가합니다 이제 섹션 내부에 2 개의 행을 추가 할 것입니다

우리는 섹션 태그를 사용하고 section 태그에 두 개의 div 요소를 추가합니다 수업 행과 함께 첫 번째 행 안쪽에 두 개가 추가됩니다 열을 추가하고 각각 내부에 항목을 추가하십시오 기둥 두 번째 행에 3을 더할 수 있습니다 열을 추가하고 각각 내부에 텍스트를 추가하십시오

기둥 당신 좋아 이제 웹 페이지가 생겼어 당신 웹 페이지에 이미지를 추가 해보자 만들어진 브라우저에서 확인해 봅시다 이미 반응 적이다 이미지가 없기 때문에 여전히 혼란 스럽다

비율의와 그것의 적합하지 않았다 우리는 무엇을해야 고정 된 일을해야 하는가? 내가 말한대로 그것을 반응하게 만든다 이전에 칼럼 내부의 요소 만들기 우리는 반응 형의 이 경우 너비 속성은 이미지 요소가 우리 칼럼에 잘 맞춰서 최대 너비 속성이있는 이미지 추가 100 퍼센트 가치 좋아, 나는 그것이 모두 좋다라고 생각한다 좋아, 그래서 미디어 쿼리 미디어 쿼리 무엇입니까 css3에서 소개 된 CSS 기술로서 @media 규칙을 사용하여 블록을 포함합니다 특정 경우에만 CSS 속성 조건은 이것보다 일찍 참이다 튜토리얼 우리는 행이있는 웹 페이지를 만들었습니다

및 열 및 그것은 반응했지만 그것은 작은 화면에서 좋지 않았다 미디어 쿼리는 우리가 할 수있는 것을 도울 수 있습니다 브레이크 포인트를 추가합니다 디자인이 다르게 작동합니다 거기에 브레이크 포인트의 각면이있다

수많은 스크린과 장치 높이와 너비가 다르기 때문에 에 대한 정확한 중단 점을 만들기가 어렵다 각 장치는 물건을 간단하게 유지하기 위해 여분의 5 개 그룹을 목표로 할 수있다 장치들 소형 장치 중간 장치 대형 장치 초대형 기기는 @media 규칙을 사용하는 다른 중단 점 개발에 사용할 수있는 먼저이 타일을 추가하여 모든 열의 너비가 100 %로 변경됩니다 소형 장치에 도달했을 때 그 (것)들을 사용하여 성분을 은폐하는 것을 시도하자 미디어 쿼리 이렇게하면 반드시 모든 이미지가 숨겨집니다

너비가 600px 미만인 경우 웹 페이지 이제 글꼴 스타일을 미디어 쿼리를 사용하는 태그 텍스트의 글꼴 변경 스타일이 600px에 도달하면 스타일 미디어 쿼리를 사용하여 서로 다른 요소의 글꼴 크기 화면 크기 당신 이 비디오를 시청 해 주셔서 감사합니다 [음악]