DALLE 3 활용해서 티스토리 꾸미기

개요

티스토리를 꾸미고 싶었다.

오늘 gpt4를 결제했다.

DALLE 3가 너무 재밌었다.

그래서 꾸미기 시작했다.

 

DALLE 3로 블로그 프로필 사진 만들기

GPT한테 이미지를 만들어달라고 할 거다.

 

나는 개발자 블로그를 운영하고 있는데 블로그 프로필 사진에 들어갈 캐릭터를 만들고 싶어
컴퓨터로 개발을 하고 있는 귀여운 남자 캐릭터를 카툰 그림체로 만들어줘

마음에 안든다..

 

더 귀여운 그림체였으면 좋겠어

이게 마음에 드니 다운로드 해준다!

 

Favicon 만들기 전 누끼 따기

Remove Background and Create Product Pictures | PhotoRoom

 

나는 포토룸 유료 회원이여서 포토룸을 이용했다.

 

자동으로 누끼를 따준다

포토룸에 사진을 넣으면 이렇게 자동으로 누끼를 따준다. 이 사진은 나중에 쓸 것이니 저장

 

오른쪽 상단에 다운로드 하면된다.

 

이제 Favicon에 들어갈 캐릭터의 머리를 누끼 따주면 된다.

 

Edit Cutout 클릭

Erase가 Default로 골라져 있다.

 

이렇게 지우고 싶은 부위를 대충 슥 그려주면 해당 부분과 비슷한 요소들을 제외 시켜준다.

근데 필요한 부분은 살려야 한다!

 

필요한 부분은 Restore로 살릴 수 있다.

 

스윽스윽 해주면 이렇게 필요한 부분만 누끼를 딸 수 있다. 크기를 최대로 키우고 다운로드!

 

 

Favicon 만들기

Favicon & App Icon Generator

 

이 사이트는 파비콘을 각 사이즈별로 만들어주는 사이트인데 매우 애용하고 있다.

 

파일 선택을 누르고 아까 누끼딴 캐릭터의 머리를 넣어준다.

 

Create Favicon을 누르면 각 사이즈 별로 만들어준다.

 

Download the.. 저 부분을 누르면 .zip 파일로 파비콘을 다운로드 받을 수 있다.

 

 

프로필 사진 제작

아까 누끼따고 저장한 사진

이 사진으로 프로필 사진을 만들 것이다.

 

워크스페이스 - 미리캔버스

 

나는 이미지 편집툴로 미리캔버스를 사용했다.

 

1024x1024 로 디자인 생성

 

누끼 딴 이미지를 넣고 사이즈를 최대로 키워준다.

 

왼쪽 메뉴에서 요소 - 도형 - 기본 도형에 동그라미 찾아서 클릭

 

 

이것도 최대치로 늘려준다. (상하좌우 딱 붙어있는 상태)

 

이렇게

레이어에서 순서를 조정해준다.

 

 

순서 조정 후 캐릭터 이미지의 크기를 도형 크기에 맞게 줄여준다. 근데 도형 배경색이 맘에 안듦

 

도형 클릭 - 속성 - 색상 - 원하는 색 조정

 

 

오 ! 좀 이뻐졌다. 근데 뭔가 좀 부족하다! 그라데이션을 넣으면 이뻐질 거 같다.

 

 

도형 클릭 - 속성 - 색상 - 그라데이션 - 사용 중인 색상 클릭 후 그라데이션 조절

 

 

조금 허전하다.. 블로그 이름 넣으면 좋을 듯

 

 

우측 메뉴 - 텍스트 - 제목 텍스트 추가

 

 

나는 위와 같이 완성했다! 글씨에 곡선 주고 폰트랑 색만 바꿔줬다.

 

 

우측 상단에서 저장해준다.

 

티스토리 적용

블로그 관리 - 관리 - 블로그

 

프로필 이미지를 넣고 블로그 설명 등을 자기 입맛대로 꾸며준다

 

 

아이콘은 32x32 사이즈 favicon 선택

파비콘은 ico 형식으로 저장된 favicon 선택

 

 

그리고 변경사항 저장을 눌러주면 된다.

 

블로그 스킨 적용하기

hELLO 티스토리 스킨을 소개합니다.

 

나는 개인적으로 정상우 개발자님이 만드신 스킨이 마음에 들어서 스킨을 쓰고 있다.

 

적용 방법은 찾아보면 금방 나오니, 이건 직접 찾아보면 되겠다.

 

 

hELLO 스킨 인디케이터 배경색 바꾸기

무지개가 이쁘더라

 

 

<div class="fixed top-0 w-screen z-50" x-data="indicator" @scroll.window="indicate">
      <div class="w-screen">
        <div class="w-0 h-0.5 bg-h-900 rounded bg-h-800 dark:bg-h-200" x-ref="indicator" style="width: 0%;"></div>
      </div>
    </div>

 

이걸 GPT한테 배경색을 원하는 색으로 바꿔 달라고 하고 코드를 복사한다.

 

블로그 관리 - 꾸미기 - 스킨 편집

오른쪽 메뉴 html 편집

control+f 누르고 해당 부분 찾은 후 변경사항 생긴 부분에 복사 붙여넣기

적용

무지개!

 

완성!

완성이다!

 

 

생각보다 간단한 티스토리 블로그 꾸미기다.

 

다들 이쁜 블로그 꾸며보길 바란다.