【Dreamweaver】スニペットが一時期流行ったポストペットの新しいサービスか何かと勘違いするくらいわかっていない人向けのスニペット解説
「そんなやついるわけねえだろ?!?!」と思ったあなた、
今まさに目の前にそんなこと考えた人間がいますので目を疑わないでください。
Webデザイン系の記事を読んでいて出会った言葉なんですけど
「あれかな?CSSアニメーションとかPHPとか駆使してメッセージ送るイマドキなポストペット????」
とかちんぷんかんぷんが足生えて歩いているようなこと出会った当初考えてた自分を
我ながらぶん殴りたいくらいです。今まさに。
スニペット=ソースコードのあんちょこメモ!
さてさて本題。
コーディングを行っているときって、結構自分がよく使うお決まりの定型文だったり、よく使うライブラリだったりをまた使いたいときに
「あれ…前ってどう書いたっけ…」と前に書いたソースを探しては時間を浪費し、やっと見つかったときには結構な時間かかってたアアアアってこと、あるんじゃないかと思います。
(実際SEやってると死ぬほどあります(白目))
そんなときにあらかじめよく使うコードや定型文を保存しておいて、いざというときにすぐに取り出せるようにする、それがスニペットなのです。
(仕事でソースいじってるくせに知らなかったとは何事かと思うでしょうけどそれくらいでもSEやってますほんますいません)
Dreamweaverでスニペットを登録してみる
言葉ばかりの説明ではわかりにくいのでとにかく実践あるのみ。
というわけで普段よくお世話になっているDreamweaverCS6でスニペットを登録してみました。
①「ウィンドウ」>「スニペット」(ショートカット:Shift+F9)を選択
デフォルト設定のままのワークスペースであれば左下の方にスニペットウィンドウが表示されます。
※これを選択する際、あらかじめスニペット一覧のどの階層に設定しておきたいか選んでおくと楽です
③「スニペット」ダイアログが開いたら、登録したいスニペットの情報を記入
④「OK」をクリックすると、設定したスニペットが登録されます
ね、簡単でしょ( ͡° ͜ʖ ͡°)
あとは必要な時にスニペットを呼び出せば良いので
CSSなどで長〜い定型文(clearfix用のCSSなどを私は登録してます)などをいちいち打ち込む手間が省けます。
Dreamweaverで登録したスニペットにショートカットを割り当てる
せっかく登録したスニペット。
でもいちいちクリックでウィンドウカチカチして呼び出すよりも
ショートカットに覚え込ませてサクッと取り出すのが一番の作業短縮ですよね。
というわけで、さっき登録したスニペットをショートカットキーに割り当てます。
①編集>キーボードショートカットを選択する
②キーボードショートカットダイアログを開いたら、コマンドから「スニペット」を選択し、ショートカットを割り当てたいスニペットを選択、+ボタンをクリックする
※注意!
上の状態でスニペットにキーを割り当てようとすると以下のようなダイアログが現れます。
これは何かと言うと、現在のアセットが「Dreamweaver Default」を選択して変えようとしていることに対する警告です。
「Dreamweaver Default」のアセットは変更することができないので、キーボードショートカットを割り当てる際は自分のオリジナルアセットとして割り当てる必要があるのです。
こんな時は焦らずに、上記ダイアログのOKを押してオリジナルアセットの名前を決定し、新しいアセットとして登録してしまいましょう。
そうすると、もともと選択していた「Dreamweaver Default」をベースとして新しいアセットが保存されます。この状態で+ボタンをクリックしましょう。
④割り当てたいキーを入力する
例えばCtrl +/ に登録したい場合は、カーソルがフォーカス当たってるのを確認してCtrlと/を同時押しすれば良いです。読み取ってくれます。
内容に問題がなければOKを押して、登録完了です。
うん、eclipseでJavaいじってる時と感覚が同じになった。やったね。
そんな感じで、スニペットはゴリゴリコードを書くにつれて不可欠となってくるので
「これを何回も書くのはどう考えても時間の無駄無駄無駄アアア」と思ったものはポイポイ登録して
「これを何回もスニペットから呼び出すのはどう考えても体力の無駄無駄無駄アアア」と思ったものはショートカットも一緒にしちゃえば良いのです。
CSSやJavascriptとか書く時に重宝しそうですね。
[今回お世話になったサイト]
参考にさせてもらいました。ありがとうございます!
【自分用メモ】Photoshopの「知らなかったこんな技!」をまとめるための記事【随時更新】
昨年末から本腰入れてWebデザインの勉強を始めて分かったことは
「私Photoshop使いこなせてないわ(泣)」の一言に尽きました。
そんなわけで、この記事は私が「知らなかった!」と思ったPhotoshopの技について備忘録的に残していくために置いておきます。
なので知らないことがまた出てきたらこの記事更新します。
切り抜きツール / 指定した縦横のサイズで画像を切り抜く
実を言うと切抜きツールの存在自体知らなかったんですが(オイ)
ハンドルを動かしてメモリ見ながら欲しいサイズを取ってくる、と言う風に最初はやっていたんですが
優秀なPhotoshopなんだから値を指定してとってくることができるはず!と思って調べてみたらやっぱりできました。
切抜きツール(ショートカットキー:C)を選択すると、数値を入力できる二つのボックスが現れます。例えばここに「500px × 200px」指定で切り取りをやってみます。
数値を入力した段階でプレビューが表示されるので、問題なければそのままEnterキーで確定します。簡単でしたね。
ちなみに、上記の画像では単位も一緒に入れて指定しましたが、
これが単位指定無しで行うと、比率で切り取ると認識してくれます。
※補足:切り抜くときに選択外の領域を残したいとき
上記の手順では、この切抜き操作を行うと領域外の箇所はばっすりなくなってしまう操作です。
そうではなく、領域外は残したまま指定の切り取りを行いたい場合は単純に
「切り抜いたピクセルを削除」のチェックを外してやればよいのです。
この状態で切り取りを行った後、移動ツールで画像を動かしてみると
ちゃんと領域外の画像も残っていることが確認できます。
【Photoshop】画像補正で使うであろう機能をまとめてみた
どうもです。
最近買ったNothing's Curved In StoneのアルバムExistenceがすばらしく名盤すぎて生きるのが辛いです。
今日は画像補正する際に使われるであろう機能の二つ「色調補正レイヤー」と「画像修復系ツール」について学んだので
記憶が冷めやらないうちにまとめようと思います。
画像補正、ちょうどバナー作りの時にフリー素材をうまいこと加工するのに苦しんだので、ちゃんと覚えておこうと思います…
色調補正レイヤー
Photoshopの色調補正レイヤーは動かせばわかるんですけどありがたいくらい色々昨日あります。
ありすぎて「どいつをつかえばええんや!!!!(怒)」とさじを文投げたくなるくらいです(褒めてる)
ここでは三つ、よく使う&結構使えるレイヤーをご紹介。
明るさ・コントラスト
一番お手軽な補正レイヤーはコイツじゃないでしょうか。
明るさは読んでのとおり明暗の調整です。
コントラストは暗いところは暗く、明るいところは明るくする度合いを調整します。簡単に言うとどれだけ明暗はっきりさせるかの度合いの調整です。
明るさを上げると全体的に明るくしてくれるのはいいんですが、輪郭がぼやけて逆に見えにくくなるので、明るさを上げたときはコントラストも一緒に調整すると綺麗にできます。
レベル補正
指定したモードのハイライト、シャドウ、中間色のレベルを調整します。
説明するより画像で見たもらったほうが早いので実際に動かした物を上げていきます。
白矢印(ハイライト)を左にぐーーっと寄せますと、その分画像全体が明るくなります。またこうすることでグラフ下にある三つの数値のうち一番右側の値が減少します。
つまり一番右にあるのがハイライトの度合いで、一番右にあるときは初期値255なのですが、左に矢印を持ってきてやるとハイライトの上限値が低くなるので、他の矢印をいじらない限りはすぐに明るくなる、という理屈です。
こうすることで一気に画像がふぁんしぃになります。アラ素敵。
逆に一番左にあるのがシャドウの度合いなので、今度はコイツを右にぐーーっと持ってきてやると、グラフ下の一番左の値が上昇し、シャドウの下限値が高まるので、他の値をいじらない限りはすぐに暗くなりやすくなる、ということです。
こうすることで一気に画像がゴシックダークになります。アラ素敵。
中間色はハイライトとシャドウの比率の調整です。真ん中にあるときは半分ずつ、ですが、真ん中のグレーの矢印を右に動かせばシャドウの比率が高まるため全体的に暗さ成分が増え、左にやるとハイライトの比率が高まるので全体的に明るさ成分が増える、と言うわけです。
モードはRGB、レッド、ブルー、グリーンとあり、単色ずつのモードで選ぶとその選んだモードの色味成分を調整することができます。画像はレッドを選んだ場合ですが、白矢印をいじると赤みの強さを調整でき、黒矢印をいじると赤みの反対色である緑みを調整できます。
トーンカーブ
レベル補正と似てますがこっちの方がより詳細に調整できます。
これも動かしてみたほうが早いので画像あげていきます。
トーンカーブの初期値は直線グラフなのですが、こいつが下の方にカーブすると指定したモードの色合いを低くし、上によるとしてい下モードの色合いを高くします。
RGBの場合だと明るさの調整と同じなので、下に行くと暗く、上に行くと明るくなります。
このトーンカーブ、戦場をクリックすることでカーブの制御点を増やすことができ、より複雑なカーブを描くことが可能です。そうすることで独特の色合いを表現することができます。
(制御点複数の場合はどう扱うとどうなるか、というのは私も実はまだ探り探りの状態なので、こいつは自分で探って最適な色合いを出すのを探してもらうのが早いです…説明頼りなくてスイマセン…)
画像修復系ツール
いざWebページに使うにはちょっと…とためらうようなものが写っていたり、
これさえなければ最高の眺めなのに!という画像、あるあるですよね。
大丈夫、Photoshopさん優秀だから。
というわけで用意した画像が余計なモン入ってて素材として使えねえ!を余計なもののないまさに理想の画像!に変えるためのツールを紹介します。
コピースタンプツール
名前の通り、選択した領域をコピーしてそれをスタンプみたくペタペタやるのがこのツールです。
画像で消したいものの近辺の色やものをとって消してなじませていくのが基本的なやり方です。
実際にやっていきます。
綺麗な青空に包まれた街並みで良いな〜と思って撮った写真ですが、
電線のせいで青空の綺麗さが邪魔されてるな、と思ったのでこの電線をコピースタンプツールで消していきます。
白抜き丸あたりをコピーして電線を塗りつぶしていきたいと思います。
白抜き丸のところにカーソルを持っていき、Altキーを押しながらクリックすると、カーソル周辺の領域がコピーされるので
コピーされたらあとは図の塗りつぶし丸のようにカーソルでドラックしたりクリック連打したりしながら対象を消していきます。
一通り消した画像がこれ。
うーん、クオリティあげないとな(反省)
周囲にうまくなじませながら消していくのがポイントなので
一回Altキーで領域コピーして終わり、ではなく、ちょこちょこ領域選択コピーして塗っていくとなじんでいきます。
スポット修正ツール
こちらはコピースタンプツールとは違い、領域コピーする必要がないです。
塗った領域の周囲の色合いやテクスチャや形を自動的に判断して、周囲になじむように修正をかけていってくれるのです。
こちらも実際に見てみます。
木のうろから咲く彼岸花。とても情緒がありますが、1本だけ束となっている花たから別れちゃってバランスが悪くみえてしまいます。こいつをスポット修正ツールで消していきます。
コピースタンプとは違い、どんどん領域を塗っていきます。
周囲の領域を判別してなじませていくので、一気にがーっと塗りつぶしていくよりも、
がっ、がっ、がっと少しずつ塗っていく方が良いです。
また塗る方向によっても判別する領域が変わるので、頃合いを見ながら縦横塗っていくと良いです。
一本消してできたのがこちら。
今回はスポット修正だけではなく、なじませツール(スポット修正と同じタブの中にあります)で最終的な調整をして仕上げました。
個人的にはスポット修正の方が綺麗に消せますね。
というわけで画像補正に役立ちそうな機能をちょこっとまとめて見ました。
Webデザイナーが画像を補正していく機会はザラにあるとのことなので、補正技はもっと腕を磨いていきたいですね。
バナー制作にも役立てていくぞ〜
【LINEスタンプ】全国津々浦々のすべてのSEに捧げるLINEスタンプ 「がんばれ!SEスタンプ」
今日も今日とて炎上中⁈
全国津々浦々のすべてのSEに捧げるLINEスタンプがこの度登場!
修羅場な現場のSE、炎上中な現場のSE、嵐の前の静けさな現場のSE、
もちろんSEでもなんでもない人もぜひぜひインストール!!
現役SEが送るLINEスタンプ
がんばれ!SEスタンプ
http://line.me/S/sticker/1385951
という説明文を上の画像に入れたかったのですがスペース的に無理でしたのでここに書きました。
ということでやっと審査通りました!パチパチパチパチ
去年の11月だったかな?母と話していた時に急に前触れもなく降ってきた
「SEの実態をパロったスタンプあれば面白いんじゃね?!?!」という思いつきを
勢いだけで実現してみました。
(ちなみにその時母と話していた内容はまったくスタンプと関係ないことだったので未だになんで思いついたかはわからないです)
イラストは好きで描いてたからなんとかなるけど
スタンプなんて初めて作るからどうやりゃいいんじゃーと思いながら作りましたが、案外あっさり簡単に作れました!
そして一回審査通りませんでした!(ファイル不備のため)
あんまり需要を考えずに自分の経験値を広げるためそして思いついたらやっちまえな気持ちで作ったのですが
「あ、これいるかも」と思った方がいたらぜひお使いくださいm(_ _)m
※なおこのスタンプは基本的にはフィクションです。
実際の現場は各々のSEの環境に寄りますので
一概にSE現場がこのスタンプのとおりとは限らないことをご承知おきください
【バナー模写1週目】バナーを作って学んだことメモ
先週からちょっくらはじめてみました、バナー模写。
Photoshopレベルアップを目的に、実際にあるバナーを模写してそれっぽい奴を作ってみようという試みです。
今回はこちらの二枚を作成しました。
一眼レフカメラ広告風バナー
□参考元
retrobanner.net
参考元があると言えども、イチから自分で作ったのは初めてなので
やってみて学んだこと、気づいたこと、課題などを備忘録的にまとめとこうと思います。
今回の作成チップス
Photoshopでの集中線の作り方
ググって何個かサイト見てみましたが、どこも基本は「ノイズを加える→ スクロール→極座標」でフィルターかけた後
任意の範囲を選択範囲でぼかし切り取り、ということをしていますね。
これは私が説明するよりもちゃんと説明しているところがいろいろありますので
リンクだけ載せておきます。
Photoshopで漫画のような集中線を描く方法|フォトショップの参考書 [sitebook]
これ作るときに注意点なのは、レイヤーモードが乗算じゃなければうまく機能しないということです。通常レイヤーでやろうとしてコケたアホは私です。
選択範囲指定の方法色々
今回バナーを作りながら一番吸収しようと思ったところです。
デフォルト設定ならツールバーの所にあらかじめ3種類アイコンが出ているはずです。
それぞれの説明は、他の詳しく説明されている参考書籍やブログ等を見てもらうとして、ひとまず私がこれらのツールに対してどう解釈しているかをまとめます。
□定形選択ツール系
これらを使うときは模様から丸く/四角く切り取りをしたい、というケースがメインじゃないかなあと思います。
例えば、上記で紹介した記事でも、集中線を配置させたい対象の周りは円形選択ツールで選択しボカシで領域削除しながら作ってます。ボカシ効果+規定系選択は結構使えます。
□不定形選択ツール系
なげなわ、多角形は他のペイント系ソフトでも見られる選択ツールですが、フォトショ独自とも言えるのはマグネット選択ツール。こいつは後述する自動選択系と並んで便利な選択ツールだと痛感しています。車や電化製品など、形が複雑でないものを選択する際は便利です。
次回のバナーで制作にてこの選択ツールを使って作りたいと思います。
□自動選択ツール系
選択ツールで圧倒的に使用頻度が高いのはクイック選択ツール一択じゃないかなと思います。画像のように二、三度選択したい領域あたりをうねらせるだけでまるっと対象を選択できる上に、選択ツールの大きさも調整できるので(ショートカットキーなら]と[でささっと調整できますしね)細い領域も狙って掴みやすいです。
対して自動選択ツールですが、自動で判断して領域つかんでくれるとはいっても、なるべく色味が近い領域や形が単純なものの方がこちらの意図した通りにとってくれるのではないかと思います。今回あまりいじってないので、もしかすると調整すれば細かな領域でも掴み取ってくれるのかもしれないので、今後要検証です。
▽マスクモードとの合わせ技
私はデジタルで絵を描いているので、存在自体は聞いたことあったのですが、今回まともにフォトショでマスクモードを使った選択範囲指定をやって見ました。ちょこちょこ細かいところを色塗る作業のようで、なんだか楽しいですね。
先に何かしらの選択ツールで(画像ではクイックマスクで選択範囲をとりました)対象を選択したのち、カラー指定の下にあるマスクモード切り替えを押します。
ここでツールをブラシに持ち替えて、細かい範囲を拡張したり縮小したりします。描画色(画像では黒)を選択している時に色を塗ると選択範囲を小さくすることができ、逆に背景色(画像では白)を選択している時に色を塗ると選択範囲を大きくすることができます。
ウェブサイト制作の場合だと、画像から対象のものだけを切り取る、ということを頻繁に行うので、「クイック選択ツール+クイックマスクモードでの領域塗り」の合わせ技が基本スタイルですね。
Photoshopでの文字の扱い:アンチエイリアス
ロゴやフォントを画像で使いたい場合はイラレからもってきてフォトショファイルにコピペするのが一番なんですけど
それ以外の場合だったら普通にフォトショの文字ツールでバナーの中に文字入れると思います。
そんな時、アンチエイリアスの設定は文字の見栄えに結構重要なカギとなってきます。
画像の文字パネルの四角でくくったところがそうなんですが
そもそもアンチエイリアスとは、というと、ラスタ画像の文字や図形などで見られるようなドットっぽさをなめらかな見た目になるように処理を施すCGの表現手法の一つのことです。
特に小さい文字や長い文章ほどアンチエイリアス設定で「鮮明に」を選ばないとドットっぽくなって文字が潰れてしまいます。
※逆にウェブサイトのカンプなどで「ここはコーディング中に普通に文字打つよ」ってところはあえてアンチエイリアス設定かけずに置いておくのもありです。自分ルールやチームでの共有ルールとして保っておけば忘れない。。。
今後への課題
クオリティが高く見える画像の仕上げ方
IT技術系の質問サイトのバナーを作るときにちょっと苦戦したんですよね。
もともと取ってきたフリー素材の写真のライティングが今回のレイアウトからすると方向が違うものだったのと
もともとテーブルの色が黄色だったので全体的に黄色味がかかった感じの写真だったんです。
最終的に、テーブルの色変え、レベル補正かけて、仕上げにグレーで集中線に沿ったグラデ入れた乗算レイヤーで整えたんですが
お手本にした写真のように自然な色合いではなくなったかなーと個人的に反省しています。
バナーにしろウェブイメージにしろ、もとの写真素材のクオリティがよければそれに越したことはないが、
クオリティがソコソコのものだったり、
またクオリティはいいんだけどサイトやバナーの雰囲気に合わせるような色味、階調に変えたい、と言うときに対応できるようになりたいなと思ったのが
今後の課題であります。
(この先ますますデザイナーやらレタッチャーやらウェブ担当やらの境目がなくなってきそうな気がしますので、できることを増やしたいと思う次第です…)
レイヤースタイルをそれぞれ適用させた時の文字の見え方
まだ慣れてないと言うのが一番大きいんですけども、
どのレイヤースタイルを適用したらどんな見え方の効果が期待できるのかということは一度まとめておこうと思いました。
特に2枚目に関しては、参考元と比べて貰えばわかりますが180度雰囲気を逆にしたものを作りました。
元の画像が太陽光の強い屋外で撮影したもののため、うまい加工方法を知らない私は
合わせれば違和感出まくりの黒地ベースで作ることを断念して、素材の良さを活かす方向に舵きりしたのです…
そのときに、「黒地だと明度を高くすれば細い文字は映えたけど、地が水色だと細い文字のままで明度を落とすとなると文字周りに効果が欲しいな」と思った結果
うまーく選んだそれぞれの色味が馴染む効果を探すのに時間かかってしまったのです。
これは今後の記事で検証結果をアップしようと思います。
というわけで、Webの勉強の一環でやってみましたバナー模写。
今回は1枚目が1時間半、2枚目が2時間半もかかってしまったので
時間かかったわからなかったところと慣れてなかったところは、今後潰していけるようにしていこうと思います。
★写真素材お借りしました。ありがとうございました!
www.ashinari.com
後輩を教える、ということ = Lucky♪
人にものを教えることほど身のちぎれる思いをすることはないと、私は少なくとも感じるんです。
今仕事場で、常駐先のお客さんの今年入って来た新人さんの開発を見ているんですが、
ほとんどの場合、どうやったらこちらの意図が伝わるか頭を捻るか、
自分の新人だった頃を思い出して自責の念に駆られるか、
指導しながらオメー人のこと言えるようなちゃんとした仕事ぶりかよとセルフツッコミしてるかのどれかしかないんですよ。
相当、パワーと頭と精神力がいります。
特に、それこそ社会人の卵って、
「どうしてこんなことしてるの?」と根拠を考える力が弱い、というのと
「物事のすべてには正解がある」と思う傾向が強い、という特徴がありますよね。
(私も最初のうちはこんなやつでしたので散々上司に怒られました…今はまだましだと信じたい…)
ここを砕いて自分で考えながら動けるようになってもらうのに、どうしたものかなあと考えながら指示やアドバイスをしています。
今の課題は、「物事のすべてには理由がある」という考えを持ってもらうのと
「物事のすべてに正解があるわけではない」という考えを持ってもらうことを目標に
新人さんの支援をしています。
ただ、このめちゃくちゃいろんなパワーがいる「人にものを教える」という行為ですが
いくつか良い点がありまして。
本質を見抜く力を磨けること、
自己の振り返りにつながること、
自分の物事の理解度を知ることができること、などです。
特に自己の振り返りは大きくて…
というのも、私めちゃくちゃ不器用で大雑把で考えたらずな優秀とは縁遠い人なので
新人が失敗したり変な方向に突っ走っちゃうのを見ていると気持ちがよくわかるんですよ。
だからこそ、ああ私に足りないのはこういうことなのか、これからこういうことに気をつけねば、という理解が
単に自分の頭でうんうん悩み考えるよりも、ストンと腑に落ちるんです。
私はアホなので、経験で学ぶことで物事を理解するタイプなのですが
おかげで後輩の悩みとか問題とかは、他の優秀な人よりかは彼ら彼女らの悩みを受け止められるのが、ちょっとした救いです。
(もちろん元が優秀な後輩は私の助けなんか必要ないのですけどね)
おかげでなぜか昔からよく後輩にすごく懐かれることがあります。
あと、知的好奇心が強い人にとっては
教える、という行為は、とてつもなく頭を使い物事を集中して理解しようと励むので
脳へのよい刺激になっている節もあります。
教える、ということには、いろんな能力が要求されますけど
それに挑んだ分の自分へのメリットは大きいので
そういう立場になったときは、むしろラッキーだと個人的には感じています。
やっとこさできそうです!
どうも、お久しぶりです。
実は去年の暮れから準備はしていたんですけど
ようやっと、アップできる段階までこぎつけられました。
LINEスタンプつくってました!
自分がSEと言う仕事をやっていて見た、聞いた、知ったSEさんの姿を
ちょっとユーモラスに、ちょっとリアル交えつつ、作ってみました。
作っていて、「これってSEに限った話じゃないかもなあ」と思ったりもしたので
世の中の毎日頑張っているいろんな社会人さんに使ってもらえるといいなあと思っています(-ω-)
承認がおりましたら、またこちらで情報をお伝えします!