사이트제작 6
[포토샵] 비주얼 만들기
안녕하세요. 플입니다. 오늘은 홈페이지 비주얼을 만들어볼게요. 1. 비주얼 일단 현재 작업 중인 시안이구요. 이 홈페이지에서 비주얼이라고 하면 메인 아래 부분 전체를 말할 수 있을 것 같은데, 오늘은 그중에서도 표시된 롤링배너의 한 컷을 작업해볼 거예요. 2. 틀 만들기 저는 미리 틀을 만들어놨는데 여기는 오늘 포스팅에서는 중요한 부분이 아니니까 짧게 설명하고 갈게요. 좌측 도구바에서 사각형 도구를 이용해 틀을 만들어줬어요. 색상은 어차피 사진을 사용할 것이기 때문에 중요하지 않아요. 다만 배경에 가리지 않게 잘 보이는 색으로 해주세요. 레이어 스타일을 이용해서 테두리를 살짝 줘봤어요. 이 부분은 사진을 넣어도 들어가니까 색상을 잘 골라주세요. 3. 보정 이제 사진을 준비해주세요. 사진이 엄청 고퀄리티면..
[반응형] 빛방울 서브 페이지
안녕하세요. 플입니다. 빛방울 서브 페이지를 만들었어요~ 1. 서브 페이지 빛방울의 서브페이지를 만들었어요~ 서브는 안 만들려고 했는데 어찌어찌하다 보니 만들게 되었네요. 서브페이지는 인스타그램 페이지를 만들어봤어요. 인스타 연동은 여러 방면으로 해봤는데 인스타그램에서 지원을 그만둬가지고 그만... 연동은 아니고 인스타에 올려둔 그림 중 마음에 드는 그림들을 모아서 갤러리처럼 만들어두었어요. 앞으로 점점 늘어날 예정이랍니다. 메인 페이지도 조금씩 조금씩 수정해가고 있어요..;; 원래 유지보수가 더 중요한 것 아니겠어요? :) 2. 사이트 바로가기 https://ssimplay.github.io/shinedrop/sub1.html paint drop ssimplay.github.io 사이트 링크를 남겨둘게..
[영상] 랜딩페이지 시안
안녕하세요. 플입니다. 오늘은 랜딩페이지 시안 영상을 가져왔어요. 1. 랜딩페이지 시안 랜딩페이지 시안 작업을 영상으로 담아봤습니다. 시안은 전에 올렸던 시안이에요. 아래에 링크 남겨둘게요. https://ssimplay.tistory.com/228 [시안] 랜딩페이지 [물감툰] 안녕하세요. 플입니다. 오늘의 시안은 물감툰 랜딩페이지예요 1. 물감툰 이번 작업은 랜딩페이지로 원페이지 작업을 해서 시안도 길게 만들어봤어요. 각 메뉴당 아래로 내려가는 형식이에요. 사이트는 연한 노란.. ssimplay.tistory.com 2. 영상 https://youtu.be/7Cs7KleHvJI 이번엔 자막으로 설명을 넣는 대신 속도를 빠르게 해서 과정을 쭉 볼 수 있는 영상을 만들어봤어요. 어떤 쪽이 더 좋으신가요?..
[시안] 랜딩페이지 [물감툰]
안녕하세요. 플입니다. 오늘의 시안은 물감툰 랜딩페이지예요 1. 물감툰 이번 작업은 랜딩페이지로 원페이지 작업을 해서 시안도 길게 만들어봤어요. 각 메뉴당 아래로 내려가는 형식이에요. 사이트는 연한 노란색을 포인트 컬러로 작업했어요. 캐릭터가 잘 보여야 하는 사이트라 연한 색을 골랐어요. 목업은 사이트가 연한 색이니까 진한 배경을 사용해 사이트가 잘 보이게 만들어봤어요. 요즘 디자인하면서 고려하는 건 잘 보이는 것이에요. 뭔가 이렇게 뽝! 하고 잘 보였으면 좋겠다! 하는 느낌으로 작업하고 있습니다(뭐야 그게) 물감툰이라는 이름을 변경할지 말지 고민하고 있어요. 바뀌면 올라올 사이트에서 이름이 바뀔 거 같네요. 랜딩페이지 작업 문의는 메일로 부탁드려요~ ssimplay@naver.com 더 많은 포트폴리오..
[new pen] 온라인 코딩
안녕하세요. 플입니다. 온라인에서 코딩할 수 있는 사이트를 알려드릴게요. 1. new pen 바로 new pen 사이트입니다. 구글에 new pen이라고 검색하면 바로 사이트에 접속할 수 있어요. https://codepen.io/NikitaDX/pen/RKLXgG New Pen ... codepen.io 들어가기 편하게 링크를 남겨둘게요. 2. 시작하기 처음 들어오면 화면이 3단으로 분리되어 html css js 세 가지를 코딩할 수 있어요. 지금은 기본으로 쓰여있는 코드예요. 모두 깔끔하게 지우고 사용하면 됩니다. 온라인으로 코딩해도 어렵지 않죠? 3. 코딩하기 코딩은 그냥 원하는 코딩을 하면 된답니다. 예시로 조금만 적어봤어요. 저장을 안 해도 알아서 반영해줍니다. 똑똑한 친구야. 아래 미리 보기 ..