포토샵 노가다 즐기시는 분들 (gif 효과) 정보
포토샵 노가다 즐기시는 분들 (gif 효과)
관련링크
본문
예제는 jpg 10장인데
동일한 패턴으로 이미지주소를 처리하면 이미지숫자는 상관없이 gif 처럼 됩니다.
이미지 클릭시 토글버튼으로 기능합니다.
<img id=girlImage style=width:100%;cursor:pointer;display:block>
<script>
img_1 = "https://blog.kakaocdn.net/dn/byWCWi/btrxgoaaE0s/iCoandRMMG4BBSoKfRJET1/img.jpg";
img_2 = "https://blog.kakaocdn.net/dn/bqCq3R/btrxbOaDRoR/Z9qUK8qphOtu4tUQeOOGT0/img.jpg";
img_3 = "https://blog.kakaocdn.net/dn/C2qHV/btrxbO2KeNb/ibogM4n1owSTkQQfKNrEVK/img.jpg";
img_4 = "https://blog.kakaocdn.net/dn/ckeKFH/btrxc3dLU0G/4SkWGnLbjUenY7zOVJGcEk/img.jpg";
img_5 = "https://blog.kakaocdn.net/dn/cgpJOZ/btrxgnvyG7z/eGijs0LBJpKCCO67uq6Ugk/img.jpg";
img_6 = "https://blog.kakaocdn.net/dn/ckZx7K/btrxc3LC6aM/AJmmkDVCkfKoC0CMN4Q03k/img.jpg";
img_7 = "https://blog.kakaocdn.net/dn/5ggf6/btrxc1NSCHt/x0JKXRJtXsxdSKqJVflzW1/img.jpg";
img_8 = "https://blog.kakaocdn.net/dn/CZ47w/btrxb9yM93c/86C76OjqS6RayVb2ZbIX91/img.jpg";
img_9 = "https://blog.kakaocdn.net/dn/cerMQR/btrxgoH1ZM5/7W0GzRJsBKFZKcMecrFbo0/img.jpg";
img_10 = "https://blog.kakaocdn.net/dn/sRuEq/btrxdO1N3ks/xbVuq3XhSm7PSrDKPmWTwk/img.jpg";
for (imgTotal = 0; this["img_" + (imgTotal + 1)]; imgTotal++);
goMode = onMode = num = 1;
girlImage.src = this["img_" + num];
setInterval(function() {
girlImage.src = onMode ? this["img_" + (goMode ? ++num : --num)] : this["img_" + num];
if (num == 1 || num == imgTotal) goMode = !goMode;
}, 40);
girlImage.onclick = function() {
onMode = !onMode;
}
</script>
셋인터벌의 마지막 숫자 40은 밀리초입니다.
예제처럼 40을 주면 40/1000 초로 1/25 초마다 이미지가 바뀌는 것이죠. 원하는 수치들을 넣어 보세요.
일반 동영상은 1/29.97 또는 1/30인데 계산해서 넣으시길요.
저는 소숫점 나오는게 싫어서 가장 근접한 1/25 로 즉 40으로 주었습니다.
이미지순환은 1-2-3-4-5-6-7-8-9-10-9-8-7-6-5-4-3-2-1 ...... 이런 식입니다.
추천
7
7
댓글 15개
오오~ 추천 꾹 눌러드렸어요! ^-^
GIF는 색상 표현이 8비트에 불과하고
알파 채널이 없어서 진정한 의미의 transparent한 배경처리가 불가능하기 때문에
올려주신 방법을 아주 유용하게 사용할 수 있겠네요!!
그럼 즐거운 주말 되세요오~ :)
GIF는 색상 표현이 8비트에 불과하고
알파 채널이 없어서 진정한 의미의 transparent한 배경처리가 불가능하기 때문에
올려주신 방법을 아주 유용하게 사용할 수 있겠네요!!
그럼 즐거운 주말 되세요오~ :)
@Innisfree 맞습니다. png 이미지로 만들면 투명처리가 유연해집니다.
제일 좋은 건 애펙에서 작업하는 것이죠.
또 동영상 바탕을 블랙으로 만들면 style로 mix-blend-mode:screen 를 사용할 수 있구요.
https://sir.kr/g5_tip/15911
div 에 배경을 깔면 동영상의 검은 바탕이 포토샵처럼 블렌드모드 스크린 처리가 되어서 훨씬 고급스러워집니다.
문제는 좋은 디자인을 만들려면 포토샵이나 에펙이나 노가다가 필수라는 것...ㅜㅠ
한창 때는 참 많이 만들었는데 요즘은 눈이 침침해져서 디자인 작업은 하기가 싫어지더라구요.ㅋ
아래코드를 http://www.mediaplayer.kr/main/bbs/html_editor.php 에서 확인해 보세요.
제일 좋은 건 애펙에서 작업하는 것이죠.
또 동영상 바탕을 블랙으로 만들면 style로 mix-blend-mode:screen 를 사용할 수 있구요.
https://sir.kr/g5_tip/15911
div 에 배경을 깔면 동영상의 검은 바탕이 포토샵처럼 블렌드모드 스크린 처리가 되어서 훨씬 고급스러워집니다.
문제는 좋은 디자인을 만들려면 포토샵이나 에펙이나 노가다가 필수라는 것...ㅜㅠ
한창 때는 참 많이 만들었는데 요즘은 눈이 침침해져서 디자인 작업은 하기가 싫어지더라구요.ㅋ
아래코드를 http://www.mediaplayer.kr/main/bbs/html_editor.php 에서 확인해 보세요.
<div style=width:800px;height:450px>
<video style=width:100%;height:100%;display:block;object-fit:cover src=https://blog.kakaocdn.net/dn/LHuHY/btrxoV6LYbQ/G3OthTcu8fs7KlBOUuc3Sk/tfile.mp4 autoplay loop muted></video>
</div>
<br>
<div style=width:500px;height:500px;background:linear-gradient(45deg,#ff0000,#0000ff)>
<video style=width:100%;height:100%;display:block;object-fit:cover;mix-blend-mode:screen src=https://blog.kakaocdn.net/dn/LHuHY/btrxoV6LYbQ/G3OthTcu8fs7KlBOUuc3Sk/tfile.mp4 autoplay loop muted></video>
</div>
@비타주리 엡 에펙이 정말 막강하죠! ^-^
다만 시스템 사양이 받쳐주지 못하면
큰 파일을 다룰 때 프리뷰 중에 랙이 좀 발생하기는 하지만요 ㅠㅠ
말씀하신대로 좋은 디자인을 위하여는 노가다가 필수인 것 같습니다!
저도 게임은 전혀 안 하지만 영상 편집을 위하여
작년 초에 게이밍 노트북을 구매하면서 메모리를 추가했는데
정작 영상 편집은 별로 안 하고 머신러닝 용도로 돌리고 있네요 -_-;;;
댓글에 올려주신 소스도 잘 구경하고 가네요 :)
그럼 비타주리 님께서도 좋은 주말 되세요~
감사합니다!!
다만 시스템 사양이 받쳐주지 못하면
큰 파일을 다룰 때 프리뷰 중에 랙이 좀 발생하기는 하지만요 ㅠㅠ
말씀하신대로 좋은 디자인을 위하여는 노가다가 필수인 것 같습니다!
저도 게임은 전혀 안 하지만 영상 편집을 위하여
작년 초에 게이밍 노트북을 구매하면서 메모리를 추가했는데
정작 영상 편집은 별로 안 하고 머신러닝 용도로 돌리고 있네요 -_-;;;
댓글에 올려주신 소스도 잘 구경하고 가네요 :)
그럼 비타주리 님께서도 좋은 주말 되세요~
감사합니다!!
@Innisfree 감사합니다.
재미나는 기능이네요. 감사합니다.
@들레아빠 노가다가 필수입니다.ㅜㅠ
이미지순환 순서는 1-2-3-4-5-6-7-8-9-10-9-8-7-6-5-4-3-2-1 이런 식입니다.
이미지순환 순서는 1-2-3-4-5-6-7-8-9-10-9-8-7-6-5-4-3-2-1 이런 식입니다.
능력자분들이 많으시군요 ㅎㅎ
@모차마 감사합니다.
불알을 탁 치고 갑니다~!
@디지털홍익인간
이 정도 팁에 그러시다면 남아날 불x이 없을 것 같습니다.^^ 감사합니다.
이 정도 팁에 그러시다면 남아날 불x이 없을 것 같습니다.^^ 감사합니다.
@비타주리 ㅋㅋㅋㅋㅋ 이미 남아있는게 없습니다...좋은팁 감사합니다. :)
@우지니이 음... 애도합니다. 써먹을 데는 별루 없는데 그래도 없으면 너무 아쉬울 것 같습니다.
오 전 대박이라고 생각합니다. gif 효과 뿐만 아니라 응용할게 많을거 같아용
뽑기 같은데도 써먹기 좋을거 같아용
뽑기 같은데도 써먹기 좋을거 같아용
@멀티트리플 맞아요. 그것도 가능하겠네요
색상과 선명도에도 확연한 차이가 있겠어요!!! 좋은 팁 감사합니다.
