본문 바로가기

홈페이지제작

(27)
[포토샵] 비주얼 만들기 안녕하세요. 플입니다. 오늘은 홈페이지 비주얼을 만들어볼게요. 1. 비주얼 일단 현재 작업 중인 시안이구요. 이 홈페이지에서 비주얼이라고 하면 메인 아래 부분 전체를 말할 수 있을 것 같은데, 오늘은 그중에서도 표시된 롤링배너의 한 컷을 작업해볼 거예요. 2. 틀 만들기 저는 미리 틀을 만들어놨는데 여기는 오늘 포스팅에서는 중요한 부분이 아니니까 짧게 설명하고 갈게요. 좌측 도구바에서 사각형 도구를 이용해 틀을 만들어줬어요. 색상은 어차피 사진을 사용할 것이기 때문에 중요하지 않아요. 다만 배경에 가리지 않게 잘 보이는 색으로 해주세요. 레이어 스타일을 이용해서 테두리를 살짝 줘봤어요. 이 부분은 사진을 넣어도 들어가니까 색상을 잘 골라주세요. 3. 보정 이제 사진을 준비해주세요. 사진이 엄청 고퀄리티면..
[반응형] 빛방울 서브 페이지 안녕하세요. 플입니다. 빛방울 서브 페이지를 만들었어요~ 1. 서브 페이지 빛방울의 서브페이지를 만들었어요~ 서브는 안 만들려고 했는데 어찌어찌하다 보니 만들게 되었네요. 서브페이지는 인스타그램 페이지를 만들어봤어요. 인스타 연동은 여러 방면으로 해봤는데 인스타그램에서 지원을 그만둬가지고 그만... 연동은 아니고 인스타에 올려둔 그림 중 마음에 드는 그림들을 모아서 갤러리처럼 만들어두었어요. 앞으로 점점 늘어날 예정이랍니다. 메인 페이지도 조금씩 조금씩 수정해가고 있어요..;; 원래 유지보수가 더 중요한 것 아니겠어요? :) 2. 사이트 바로가기 https://ssimplay.github.io/shinedrop/sub1.html paint drop ssimplay.github.io 사이트 링크를 남겨둘게..
[반응형] 물감방울 랜딩페이지 안녕하세요. 플입니다. 물감 방울 랜딩페이지가 완성되었어요. 1. 디자인 제작 중이던 물감 방울의 랜딩페이지 작업이 완료되었어요. 단일 페이지로 긴 세로 형태의 사이트입니다. 메뉴를 누르면 스크롤이 해당 위치로 이동하는 사이트예요. 그림이 잘 보이도록 연한 색을 컬러 포인트로 사용했어요. 배경에 연한 노랑을 주로 사용한 이유예요. 2. 사이트 보러 가기 https://ssimplay.github.io/shinedrop/ shine drop 우당탕탕 좌충우돌 신나는 일상이야기. 톡 떨어진 물감에서 태어난 시트렛은 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가보는 곳 없이 기웃거리며 미끄러�� ssimplay.github.io 클릭하시면 완성된 사이트를 구경하실 수 있어요!..
[시안] 랜딩페이지 [물감툰] 안녕하세요. 플입니다. 오늘의 시안은 물감툰 랜딩페이지예요 1. 물감툰 이번 작업은 랜딩페이지로 원페이지 작업을 해서 시안도 길게 만들어봤어요. 각 메뉴당 아래로 내려가는 형식이에요. 사이트는 연한 노란색을 포인트 컬러로 작업했어요. 캐릭터가 잘 보여야 하는 사이트라 연한 색을 골랐어요. 목업은 사이트가 연한 색이니까 진한 배경을 사용해 사이트가 잘 보이게 만들어봤어요. 요즘 디자인하면서 고려하는 건 잘 보이는 것이에요. 뭔가 이렇게 뽝! 하고 잘 보였으면 좋겠다! 하는 느낌으로 작업하고 있습니다(뭐야 그게) 물감툰이라는 이름을 변경할지 말지 고민하고 있어요. 바뀌면 올라올 사이트에서 이름이 바뀔 거 같네요. 랜딩페이지 작업 문의는 메일로 부탁드려요~ ssimplay@naver.com 더 많은 포트폴리오..
[아임웹] 글 변경하기 안녕하세요. 플입니다. 오늘은 아임웹에서 글을 변경해보겠습니다. 1. 디자인 모드 내사이트 > 관리 버튼을 클릭해 관리 페이지를 열어줍니다. 관리 페이지의 왼쪽 메뉴 중 디자인 모드 메뉴를 클릭해 디자인모드 페이지를 열어줍니다. 2. 글 변경 변경하고 싶은 글에 마우스를 올리면 블록처리가 되면서 파란색 배경이 들어간 모습으로 보입니다. 그 상태로 글을 더블클릭하면 글 내용을 수정할 수 있습니다. 이제 원하는 문구로 글을 수정하면 완성! 그럼 이만. 총총.
[아임웹] 제공 이미지 사용하기 안녕하세요. 플입니다. 오늘은 아임웹에서 제공하는 이미지를 이용해 이미지 변경을 해보겠습니다. 1. 디자인 모드 내사이트 > 관리 를 순서대로 클릭해 관리 페이지를 열어줍니다. 관리 페이지에서 왼쪽 메뉴를 보면 디자인 모드라는 메뉴가 있습니다. 디자인 모드를 선택해 디자인을 변경해봅시다. 2. 이미지 설정 디자인 모드로 넘어왔다면 변경하고 싶은 이미지에서 마우스 오른쪽 클릭을 해줍니다. 오른쪽 클릭을 하면 나오는 메뉴 중 가장 위에 있는 이미지 설정을 선택합니다. 이미지 설정에 들어가면 이미지 미리 보기 화면과 세세한 설정이 가능합니다. 미리보기 화면에 마우스를 올리면 메뉴가 뜨는데 가장 마지막에 무료 이미지라는 메뉴를 선택합니다. 3. 이미지 선택 아임웹에서 제공하는 이미지가 카테고리 별로 정리가 되어..
[아임웹] 로고 변경하기 안녕하세요. 플입니다. 아임웹에서 로고를 변경해보겠습니다. 1. 디자인모드 내사이트 > 관리 메뉴를 클릭해 관리자 페이지로 들어가 줍니다. 왼쪽 메뉴를 보시면 디자인모드라는 메뉴가 있는데 클릭해서 디자인모드를 열어줍니다. 2. 상단설정 로고는 위에 표시된 부분을 변경할 것입니다. 우측 상단에 상단설정 메뉴를 클릭해주세요. (너무나 우리를 쳐다보는 시선이 느껴지지만 무시합니다.) 3. 로고 설정 상단 설정 페이지에 들어오면 로고를 변경할 수 있습니다. 로고에 마우스를 올리고 오른쪽 클릭을 하면 메뉴를 확인할 수 있습니다. 메뉴 중 로고 설정을 클릭해주세요. 간단하게 이름만 바꾸고 싶다면 표시된 부분, 타이틀명에서 이름을 변경해줍니다. 코딩을 몰라도 디자인을 간편하게 변경할 수 있습니다. 원하는 폰트를 골라..
[아임웹] 여백 추가하기 안녕하세요. 플입니다. 아임웹에서 여백을 추가해보겠습니다. 1. 디자인 모드 내사이트 > 관리 버튼을 클릭해 관리 페이지로 넘어갑니다. 관리 페이지 왼쪽 메뉴를 보면 디자인 모드 메뉴가 있습니다. 디자인 모드를 클릭합니다. 2. 추가 하기 여백을 넣고 싶은 곳의 경계에서 마우스를 움직이다 보면 +모양의 버튼이 나타납니다. +모양 버튼을 클릭해주세요. 여러 가지를 추가할 수 있는데 그중 여백을 선택합니다. 3. 여백 설정 여백이 만들어지면 여백에서 오른쪽 클릭을 해 여백 설정을 할 수 있습니다. 여백 설정 메뉴를 클릭합니다. 설정창이 뜨면 원하는 높이를 설정해줍니다. 저는 50px정도를 설정했습니다. 설정 창을 닫고 나오면 여백 설정이 완료된 것을 확인할 수 있습니다. 그럼 이만. 총총.
[아임웹] 사이트 이름 바꾸기 안녕하세요. 플입니다. 오늘은 아임웹에서 만든 사이트의 이름을 변경해보겠습니다. 1. 관리 아임웹에 로그인 후에 오른쪽 상단 내사이트 버튼을 클릭합니다. 관리하고 있는 사이트 목록이 쭉 나오는데 그중 수정이 필요한 사이트의 관리 버튼을 선택합니다. 2. 기본 설정 관리 페이지로 넘어오면 왼쪽에 있는 메뉴에서 환경설정 > 기본 설정 메뉴를 선택합니다. 기본 설정 페이지 맨 상단에 사이트 이름을 원하는 이름으로 변경하면 됩니다. 원하는 이름을 적었다면 우측 상단의 저장 버튼을 누르면 완료입니다. 간편하게 이름을 변경해봤습니다. 그럼 이만. 총총.
[아임웹] 이미지 바꾸기 안녕하세요. 플입니다. 아임웹에서 이미지를 변경해보겠습니다. 1. 관리 (잘 안 보여서 왼쪽을 일부 잘랐습니다.) 오른쪽 상단에서 내 사이트 메뉴를 클릭하면 내 사이트 목록이 뜨고 관리가 가능합니다. 수정할 사이트의 관리 버튼을 누릅니다. 디자인 수정은 왼쪽 메뉴에서 디자인 모드를 선택합니다. 디자인 모드에서 수정이 가능합니다. 2. 이미지 변경 디자인 모드에서는 각자 골랐던 템플릿이 설정되어 있을 겁니다. 변경하고 싶은 이미지에서 오른쪽 클릭을 한 뒤 설정에 들어갑니다. 수정하려는 부분이 비주얼이라 비주얼 설정이라고 적혀있는데 다른 이미지는 이미지 설정이라고 적혀있습니다. 설정 창이 뜨면 이미지 업로드 버튼을 선택합니다. 폴더에서 원하는 이미지를 선택하면 이미지가 뙇! 변경됩니다. 이미지의 위치도 간략..