본문 바로가기

개발88

피그마 웹 소스 출력은 없나? 플러그인이 있을거 같은데?! 사용법 Material Design 3를 보고 spring boot에 적용시키려고 찾아보았다. 웹컴포넌트 태그를 코딩하고 하나하나 자바스크립트로 초기화해주면 작동이 되는데 플러터에서는 디자인 설정을 활성화해주고 테마나 이런 것만 적용해 주는 것으로도 적용이 가능하나 웹에선 일일이 태그를 적고 초기화를 시켜준다는 게 좀 불편해 보였다. 그래서 부트스트랩처럼 디자인되어 있거나 만들어 주는 툴을 찾아다녔는데 피그마가 보였다. 피그마의 철학이나 유저와의 소통이 맘에 들었고 같이 일하는 팀과의 협업에 굉장히 좋아 보였다. 효율적일 거 같기도 하고 그리고 왜 인지는 모르겠으나 팀기리 디자인 하고 협업해서 소스 파일로 내려 줄 거라는 기대감이 있었다 왜 인지는 모른다. 소스로 html, css, js로 파일을 내려 줄거 같.. 2023. 2. 5.
포토샵 한글판 이미지 여백 채우기, 그레이디언트 도구 , 테두리 그리기 방법 오늘은 어제 이어서 이미지에 남아 있는 양쪽 여백에 이미지를 자동으로 채워 보는 방법과 색깔을 추출해서 자연스럽게 색상을 채우는 그레이디언트 도구 이용해서 이미지를 자연스럽게 만드는 방법, 이미지에 테두리 선을 그어서 사진을 꾸미는 방법까지~ 적어볼게요. 이미지 여백 채우기 먼저 합성된 사진까지 준비가 된 상황에서 옆에 레이어 (Layers) 보면 배경사진과 강아지를 딴 레이어를 합칩니다. 단축키 ctrl +E를 배경레이와 강아지레이어가 합쳐집니다. 배경 레이어를 클릭 후 사각형 선택도구를 이용해서 양쪽에 여백을 드래그를 해서 영역을 정합니다. 왼쪽에 한번 드래그를 하고 Shift를 눌러서 오른쪽도 영역을 선택합니다 그리고 편집(Edit)-Content-Aware fill(콘텐츠 내용 인식 채우기 ) 누.. 2023. 2. 4.
스프링 부트 메테리얼 디자인 적용 라이브러리는 없나? 피그마? 스프링 부트 메테리얼 디자인 지원 라이브러리는 없나? 플러터나 안드로이드에선 간단한 종속성 추가와 설정 변경만으로 테마가 변경되고 위젯들에 스타일이 적용되어 매우 편했다. 그래서 기존의 웹 html을 이용한 웹에 간단하게 테마를 바꾼다던지 스타일을 바꾸는 방법이 없는지 알아보겠습니다. https://devkimchi.tistory.com/78 스프링 부트 머티리얼디자인 적용 시키기 머티리얼 디자인을 적용시키기 위해 홈페이지의 나와 있는 Github의 Repository를 방문하게 되었다. 들어가게 되면 Material Desingn Web Components에 대해 나오는 거 같은데 퀵가이드를 봐도 Node 쪽 관련된 devkimchi.tistory.com 이전에 쓴 글에서 mdc.textField.MD.. 2023. 2. 4.
포토샵 기본 도구사용하는 방법 (오려내기, 합성, 자르기, 보정하기, 브러쉬툴) 안녕하세요~ 오늘은 포토샵에서 사용하는 기본 도구를 이용해서 어떻게 사용할 수 있는지에 대한 방법에 대해서 적어보려 합니다. 처음에 포토샵을 켰을 때 기본 옵션 도구들이 뜨는데요 그중에서도 오늘 사용하게 될 도구들 위주로 설명을 적어볼게요 ~ 위에 적힌 툴 그림들을 가지고 오늘 자르기, 합성하기, 개체 지우기, 사진 화면을 옮기기 등 하는 방법들을 차례로 남겨 볼게요 객체 합성 동영상 포토샵을 켜고 단축키 ctrl+O(열기) 원하는 파일을 가져옵니다. 자석 올가미 툴을 이용해서 강아지 이미지를 뜹니다. 단축키 Ctrl+J( 복사) 합니다. 그러면 예쁘게 올가미 자동 툴로 딴 강아지 그림만 쏙 나오게 됩니다. 강아지 그림을 옮겨서 다른 사진에 파일에 객체를 붙이는 방식의 사진 합치기를 할 수 있어요. 이미.. 2023. 2. 3.

티스토리툴바