본문 바로가기

분류 전체보기

(39)
#45_프레이머 입문<10.21~10.25> 2~3년 전에 프레이머의 존재에 대해서 알고 있었고공부해야지.. 생각만 했었는데 이번 기회로 제대로 공부해봐야겠다 토스에서도 도입한 프레이머!코딩없이 빠르게 화면 구현을 할 수 있는 디자인툴인데단점은 어렵다는거??   총 1시간 40분짜리 영상인데 이번주안으로 듣는걸 목표로 ~1단계부터 10단계 체크를 통해서 최종적으로 도메인 주소 등록하고 연결하는것 까지   클라우드웨이즈로 홈페이지 만들기 15단계 (2024년) - 가이드빈클라우드웨이즈를 이용하여 홈페이지 만들기 방법에 대한 가이드입니다. 도메인 구매, 호스팅 가입 방법 뿐만 아니라 워드프레스 템플릿을 어떻게 변경할 수 있는지도 15단계 가이드로 영상과guidebean.com 이분 강의 무료인데 미쳤다...감사합니다 선생님 ㅠㅠ 24.10.21~25 ..
#35_피그마에서 3d그리기<스킬업 챌린지> 오늘은 플랫한 아이콘을 활용해서입체감 넘치는 3d아이콘으로 만들기! 3d만들때 항상 중요하게 생각해야하는게빛, 어둠, 그림자가 전부 인 것 같다그리고 이제 1px도 아니고 0.25px까지쪼개가면서 디테일하게 잡아주고 있다   Inner shadow와 Drop shadowGradiant로 만들었다 [입체감 만들기 3단계] 1. 배경 그라디언트깔기빛과 어둠을 설정해서 은은하게 그라디언트를 깔아준다 2. 이너쉐도우 깔기- 빛 : 화이트 40%, x:2 y:2 blur 6-강한 빛  화이트 100% x:.5 y:.5 blur 1.5- 어둠 : 컬러값 x:-2 y:-2 blur:6- 두께감 : 컬러값 x:-1 y:-1 blur:1.5 빛2개와 어둠2개로 이너쉐도우를 깔아준다 중요한건 빛과 어둠의 설정을명확하게 해..
#34_플러그인 모음집 1탄<스킬업 챌린지> 알면 알수록 업무 효율이 올라가는내가 쓰려고 만드는 플러그인 모음집 1탄    1. Lottiefiles 움직이는 아이콘이 필요할때 사용하기 좋은 플러그인컬러변경도 가능하다   원하는 애니메이션 선택해서gif나 svg로 export가능  이런 애니메이션은 크게 유행안타고사용할 수 있을듯!     2. ARC곡선의 텍스트를 만들 때 유용함 Bend 강도 조절가능함  Apply하면 이런식으로 겹쳐서 나오는데왜이러는지 모르실게여^^ 글자가 너무 길었나삭제하고 사용하면 됨 ~~   3. Typefacenimatorhttps://www.typefaceanimator.com/ 텍스트를 입력하면 텍스트를 모션으로 만들어주는신기한 사이트!!피그마 플러그인은 아니지만 신기해서 가져와봤다 저장하는건 유료여서 일단 눈여겨보..
#33_아이콘 애니메이션<스킬업 챌린지> 오늘은 홈페이지에 들어갈간단한 아이콘 애니메이션에 대해서 찾아보다가신기한 플러그인을 찾았다  1. SVG montion   이런식으로 속도를 조절할 수 있다  컬러도 여러개 설정해서변하게 할 수 있는데 무료버전은 그런거 모태.    이렇게 라인아이콘으로 gif아이콘을 만들 수 있다 더 신기한 기능이 많은데프로버전 결제 해야해서 빠른 포기 저번에 해본 Phase로 해봤는데이런 느낌 말구요..ㅠㅠ 통통 튀는 느낌으로 하고 싶은데...  이정도?? 더 붙잡고 있고 싶은데 오늘은 시간 관계상 여기까쥐 ~~  애니메이션 찾아보다가갑자기 흥미로운 아티클 발견해서 딴길로 새버리기  https://brunch.co.kr/@grit-han/27 카카오T가 커뮤니티 '지금여기'를 만들게 된 사정카카오T '지금여기' 해부쇼..
#32_홈페이지 진짜진짜최최종.jpg<스킬업 챌린지> 홈페이지 공유하고 나서 이런 피드백을 들어서 수정해보았뜸니다(챗지피티 돌렸나 흠흠 ㅋㅋ) 1. 간결한 회사 소개 및 미션 회사의 비전과 미션, 그리고 핵심 가치를 짧고 간결하게 소개합니다.고객이 여러분의 회사가 어떤 목표를 가지고 있는지 이해할 수 있어야 합니다.2. 포트폴리오 및 고객 후기 실제 고객들의 성공 사례나 후기를 제공하세요.구체적인 성과 지표(예: 다운로드 수, 매출 증가율 등)를 포함하면 신뢰를 더욱 높일 수 있습니다.3. 서비스 제공 범위 제공하는 서비스 목록(예: 모바일 앱 개발, 웹사이트 개발, UI/UX 디자인, 유지보수 등)을 명확하게 설명하세요.각 서비스가 고객의 비즈니스에 어떤 가치를 더해줄 수 있는지도 설명하면 좋습니다.4. 블로그/뉴스 섹션 최신 기술 동향, 개발 팁, 성공..
#31_카드 회전 프로토타입<스킬업 챌린지> 오늘은 토스스타일 카드 회전 프로토타입을 만들었당 ~!오랜만에 챌린지 하니까 재밌...다 너무나도 간단한 만드는 과정!!   먼저 앞면 카드 프레임을 만들고복사 붙여넣기 한 후,shift+H(가로 뒤집기)를 해서그 위에 뒷면 디자인을 넣어준다 그리고 프로토타입을 서로 연결해 준 뒤실행하면 ~~   요로코롬앞면 뒷면을 보여줄 때 응용하기 좋은카드 프로토타입이 완성됩니다 너무 간단해서 빨리 끝나는 바람에하나 더 응용해서 만들어 보았습니당  돔돔이 운세를 확인해보세요 간단한데 직관적인 모션 너무 좋구요이것저것 응용하기 좋을 것 같다!! 많이 쓰는 단축키 한번 싹~정리하고 싶은데요언젠가 한번.. 정리해보자 ~~ 열심히 하고 뭔가 계속 하고 있는데실력이 계속 제자리 걸음인거 같아용 속상해용,, ㅠㅠ하루에 작업량을..
#30_모션 그래픽툴 Phase<스킬업 챌린지> 오늘은 새로운 모션 그래픽툴을 이용해서간단한 애니메이션을 만들었다 직관적인 UI 덕분에 어렵지 않게 제작할 수 있다 요즘 시대에 애니메이션은 선택이 아닌 필수!! * 애니메이션을 넣는 이유: 주목도랑 몰입도, 고객 참여도를 높이기 위해   1. Insert SVG클릭해서완성된 모습의 SVG를 불러온다   2. 개체를 클릭하고 하단의 Animate mode 활성화하면프레임을 조절할 수 있는 타임라인이 생성됨  3. 개체를 클릭하면 오른쪽에 프로퍼티 패널이 활성화됨상단부터 순서대로 - x,y좌표값(위치)- 개체의 크기- 로테이션- 스케일- 오퍼시티- 이펙트  다이아몬드를 클릭하면키프레임이 해당 시간에 생성됨  위치, 로테이션, 스케일이 설정된 모습 오른쪽하단에 Linear 조절하면더 뽀용하게 만들 수 있다 ..
#29_초심으로 돌아가서..<스킬업 챌린지> 오랜만에 돌아온 무작정 따라하기~정신없이 하다보니 한시간 훌쩍 지났네!! 오늘은 큼직큼직한 배너가 들어가는 UI를 만들었다라운드값을 정하는게 항상 어려웠는데크게 두개로 나누면 될 것 같다 예를 들어1. 완전 큰거 48px2. 작은거 24px여튼 8배수로 진행하면 어느정도 어색하지는 않을듯?내가 기준을 정하기 나름인것 같다~! 오늘 느낀 점은 디테일에 너무 집착하지말것.따라하다가도 엥 이렇게 한다고?? 싶어도 완성작을 보면깔끔하고 잘 어우러짐집착한 시간에 한페이지라도 더 만들자 ~~  3d그래픽은 무료로 사용가능한건가??이러거 구하는 방법 알고싶네 ㅠㅠ이쁜 무료 소스 구하는게 젤 귀찮고 젤 힘듬 ㅠ 이건 오늘 낮에 작성한건데 새로운 어플을 기획중!!일 벌이기 장인 ~~ ^^실제로 런칭되면 여기다 신나게 리..