Photoshopで網点?みたいな加工をする

こんばんはっ。

ハロウィンまであと数日ですね?
使えそうな素材を探していたら、あくび印さんの方で期間限定のものが配布されていました。
かわいらしいカボチャやお化けが素敵ですっ。

ダウンロードできるフォントは全てフリーフォントではないので、商用利用時には注意です。
とはいえ使い勝手のいいフォントが多数なので、仕事で使う時はお金払ってでも使ってみたいフォントです。
気になる方は是非あくび印さんのサイトでご確認をば。



さて、Photoshopで網点みたいな加工です。
網点というか、徐々に大きくなる水玉というか・・・
こういうのです。


0910281.jpg

初めは一個ずつ円を作ってやってみようとしたんですけど、バランスをとるのが難しくて何かいい方法がないものかと探してみると、ありました。


B-bow-log 網点 @Photoshop


網点でいいのかとびくびくしながらGoogleで検索していたのですが、ひっかかってくれてよかった(涙
意外に簡単でした。


@クイックマスクモードにする。
  ↓
@K100の黒のブラシツールで、残したい部分を丸く塗りつぶす。
  ↓
@自動選択ツールで、塗りつぶした丸をクリックして選択。
  ↓
@選択範囲 >境界をぼかす
(画像サイズにもよりますが、丸の大きさが500~600pxくらいの画像なら「50px」くらいとか)
  ↓
@選択範囲 >選択範囲を反転
  ↓
@Deleteキーで消して、円周をぼかす
  ↓
@フィルタ > ピクセレート > カラーハーフトーン
(基本的にデフォルト設定。自分の好みになるように、最大半径のサイズを調整、「30px」くらいとか)
  ↓
@クイックマスクモードを解除する
  ↓
@Deleteキーで周りを削除 or 必要な部分だけ切り抜いて終わり。


慣れれば簡単ですねーっ。
これで表現の選択肢がひろがりそうです、こんなのもありだと思うです。

0910282.jpg


・・・あまり私の名前のイメージには合わないようです。

OpenPNEをさくらインターネットに導入する

こんばんはっ。
もうすぐハロウィンですね、私の家はちょっとしたパーティをします。
まだほとんど準備できていないんですけどね?
布団が恋しい季節になってきたので、休みはごろごろしてました。



本題ですが、OpenPNEをさくらインターネットに導入しましたよ。
さくらインターネットの大きな利点は、安さですよね。
それゆえ、多くのユーザーが利用しています。

っということは、多くのノウハウがネット上にあるということでもあって、「OpenPNE さくら インストール」で検索すると沢山の情報が出てきます。

たとえば、OpenPNE/さくらインターネットでインストール – Happy Engineer Lifeを参考に導入します。

開発版の3シリーズも出ているのですが、安定版の2シリーズの現在最新である2.14.2を落とします。
特に深い意味はないですが、zip版をダウンロード。

ここで落としたファイルは解凍せずに、適当なディレクトリ、仮にtempディレクトリにアップロードします。
ファイル数が多いので、解凍してアップロードすると時間がかかりすぎます。
(※Linuxの操作などがまったくわからない人には難しいので、その場合は解凍してアップロードしてください)

SSH(Telnet)でアクセスして、サーバー側で圧縮ファイルを展開。

cd temp
unzip OpenPNE-2.14.2.zip
後は参考サイトのままです。
私はサブドメインちっくにしたので公開領域直下ではなく、

www/hogehoge/sns
という感じの場所に入れました。

そうすると当然、config.inc.phpの値も以下のように変わるので注意です。
define('OPENPNE_DIR', realpath('../../../OpenPNE/'));




すごく簡単ですよね。

私は一箇所「/」を入れ忘れて真っ白な画面しか初めは映らなかったですが、、、ふ。

ただ、これだけでは携帯から写真つきで投稿したりできないので、そのあたりの設定はまた別にする必要があります。

画面のスクリーンショットの一部だけを保存するのに便利なClipOutScreen

こんばんはっ。
ここ数日は疲れがどっと出てきたような、なんだかちょっと変な感じです。
体は疲れているってわけではないんですが。。。

新型インフルエンザに加え、季節性のインフルエンザなども流行りだしそうな感じなので、手洗いうがいをしっかりしないとですねっ。


本題ですが、スクリーンショットを保存する時ってどうしていますか?
PrintScreen押して、画像編集ソフトに貼り付けて、トリミングして・・・
ってのを、最近までやってました。
きっと、大多数の人がそうですよね?

最近見つけたのがこれ
ClipOutScreen(Vectorの新着ソフトレビュー)

使い方は簡単で、ソフトを起動して、選択モードにして保存したいところ囲む。
『形式を指定して保存』か、ショートカットボタンを押すことで画像が保存されます。
めちゃくちゃ簡単ですよっ!


ただ、JPG保存のショートカットがデフォルトだと【Ctrl+J】なので
「右手はマウスだし、左手だけでそんなショートカットだと手がつってしまうじゃない!!」
って人は、環境設定でショートカットを【J】だけにするとステキです。


手がつりそうだったので、そうしました。

liタグで画像を用いたメニューを作った時、下に隙間が出来てしまったらやってみること

先日会話中に

「うにが『そんなこともあったような気がする』って言う時って、実はまったく覚えてないことが多いよね」

と言われました。
図星とまでは言いませんが、、、半分ぐらいあってます、きゃ。


IE、Firefox問わず(主にIE)、リストでメニューを作っている時、下に隙間ができることがよくあります。
3ピクセルか4ピクセルくらいの、謎の隙間です。
そんな経験ありませんか?

画像のheightが決まっているならば、

ul#menuList li {
    height: 50px;
    overflow: hidden;
}
とかでもいいかもしれませんが、メニュー画像のheightがバラバラの場合、なかなかそうはいかないです。

そんな時は、以下のように指定してみてください。
ul#menuList img {
    vertical-align: top;
}
これで直るかもしれません。





なぜ直るのかは、よく知りません(ゎ

フォームをいかにして使いやすくするか

こんばんは。
今日は久しぶりに親子丼を作って、うまいうまいって食べ過ぎて、現在進行形でお腹が苦しいです。
腹八分目くらいがちょうどいいですよね、、、反省。



先日コリスさんにあがっていた
なんだかちょっと使いにくいかもしれないフォームのデザイン集 | コリス
というエントリーを元に書いたのですが、それの内容に関連する
使いやすいフォームを実装するための10のポイント | コリス
というエントリーが最近あがっていました。

ユーザビリティって、大切ですよね。
ただ見てもらうだけのサイトでももちろんですが、ユーザーから問い合わせてもらって初めて成果となるようなサイトだと、ちょっと意識しておかないといけないですよね。
いざユーザーが問い合わせようとした時に

「うわ、めんどくさ・・・」

というようなことになって入力をやめてしまったりしたら、成果になりませんし、印象も悪くなってしまうかもしれません。

私自身が入力している時に面倒だなとか、入力しづらいと思ったことのあるフォームはこんなのです。


  • 数字や記号に半角が使えない(指定が全角のみ)
    テンキー使うと半角なので、使えるほうがうれしいです。
  • 必須入力がどれかわからない
    その上、『決定』ボタンを押しても「情報は正しく入力してください」としかでてこないとかいうこともありました。
    必須か必須でないかは明確にしておいて欲しいです。
  • 入力エラーが出ていても、本文と同化してしまってわかり辛い
    色を変えるとか太字にするとか、何かしら判りやすくして欲しいです。
    エラーが出ている項目の背景の色が変わるというのも、わかりやすいですね。
  • 何を入力していいのかわからない欄がある
    あるだけなら無視してしまってもいいかなとも思うんですが、その上そこが必須入力だったりすることもあるんですよね。
    楽○市場で買い物する時に、『備考』欄が必須入力なお店とかがあるんですが、何を書く欄なのかの記述もないので非常に困ります。
  • TABキーで移動できない
    次の項目に移動する時にマウスで一個一個ぽちぽち移動するのは手間です。

ぱっと思いついたのが、これくらいですね。
上であげたのは私的に良くないなと思ったポイントなので、自分でフォームを作る時はこういった良くないフォームにならないように気をつけるようにしています。