본문 바로가기

전체 글391

[일러스트] 보안 아이콘 세트 만들기 새 문서를 설정하는 방법백그라운드에서 소프트웨어가 이미 실행되고 있다고 가정하고 위로 가져 와서 다음 설정을 사용하여 조정할 새 문서 ( 파일> 새로 만들기 또는 Control-N )를 설정하여 시작합시다 .대작의 수 : 1 너비 : 800px 높이 : 600px 단위 : 픽셀 그리고 고급 탭에서 :색상 모드 : RGB 래스터 효과 : 화면 (72ppi) Pixel Perfect Workflow를 사용하여 아이콘을 만들려고합니다. 잠시 시간을내어 빠른 시일 내에 배우게 될이 자습서 를 읽어 보시기 바랍니다 . 레이어 설정 방법새 문서를 설정하고 나면 여러 레이어를 사용하여 아이콘을 분리하는 것이 좋습니다. 이렇게하면 한 번에 하나의 항목에 집중하여 작업 과정을 간소화 할 수 있으므로 추적 할 수 있습니다.. 2019. 1. 8.
[일러스트] 레트로 텍스트 3D로 디자인 소개이 튜토리얼에서는 복고풍 웨이브, 신스 웨이브 및 웨이브 웨이브와 같은 스타일에 영향을 받고 80 년대 문화와 밀접한 관련이있는 레트로 레터링을 만드는 방법을 배우게됩니다. 3D 필터를 사용하지 않고 3D 효과를 텍스트에 적용하는 법을 배우십시오. 멋지다, 맞지? 시작하기 전에 가장 좋아하는 텍스트와 글꼴을 선택 하십시오 . 여기 에서이 자습서 에서 사용한 글꼴을 다운로드 할 수 있습니다 . 시작할까요?문서 설정프로젝트를 시작하기 전에 의도 한 형식이 무엇인지 명확히하는 것이 중요합니다. 이 경우 포트폴리오와 소셜 미디어에서 이미지를 공유 할 것이므로 RGB 모드 를 사용해야 합니다. Adobe Illustrator는 벡터 파일이므로 작업 할 소프트웨어는 Adobe Illustrator입니다. 따라서.. 2019. 1. 7.
[일러스트] 동물 파티 장면 만들기 이 튜토리얼에서는 3 명의 카와이 동물 친구들의 마술 파티 일러스트레이션을 만드는 과정을 안내합니다. Adobe Illustrator에는 Shape Builder 도구라는 매우 강력한 도구가 있으며이 튜토리얼에서 다양한 팁과 트릭을 보여 드리지만 특히 스포트라이트를받을 가치가 있으므로이 도구를 강조 할 것입니다.더 이상 고민하지 않고 시작합시다!스케치 준비하기스케치는 그 과정에서 매우 중요하며 사람들은 그것을 다르게합니다. 나는 과거에 정말 거친 것들을 그렸지만 나중에는 더 깨끗한 스케치를 사용하는 것이 최종 일러스트레이션을 구축하는 데 많은 도움이된다는 것을 깨달았습니다.색상 키로 색상 계획스케치에 만족하면 드로잉을 대략 색칠하고 가능한 한 최종 색에 가깝게하려고합니다. 이렇게하면 최종 일러스트레이션을.. 2019. 1. 6.
SVG에 대한 완벽한 가이드 1/6 페이지 중 1 페이지 :SVG를 사용하는 8 가지 이유Scalable Vector Graphics 는 이제 모든 브라우저 (데스크탑 및 모바일)에서 보편적으로 지원됩니다. 웹 디자인 작업에서 디자인 및 구현 방법에 대한 안내서입니다.먼저 워크 플로우의 일부로 SVG를 사용해야하고 응답 성있는 웹 디자인 을해야하는 8 가지 이유가 있습니다 .SVG에 대한 완벽한 가이드 : 빠른 링크SVG 사용 방법 웹용 SVG 작성 SVG 필터 및 효과 SVG에 애니메이션 추가 스프라이트의 힘01. 벡터가 선명하다.SVG는 좌표를 그리는 시스템을 사용하여 점을 그려서 선, 도형 또는 경로를 그리는 데 연결합니다. 벡터 그래픽은 수학을 사용하여 그려져있어 선명하고 선명하며 다른 이미지 형식처럼 픽셀 화되지 않아 로고.. 2019. 1. 5.
2019년 6대 로고 트렌드 인간으로서 우리는 자연스럽게 패턴을 찾아 내고 식별합니다. 그것은 우리가 프로그래밍 된 방식입니다. 로고 디자인은 모든 디자인 작업과 마찬가지로 식별 가능한 경향을 찾는 것이 자연 스럽습니다. 그러나 트렌드가 실제로 존재하는지 여부를 확인하는 데는 많은 혼란과 종종 희망찬 생각이 있습니다. 로고 디자인 트렌드는 무엇입니까?Loyalkaspar의 크리스 하몬 (Chris Harmon) 크리에이티브 디렉터는 "거대한 바다에서의 트렌드를 찾는 것은 까다로운 작업 일 수 있습니다 . "때로는 자신의 취향에 끌리는 경향이 있으며, 경향은 스스로 실현되는 예언이됩니다."예를 들어 부정적인 공간을 생각해보십시오. Buzzfeed News에서 Jetsave Tours에 이르기까지 올해 로고 디자인에 부정적인 공간이 많.. 2019. 1. 4.
2019년 타이포그래피 동향 그래픽 디자인 트렌드 나 컬러 트렌드 와 같은 타이포그래피 경향은 거의 아무데도 드러나지 않습니다. 대신 그들은 틈새 시장에서 주류 시장으로 나아갈 때 진화하고 성장합니다. 이것이 바로 2019 년의 커다란 타이포그래피 추세를 예측하기 위해, 우리가 2018 년의 가장 큰 유형 운동을 다시 되돌아 보는 이유입니다. 사이트의 다른 곳에서는 주요 디자이너의 알아야 할 주요 타이포그래피 규칙 및 용어를 다루는 기사 뿐만 아니라 유형 디자인 기술을 향상시키는 데 도움이 되는 타이포그래피 (tutorial) 자습서 와 최상의 무료 글꼴 폰트 를 제공합니다.그러나 여기서 우리는 앞으로의 한 해를 기대하고 있습니다. 우리는 2018 년의 가장 큰 타이포그래피 동향에 대한 생각과 2019 년에 뜨거울 것으로 예상되는 .. 2019. 1. 3.
CSS 애니메이션 18가지 예제 최근에 점점 더 많은 CSS 애니메이션 예제가 웹 사이트에 게재되고 있음을 눈치 챘을 것입니다 . 애니메이션은 올해 웹의 주요 트렌드였으며 아무데도가는 흔적을 보이지 않고 있습니다. 웹 전반에서 디자이너는 창의력을 발휘하고 CSS 애니메이션을 사용하여 사이트에 개성을 부여하고 복잡한 아이디어를 손쉽게 캡처하며 사용자의 행동을 미묘하게 안내합니다.여기서 가장 중요한 규칙은 CSS 애니메이션이 지나치게 강조되어서는 안되며 미묘한 움직임조차도 큰 영향을 미칠 수 있으며 너무 많은 경우 사용자를 혼란스럽게하거나 자극적으로 만들 수 있습니다. 온라인에서 볼 수있는 최고의 애니메이션은 여전히 ​​디즈니의 고전 12 애니메이션 원칙에 뿌리를두고 있습니다. 여기서는 전 세계 웹 사이트에서 가장 우수한 CSS 애니메이션.. 2019. 1. 2.
2019년 5가지 일러스트 트렌드 국경과 여러 미디어에 걸쳐있는 일러스트레이션과 같은 광범위한 분야에서 추세를 정확하게 식별하는 것은 지뢰밭입니다. 그러나 2018 년이 다가옴에 따라 우리는 고객으로부터 어떤 종류의 일러스트레이션이 요구되는지에 대한 폭 넓은 주제를 추출 할 수 있다고 믿습니다. (당신이 그것들을 찬성하든 그렇지 않든간에 그것은 다른 이야기입니다.)그래서 이번 포스트에서 우리는 지난 해를 지배하고 다음 연도를 지배 할 가능성이있는 일러스트레이션 세계의 다섯 가지 큰 트렌드를 지적합니다. 우리는 당신이 이러한 경향을 스스로 따라야한다는 말은 아니지만 그것이 존재한다는 것을 아는 것은 확실히 편리합니다 ...01. 밝은 색상과 단순한 모양Olimpia Zagnoli의 파스타 브랜드 Barilla 포장 디자인브랜딩, 광고 및 .. 2019. 1. 2.
CSS Grid로 반응형 레이아웃 만들기 CSS 그리드 레이아웃 은 매일 브라우저 지원에서 성장하고 있으며 CSS 그리드를 프로덕션에 제공 할 수 있습니다. CSS Grid의 신속한 채택은 정말 주목할 가치가 있습니다.CSS Grid를 사용하여 반응 형 포트폴리오 사이트 레이아웃을 작성하기 전에 몇 가지 사항을 정리해 보겠습니다 . CSS Grid는 Flexbox를 대체하지 않습니다 . 그것은 부유물을 대체하지 않습니다. 실제로 CSS Grid가 훨씬 더 잘하는 일을하기 위해 Flexbox를 사용하고 있다는 것을 알 수 있습니다. 그러나 교체의 관점에서 생각하는 대신, 우리는 조합의 관점에서 생각할 수 있습니다.15 가지 유용한 웹 디자인 튜토리얼땅콩 버터와 젤리 샌드위치를 ​​상상해보십시오. 땅콩 버터와 젤리는 그 자체만으로도 굉장히 훌륭합니.. 2019. 1. 1.
CSS 그리드로 어떻게 디자인하나요? 이전에 시도하지 않은 사람들에게 CSS 그리드를 소개 한 후, 사람들이 질문하는 그리드의 구현이 아니라 오히려 그 이전의 것임을 알게되었습니다. 레이아웃이 어떻게 설정 될지에 대한 실제 계획.이전 글을 통해 CSS 그리드 교육에 대한 새로운 글을 읽었을 때 제가 사용했던 유추 중 하나는 원예에 관한 것입니다. 즉, 수국, 장미 및 튤립이있는 곳을 정확하게 큐레이팅하는 것입니다. 좋아, 거기서 널 잃어 버렸어. 나는 원예가 모든 사람의 것이 아니라고 생각 한다 . 🤷 .그러나 솔직히 말해서 CSS 그리드로 디자인하고 제작을 시작한 이후 필자는 연필과 종이를 사용하여 내 그리드를 훨씬 더 많이 스케치했습니다. 그리드 구문 자체는 매우 시각적이며 그리드를 가르치고있을 때 항상 강조합니다.간단한 그리드의 구문을.. 2019. 1. 1.
CSS Grid Examples 코드를 복사하여 자신의 프로젝트에 붙여넣고 원하는대로 수정하십시오.사진 갤러리반응 형 - 동일한 크기의 이미지 사용반응 형 - 늘어나는 항목 정렬 (기본값)반응 형 - 정렬 할 항목 정렬반응 형 - 항목을 가운데 정렬반응 형 - 항목 정렬을 종료합니다.반응 형 (Span) - 5 열반응 형 - 3 열, 2 행반응 형 - 3 열, 3 행유체 - 같은 크기의 이미지 사용Fluid - 정렬 및 정렬 항목 스트레치유체 - 항목 정렬 및 양쪽 정렬 시작유체 - 항목 중심 맞춤 및 정렬유체 - 항목 정렬 및 양쪽 정렬유체 - 스팬 5 열유체 - 스팬 3 열, 2 열유체 - 스팬 3 열, 3 행예 3 : 반응 형 - 시작할 항목을 정렬합니다.예제 15 : Fluid - Span 3 열, 2 행.카드 예반응 형 - 늘.. 2018. 12. 24.
CSS[14] 그리드 레이아웃을위한 브라우저 지원 이 기사에서는 이전 브라우저를 계속 지원하면서 지금 그리드를 사용하는 방법을 보여줍니다.2017 년 3 월까지 그리드 레이아웃에 대한 브라우저 지원은 사실상 존재하지 않았습니다. 인터넷 익스플로러와 엣지는 그리드를 지원하는 유일한 브라우저 였지만 그때조차도 -ms-접두어 만 사용했습니다 . 게다가, 지원은 사실 이전 버전의 스펙이었습니다 (이전 스펙보다 많은 것들이 많이 변경되었습니다).사실, 파이어 폭스, 크롬, 오페라는 그리드를 지원했지만, 오직 플래그 뒤에서 만 가능했다. ( layout.css.grid.enabled파이어 폭스에서는,실험적인 웹 플랫폼 기능아래 chrome://flags) 크롬과 오페라한다.그러나 2017 년 3 월은 CSS 그리드 레이아웃에 매우 중요한 달이었습니다. 그리드 지원.. 2018. 12. 23.
CSS[13] 그리드 인스펙터 사용하기 Firefox에는 브라우저를 통해 그리드를 검사 할 수있는 inbuilt 도구가 있습니다. Chrome에서이를 수행 할 수있는 제 3 자 도구가 있습니다.Firefox DevTools는 브라우저에서 보는 모든 격자의 격자 레이아웃을 검사하는 방법을 제공합니다. 이는 많은 트랙에 걸쳐 그리드 항목이있는 복잡한 그리드 또는 매우 드문 드문 채워진 그리드가있는 경우 유용 할 수 있습니다. 이와 같은 경우 항목을 보유하고있는 실제 그리드를 시각화하는 것이 어려울 수 있습니다.DevTools의 그리드 인스펙터를 사용하면 그리드 라인과 그 사이의 거터를 볼 수 있습니다.이렇게 :파이어 폭스 DevTools에서 볼 때 격자의 예.Firefox 격자 속성을 사용하는 방법Firefox DevTools를 사용하여 그리드의.. 2018. 12. 22.
CSS[12] 눈금으로 절대 위치 지정 절대 위치 지정이 그리드 내의 정상적인 흐름에 미치는 영향의 예.일반 블록 내에서와 마찬가지로 그리드 내에서 절대 위치 지정을 사용할 수 있습니다. position: relative그리드 항목에 설정 한 다음 position: absolute하위 항목 중 하나 를 사용 하면 지정한 모든 위치가 해당 그리드 항목에 적용됩니다.다음은 절대 위치 지정을 사용하여 그리드 항목의 오른쪽 하단 모서리에 아이콘을 배치하는 예제입니다. RunStack editor Unstack editor Editor PreviewExamplebody { display: grid; grid-template-areas: "header header header" "nav article ads" "nav footer footer"; gri.. 2018. 12. 22.
CSS[11] 그리드 항목 계층화 그리드 항목은 계층화되어 교차하는 그리드 영역이 겹칠 수 있습니다.CSS 그리드 레이아웃을 사용할 때 교차하는 그리드 영역, 음수 여백 또는 기타 위치 지정 기법으로 인해 그리드 항목이 겹칠 수 있습니다. 이 경우 주문이 수정 된 문서 순서와 z-index속성 에 따라 항목이 계층화됩니다 .원시 문서 순서특별히 z-index그리드 항목을 재정렬하거나 적용하지 않으면 중복되는 항목은 원본 문서 순서에 따라 정렬됩니다. 즉, 소스 태그에 나타나는 순서입니다.예: RunStack editor Unstack editor Editor PreviewExample#grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr .. 2018. 12. 22.

티스토리툴바